Mvc项目实例 MvcMusicStore 一
Mvc项目实例 MvcMusicStore 二
Mvc项目实例 MvcMusicStore 三
Mvc项目实例 MvcMusicStore 四
Mvc项目实例 MvcMusicStore 五
接着上一部分
1) 创建编辑视图
下面我将通过vs2010向导,来创建专集编辑页面。
经过分析,我们发现,在编辑专集信息(album)的时候,我们需要的数据有Album实体类,还有艺术和流派下拉列表框。
所以,我们要先创建一个ViewModels类,来进行传递变量信息。
在资源管理器中,选中ViewModels文件夹à右键单击à添加类à将类名修改为StoreManagerViewModel
主要代码如下
using MvcMusicStore.Models;
namespace MvcMusicStore.ViewModels
{
public class StoreManagerViewModel
{
public Album Album { get; set; }
public List<Artist> Artists { get; set; }
public List<Genre> Genres { get; set; }
}
}
接着我们分析控制器代码。我们不难发现,对于Edit方法有Get方式和Post方式;这里我们要说明的是,对于Edit方法的请求,
当页面第一次加载时,mvc会调用Get方式的方法。当页面发生改变或提交时,Mvc框架会调用Post方法;
在此模块中,第一次加载时,我主要是要显示一些内容,所以,我们要先修改Get方式的Edit方法
//
// GET: /StoreManager/Edit/5
public ActionResult Edit(int id)
{
var viewModel = new StoreManagerViewModel
{
Album=storeDB.Album.Single(a=>a.AlbumId==id),
Genres=storeDB.Genre.ToList(),
Artists=storeDB.Artist.ToList()
};
return View(viewModel);
}
从分析中,我们不难发现,编辑和更新用的都是同样的文本框和列表框。因此这里我们采用部分视图来实现;在mvc里的部分视图类似于2.0项目里的用户控件
在资源管理器中找到ViewsàSharedà右键单击,添加文件夹,并命名为EditorTemplates
选中文件夹,右键添加视图,
在此要注意的是,
1) 视图名称为Album
2) 选中创建部分视图
3) 选择视图数据类为MvcMusicStore.Models.Album
4) 视图内容选择Edit
创建视图完成后,我们回到StoreManagerController 选中Edit方法,右键单击à创建编辑视图
1) 创建强类型视图,视图数据类选择StoreManagerViewModel
2) 视图内容选择Edit ,然后选择添加
添加视图成功后,我们接着利用Html.EditFor来加载Album部分视图
<% using (Html.BeginForm()) {%>
<%: Html.ValidationSummary(true) %>
<fieldset>
<legend>Edit Album</legend>
<%:Html.EditorFor(model=>model.Album,
new {Artists=Model.Artists,Genres=Model.Genres})%>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
<% } %>
运行项目,浏览/StoreManager/Edit/1 我们将看到结果如下:
从图上我们看出,这样的情况还没有达到我们想到的结果,最主要是ArtistId应该是一个下拉列表框,和GenreId也应该是一个下拉列表框
所以,我们接着修改
修改代码如下:
<p>
<%: Html.LabelFor(model => model.Title) %>
<%: Html.TextBoxFor(model => model.Title) %>
<%: Html.ValidationMessageFor(model => model.Title) %>
</p>
<p>
<%: Html.LabelFor(model => model.Price) %>
<%: Html.TextBoxFor(model => model.Price) %>
<%: Html.ValidationMessageFor(model => model.Price) %>
</p>
<p>
<%: Html.LabelFor(model => model.AlbumArtUrl) %>
<%: Html.TextBoxFor(model => model.AlbumArtUrl) %>
<%: Html.ValidationMessageFor(model => model.AlbumArtUrl) %>
</p>
<p>
<%: Html.LabelFor(model => model.GenreId) %>
<%: Html.DropDownList("GenreId",new SelectList(ViewData["Genres"] as IEnumerable,"GenreId","Name",Model.GenreId)) %>
<%: Html.ValidationMessageFor(model => model.GenreId) %>
</p>
<p>
<%: Html.LabelFor(model => model.ArtistId) %>
<%: Html.DropDownList("ArtistId",new SelectList(ViewData["Artists"] as IEnumerable,"ArtistId","Name",Model.ArtistId)) %>
<%: Html.ValidationMessageFor(model => model.ArtistId) %>
</p>
再次运行项目,我们将看到下面的效果:
数据显示完成后即Edit 的Get方法完成后,我们接着修改Edit方法的Post方法
[HttpPost]
public ActionResult Edit(int id, FormCollection collection)
{
Album album = new Album();
try
{
// TODO: Add Edit logic here
UpdateModel(album, "Album");
storeDB.SaveChanges();
return RedirectToAction("Index");
}
catch
{
var viewModel = new StoreManagerViewModel
{
Album = album,
Genres = storeDB.Genre.ToList(),
Artists = storeDB.Artist.ToList()
};
return View(viewModel);
}
}
再运行项目,然后试着修改album信息。你将看会修改成功能效果。
创建新album模块
在项目资源管理器里找到StoreManagerController
找到Get试的Create方法,右键单击添加视图
修改视图内容如下:
<% using (Html.BeginForm()) {%>
<%: Html.ValidationSummary(true) %>
<fieldset>
<legend>Create Album</legend>
<%:Html.EditorFor(model=>model.Album,
new {Artists=Model.Artists,Genres=Model.Genres})%>
<p><input type="submit" value="Create" /></p>
</fieldset>
<% } %>
再然后修改StoreManagerController的Create方法
//
// GET: /StoreManager/Create
public ActionResult Create()
{
var viewModel = new StoreManagerViewModel
{
Album = new Album(),
Genres = storeDB.Genre.ToList(),
Artists = storeDB.Artist.ToList()
};
return View(viewModel);
}
//
// POST: /StoreManager/Create
[HttpPost]
public ActionResult Create(FormCollection collection)
{
Album album = new Album();
try
{
// TODO: Add insert logic here
UpdateModel(album, "Album");
storeDB.AddToAlbum(album);
storeDB.SaveChanges();
return RedirectToAction("Index");
}
catch
{
var viewModel = new StoreManagerViewModel
{
Album = new Album(),
Genres = storeDB.Genre.ToList(),
Artists = storeDB.Artist.ToList()
};
return View(viewModel);
}
}
运行项目,然后找到创建新的album ,将看到如下图所示效果
点击Save
我们将看到最后一条记录test创建成功
处理删除
在此项目中,我们删除一个album的过程是,先显示album的主要信息,然后删除和album有关的订单或订单详细信息及购物栏信息
在资源管理器里找到StoreManagerController里的Delete方法,我们对Get方式和Post方式的方法修改如下:
// GET: /StoreManager/Delete/5
public ActionResult Delete(int id)
{
var album = storeDB.Album.Single(a => a.AlbumId == id);
return View(album);
}
//
// POST: /StoreManager/Delete/5
[HttpPost]
public ActionResult Delete(int id, FormCollection collection)
{
var album = storeDB.Album
.Include("OrderDetail").Include("Cart")
.Single(a => a.AlbumId == id);
try
{
// TODO: Add delete logic here
storeDB.DeleteObject(album);
storeDB.SaveChanges();
return RedirectToAction("Index");
}
catch
{
return View(album);
}
}
为delete方法创建视图
点击确定后,运行项目
点击Delete按钮后,你将看到删除成功
至此,我们对数据的增,删,改,查已经处理完成。当然仅仅有这些还是不够的,我们还要对数据进行进一步验证,
包括客户端验证和服务器端验证,在下一部分里,我们将介绍如何使用.net mvc 提供的验证框架来验证数据的合法性