image does not display when updated in a form

See more:

C#

ASP.NET

MVC

Hello fellas,

I am following the MvcMusicStore tutorial from ASP.NET and so far so good, except I am having some issues with the Album Covers not updating. basically, there is a Store page with a Music List table. This table has edit, delete, and details options. When you "edit" it takes you to a form where you can add an Album URL. This album URL should be passed to another view where all the music albums are displayed. (to include the index page where the top 5 albums are also displayed)

This is how it is structured

Controller Edit GET and POST portions

// GET: /StoreManager/Edit/5

        public ActionResult Edit(int id)
        {
            Album album = db.Albums.Find(id);
            ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name", album.GenreId);
            ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId", "Name", album.ArtistId);
            return View(album);
        }

        //
        // POST: /StoreManager/Edit/5

        [HttpPost]
        public ActionResult Edit(int Id, Album album)
        {
            if (ModelState.IsValid)
            {
                album.AlbumId = Id;
                db.Entry(album).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name", album.GenreId);
            ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId", "Name", album.ArtistId);
            return View(album);
        }

This is the Edit View

@model WebsiteManager.Models.Album

@{
    ViewBag.Title = "Edit";
}

<h2>Edit</h2>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Album</legend>

        @Html.HiddenFor(model => model.AlbumId)

        <div class="editor-label">
            @Html.LabelFor(model => model.GenreId, "Genre")
        </div>
        <div class="editor-field">
            @Html.DropDownList("GenreId", String.Empty)
            @Html.ValidationMessageFor(model => model.GenreId)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ArtistId, "Artist")
        </div>
        <div class="editor-field">
            @Html.DropDownList("ArtistId", String.Empty)
            @Html.ValidationMessageFor(model => model.ArtistId)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Title)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Price)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Price)
            @Html.ValidationMessageFor(model => model.Price)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.AlbumArtUrl)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.AlbumArtUrl)
            @Html.ValidationMessageFor(model => model.AlbumArtUrl)
        </div>

        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

This is the Detail View. Supposedly, if the field being viewed had an album cover included, it should show here. So far all it is passed is the URL of the cover album itself, not the image.

@model WebsiteManager.Models.Album

@{
    ViewBag.Title = "Details";
}

<h2>Details</h2>

<fieldset>
    <legend>Album</legend>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Genre.Name)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Genre.Name)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Artist.Name)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Artist.Name)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Title)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Title)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Price)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Price)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.AlbumArtUrl)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.AlbumArtUrl)
    </div>
</fieldset>
<p>
    @Html.ActionLink("Edit", "Edit", new { id=Model.AlbumId }) |
    @Html.ActionLink("Back to List", "Index")
</p>

The Album class in case it is of any help

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace WebsiteManager.Models
{
    [Bind(Exclude = "AlbumId")]
    public class Album
    {
        [ScaffoldColumn(false)]
        public int AlbumId { get; set; }
        [DisplayName("Genre")]
        public int GenreId { get; set; }
        [DisplayName("Artist")]
        public int ArtistId { get; set; }
        [Required(ErrorMessage = "An Album Title is required")]
        [StringLength(160)]
        public string Title { get; set; }
        [Required(ErrorMessage = "Price is required")]
        [Range(0.01, 100.00,
            ErrorMessage = "Price must be between 0.01 and 100.00")]
        public decimal Price { get; set; }
        [DisplayName("Album Art URL")]
        [StringLength(1024)]
        public string AlbumArtUrl { get; set; }
        public virtual Genre Genre { get; set; }
        public virtual Artist Artist { get; set; }
        public virtual List<OrderDetail> OrderDetails { get; set; }
    }
}

And finally the index form where it shows the call to the top 5 album images

<div id="promotion"></div><br />
<h3>Fresh off the grill</h3>

<ul id="album-list">
    @foreach (var album in Model)
    {
        <li><a href="@Url.Action("Details", "Store", new { id = album.AlbumId })"><img alt="@album.Title" src="@album.AlbumArtUrl" /> <span>@album.Title</span></a></li>
    }
</ul>

I appreciate any help. ME and another engineer have been brainstorming but nothing yet.

if you want to see the site live and test it go to

djfitz.azurewebsites.net

thanks