ASP.NETMVC音乐商店-5.通过支架创建编辑表单-创新互联

这样， Index 视图的代码应该如下所示：

@model IEnumerable
@{
    ViewBag.Title = "Index";
}

    Index


    @Html.ActionLink("Create New", "Create")









    @foreach (var item in Model)
    {







    }
  
   

            Genre
   
   

            Artist
   
   

            Title
   
   

            Price
   
   

   
  
   
 

                @Html.DisplayFor(modelItem => item.Genre.Name)
 
 

                @Truncate(item.Artist.Name, 25)
 
 

                @Truncate(item.Title, 25)
 
 

                @Html.DisplayFor(modelItem => item.Price)
 
 

                @Html.ActionLink("Edit", "Edit", new { id = item.AlbumId }) |
                @Html.ActionLink("Details", "Details", new { id = item.AlbumId }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.AlbumId })
 
   

Store Manager 的第一印象

视图虽然修改完成了，但是 Index 方法中还没有向视图提供数据的代码，修改 Index 方法，增加从数据库中获取数据的处理逻辑。

public ActionResult Index()
{
  var albums = storeDB.Albums.Include("Genre").Include("Artist");
  return View(albums.ToList());
}

现在，运行程序，浏览 /StoreManager，注意，在路由的配置中，默认的 Action 将会使用 Index，修改之后的视图显示了带有编辑，详细内容和删除链接的专辑列表。

需要注意的是，编辑、详细内容和删除链接的视图需要我们手工创建之后才能使用。

我们依次创建这些视图。将光标放置在 Edit 的 Action 方法内，单击鼠标右键，在弹出菜单中选择添加视图。

创建编辑视图的对话框，注意使用的支架为 Edit。

同样，修改 Edit 的 Action 方法。

需要注意的是，你会看到在 Controller 中存在两个同名的 Edit 方法，第二个方法前面使用了 [HttpPost] 标签，这个标签标识当请求类型为 Post 方式的时候，将会由这个方法进行请求的处理，否则，使用第一个 Edit 方法进行处理。

在 ASP.NET MVC 中，已经不再使用视图状态了，在需要用户编辑数据的时候，我们首先提供一个编辑表单，用户得到这个编辑表单的方式一般是通过某个超级链接，这样的请求方式将是 GET 请求，当这样的请求到达服务器的时候，我们向客户端返回编辑页面，允许用户编辑数据。

在编辑数据的窗体中，我们提供一个 form 表单，这个表单的提交方式设置为 Post 方式，用户在提交表单的时候，将填写的数据提交到服务器。由于此时的提交方式成为 Post 方式，这就允许我们在服务器上通过请求的提交方式区分出来请求的类型。

这样，我们就可以在 Controlller 中提供同名的 Action 来处理用户的编辑操作，Get 方式的 Action 用来提供编辑表单，而 Post 方式的 Action 用来获取用户提交的数据。这种方式在 ASP.NET MVC 中使用很多。

修改后的 Edit 方法如下所示：

public ActionResult Edit(int id)
{
    MvcMusicStore.Models.Album album = storeDB.Albums.Find(id);
  return View(album);
}

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

[HttpPost]
public ActionResult Edit(int id, FormCollection collection)
{
  try
    {
   // TODO: Add update logic here
        MvcMusicStore.Models.Album album = storeDB.Albums.Find(id);
   if (this.TryUpdateModel(album))
        {
 return RedirectToAction("Index");
        }
   return View();
    }
  catch
    {
   return View();
    }
}

创建详细内容视图。注意使用的支架。

相应修改 Details 方法的处理逻辑。

//
// GET: /StoreManager/Details/5

public ViewResult Details(int id)
{
    MvcMusicStore.Models.Album album = storeDB.Albums.Find(id);
  return View(album);
}

创建删除视图的对话框，注意使用的支架模板。

同样， Delete 方法也有两个，一个用来处理 Get 方式的请求，一个用来处理点击确认删除之后的请求。

public ActionResult Delete(int id)
{
    MvcMusicStore.Models.Album album = storeDB.Albums.Find(id);
  return View(album);

}
//
// POST: /StoreManager/Delete/5

[HttpPost]
public ActionResult Delete(int id, FormCollection collection)
{
  try
    {
   // TODO: Add delete logic here
        MvcMusicStore.Models.Album album = storeDB.Albums.Find(id);
        storeDB.Albums.Remove(album);

   return RedirectToAction("Index");
    }
  catch
    {
   return View();
    }
}

现在，可以运行一下了，访问 /StoreManager 可以得到如下的结果。

点击编辑链接，将会显示一个带有专辑字段的编辑表单。

点击位于底部的返回列表链接，然后，点击详细内容链接， 将会显示单个专辑的详细信息。

再来一次，回到列表，点击删除链接，现在将会看到一个确认对话框，显示了专辑的详细内容，请你确认是否真的需要删除。

点击底部的删除按钮，将会删除这个专辑，然后返回 Index 列表视图，专辑已经被删除了。

我们的工作还没有完成，我们要开始对控制器和视图的 CRUD 操作进行处理了。