这是学习MVC2和EF访问数据库后的第一个练习实例。实现的是对主题图片的增、删、改及显示的过程,下面是实现步骤和代码。
1:先创建一个mvc工程,打开VS2010,在File->New->Project... 在Visual C#下选中 ASP.NET MVC 2 Web Application 在对话框的Name栏目改名为ThemeMVC,存放目录自己可选。确定后一个带有模板的MVC框架就已经创建好了。
2:创建数据库,在Solution Explorer 栏目 ThemeMVC项目下的App_Data栏右击,选Add->New Item... 下的 SQL Server Datebase 改名字为ThemeDB 然后点击Add按钮,所添加的数据库ThemeDB就出现在App_Data下,双击ThemeDB,出现Server Explorer 框,在ThemeDB下的Tables 右击Create Table 创建一个Themes1的表,表的内容如图所示:
.
3:用EF关联所创建的数据库,进行数据映射。 在ThemeMVC项目上右击 Add->New Item.. 选ADO.NET Entity Data Model 改name 为ThemeModel.edmx 点Add添加。出现对话框choose model content,选generate from database 然后点击next,在与哪个数据库连接的对话框中选中ThemeDB.sdf数据库,在Web.Config 里面保存连接名为ThemeDBEntities1,然后点击Next,在这个对话框中选中要作出映射的数据库表,将Tables的Theme1表选中,然后finish结束。 这时在ThemeMVC项目下面多了一个ThemeModel.edmx文件,在ThemeModel.Designer.cs文件中默认生成了实体容器ThemeDBEntities和实体类Themes,
双击ThemeModel.edmx文件,所映射的实体属性如图所示
其中需要注意的是,实体类名默认是与数据库表名相同,我更改了Themes1为Themes。对应的改Name为Themes。Entity Set Name 为实体集的名称,一个实体集含有多个实体类,但是此实例中只有一张数据表。
其中映射表为下图所示:
4. 代码实现。
根据mvc的特性,在Controller下的HomeController页,先写一个构造函数,初始化实体容器实例。
ThemeDBEntities ThemeContext;
public HomeController()
{
ThemeContext = new ThemeDBEntities();
}
第一个页面,即启动页。从Global.asax.cs文件中可以改写启动也面。 默认为Home\Index。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
2 {
3 public static void RegisterRoutes(RouteCollection routes)
4 {
5 routes.IgnoreRoute( " {resource}.axd/{*pathInfo} " );
6
7 routes.MapRoute(
8 " Default " , // Route name
9 " {controller}/{action}/{id} " , // URL with parameters
10 new { controller = " Home " , action = " Index " , id = UrlParameter.Optional } // Parameter defaults
11 );
12
13 }
14
15 protected void Application_Start()
16 {
17 AppDomain.CurrentDomain.SetData( " SQLServerCompactEditionUnderWebHosting " , true );
18
19 AreaRegistration.RegisterAllAreas();
20
21 RegisterRoutes(RouteTable.Routes);
22 }
23 }
添加Index.aspx页面。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
2 {
3 ViewData.Model = ThemeContext.Themes.ToList(); // 将实体类的记录值转变为强类型
4 ViewData[ " Path " ] = ThemeContext.Themes.First().Theme_Path; // 默认显示的图片路径为第一条记录的路径
5 return View( " Index " );
6 }
在Index()方法上右击,选Add View... 弹出的对话框如图,add添加即可,页面就存在于目录下Views->Home->Index.aspx (其他方法的页面也用此方法添加即可)
Index.aspx页面的代码。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
2
3 < asp:Content ID = " Content1 " ContentPlaceHolderID = " TitleContent " runat = " server " >
4 Home Page
5 </ asp:Content >
6 < asp:Content ID = " Content2 " ContentPlaceHolderID = " MainContent " runat = " server " >
7 < center >
8 < h2 >
9 Theme 数据操作 </ h2 >
10 </ center >
11 < table border = " 1 " width = " 100% " cellspacing = " 20pt " style = " border-color: Gray " >
12 < tr >
13 < th >
14 主题编号
15 </ th >
16 < th >
17 主题名
18 </ th >
19 < th >
20 主题存放路径
21 </ th >
22 < th >
23 主题元素备注
24 </ th >
25 < th >
26 主题应用IP
27 </ th >
28 < th >
29 </ th >
30 < th >
31 </ th >
32 < th >
33 操作
34 </ th >
35 </ tr >
36 <% foreach (var m in ViewData.Model as List < ThemeMVC.Models.Themes > )
37 { %>
38 < tr >
39 < td >
40 <%= m.Theme_ID %>
41 </ td >
42 < td >
43 <%= m.Theme_Name %>
44 </ td >
45 < td >
46 <%= m.Theme_Path %>
47 </ td >
48 < td >
49 <%= m.Theme_Note %>
50 </ td >
51 < td >
52 <%= m.Theme_IP %>
53 </ td >
54 < td >
55 <%= Html.ActionLink( " 编辑 " , " Edit " , new {ID = m.Theme_ID}) %>
56 </ td >
57 < td >
58 <%= Html.ActionLink( " 删除 " , " Delete " , new {ID = m.Theme_ID}) %>
59 </ td >
60 < td >
61 <%= Html.ActionLink( " 显示图片 " , " Show " , new {ID = m.Theme_ID}) %>
62 </ td >
63 </ tr >
64 < tr >
65 </ tr >
66 <% } %>
67 < tr >
68 </ tr >
69 </ table >
70 < p style = " text-align: center " >
71 <%= Html.ActionLink( " 添加 " , " Add " ) %></ p >
72 < img width = " 100% " src = ' <%=ViewData["Path"] %> ' alt = " \image\A.jpg " height = " 200 " />
73 </ asp:Content >
Edit.aspx页面的html代码
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
2 Edit
3 </ asp:Content >
4
5 < asp:Content ID = " Content2 " ContentPlaceHolderID = " MainContent " runat = " server " >
6 < script type = " text/javascript " >
7 function firm() {
8 var result = confirm( " 确定修改数据! " );
9 if (result == false ) {
10 return false ;
11 }
12 else return true ;
13 }
14
15 </ script >
16 < form id = " form1 " runat = ' server ' method = " post " >
17 < h2 > Edit </ h2 >
18 <%= Html.Hidden( " Theme_ID " ) %>
19 Theme_Name: <%= Model.Theme_Name %>< br />< hr />
20 <%= Html.TextBox( " Theme_Name " ) %>< br />< hr />
21 Theme_Path: <%= Model.Theme_Path %>< br />< hr />
22 <%= Html.TextBox( " Theme_Path " ) %>< br />< hr />
23 Theme_Note: <%= Model.Theme_Note %>< br />< hr />
24 <%= Html.TextBox( " Theme_Note " ) %>< br />< hr />
25 Theme_IP: <%= Model.Theme_IP %>< br />< hr />
26 <%= Html.TextBox( " Theme_IP " ) %>< br />< hr />
27 < input type = " submit " value = " Edit " runat = " server " onclick = " return firm(); " ></ form >
28 </ asp:Content >
HomeController页面下的Edit方法:
2 {
3 var ThemeEdit = ThemeContext.Themes.First(m => m.Theme_ID == ID);
4 return View(ThemeEdit);
5 }
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
2 public ActionResult Edit( int Theme_ID, FormCollection form) // FormCollection集合为Edit页面post提交的所有参数集合
3 {
4 Themes ThemeEdit = ThemeContext.Themes.First(m => m.Theme_ID == Theme_ID);
5 try
6 {
7 UpdateModel(ThemeEdit);
8 ThemeContext.SaveChanges();
9 return RedirectToAction( " Page_Load " , new { ThemeEdit.Theme_ID });
10 }
11 catch (Exception e)
12 {
13 ModelState.AddModelError( " ThemeEdit.Theme_ID " ,e.Message);
14 }
15 return View( " Index " );
16 }
Add.aspx页面的html代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
2 Add
3 </ asp:Content >--%>
4
5 < asp:Content ID = " Content2 " ContentPlaceHolderID = " MainContent " runat = " server " >
6
7 < h2 > Add </ h2 >
8 < form id = " form2 " runat = " server " method = " post " >
9 Theme_Name: <%= Html.TextBox( " Theme_Name " ) %>< hr />
10 Theme_Path: <%= Html.TextBox( " Theme_Path " ) %>< hr />
11 Theme_Note: <%= Html.TextBox( " Theme_Note " ) %>< hr />
12 Theme_IP: <%= Html.TextBox( " Theme_IP " ) %>< hr />
13 < input type = " submit " value = " Add " />
14 </ form >
15
16 </ asp:Content >
在HomeController下的Add方法。
2 {
3 return View(); // 默认为View("Add")
4 }
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
2 public ActionResult Add(FormCollection form)
3 {
4 Themes th = new Themes();
5 ObjectQuery < int > abq = new ObjectQuery < int > ( " select value Max(it.Theme_ID) from Themes as it " , ThemeContext);
6 if (abq.Sum() == 0 )
7 {
8 th.Theme_ID = 1 ;
9 }
10 else
11 {
12 th.Theme_ID = abq.Max() + 1 ;
13 }
14
15 UpdateModel(th);
16 if (ModelState.IsValid)
17 {
18 ThemeContext.AddToThemes(th);
19 ThemeContext.SaveChanges();
20 return RedirectToAction( " Page_Load " , new {th.Theme_ID });
21 }
22 return View(abq);
23 }
在Index页面的Delete方法:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
2 {
3 var ThemeDelete = ThemeContext.Themes.First(m => m.Theme_ID == ID);
4 ThemeContext.DeleteObject(ThemeDelete);
5 if (ModelState.IsValid)
6 {
7 ThemeContext.SaveChanges();
8 return RedirectToAction( " Index " );
9 }
10 else
11 return View(ThemeDelete);
12 }
在Index页面点击显示图片按钮时用到的show方法
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
2 {
3 var ThemeShow = ThemeContext.Themes.First(m => m.Theme_ID == ID);
4 ViewData[ " Path " ] = ThemeShow.Theme_Path;
5 return Page_Load(ID);
6 }
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
2
3 public ActionResult Page_Load( int Theme_ID)
4 {
5 ViewData.Model = ThemeContext.Themes.ToList();
6 ViewData[ " Path " ] = ThemeContext.Themes.First(m => m.Theme_ID == Theme_ID).Theme_Path;
7 return View( " Index " );
8 }
以上为该练习涉及到的所有代码,实现效果如下。
主页面图:
Add页面图:
Edit页面图:
到此已经完成了实例练习。