ASP.NET MVC 3与Entity Framework集成指南

在本教程中,将学习如何使用ASP.NET MVC3框架与Entity Framework进行集成,并通过Northwind数据库示例来演示如何创建一个简单的数据展示应用。

准备工作

首先,确保已经安装了ASP.NET MVC 3和Entity Framework。如果没有安装,可以从以下链接下载:

ASP.NET MVC 3:

Entity Framework:

Northwind Database:

创建ASP.NET MVC 3项目

打开Visual Studio,创建一个新的ASP.NET MVC3项目。在创建过程中,选择“Empty project”作为项目模板,并在“View engine”选项中选择“Razor”。

加载数据库

将Northwind数据库的文件“NORTHWND.LDF”和“NORTHWND.MDF”拖放到项目中的“App_Data”目录下。如果项目中没有“App_Data”文件夹,可以通过在“Solution Explorer”中右键点击空白区域,选择“Add -> Add ASP.NET Folder -> App_Data”来创建。

添加JavaScript文件

接下来,需要添加一些JavaScript文件。右键点击“Scripts”目录,选择“Add -> Existing Item”,然后从jqwidgets文件夹中选择以下文件:

jquery-1.7.1.min.js, jqxbuttons.js, jqxcore.js, jqxdata.js, jqxgrid.js, jqxgrid.selection.js, jqxmenu.js, jqxscrollbar.js

添加CSS样式

为了确保jqxGrid控件的样式正确显示,需要添加它的CSS依赖。右键点击“Content”目录,选择“Add -> Existing Item”,然后从文件夹中选择“jqx.base.css”和“jqx.classic.css”并添加到项目中。

修改_Layout.cshtml文件

打开“Views/Shared/_Layout.cshtml”文件,将之前添加的CSS和JavaScript文件包含进来。如果存在旧版本的jQuery,记得将其删除。完成后,_Layout.cshtml文件应该如下所示:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css"/> <link href="@Url.Content("~/Content/jqx.base.css")" rel="stylesheet" type="text/css"/> <link href="@Url.Content("~/Content/jqx.classic.css")" rel="stylesheet" type="text/css"/> <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jqxcore.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jqxbuttons.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jqxdata.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jqxgrid.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jqxgrid.selection.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jqxmenu.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jqxscrollbar.js")" type="text/javascript"></script> </head> <body> @RenderBody() </body> </html>

添加jqxGrid的视觉效果

为了使jqxGrid控件的视觉效果更佳,建议将包含箭头和关闭按钮图标的images文件夹也添加到项目中。可以通过将images文件夹拖放到“Content”目录下实现这一点。

创建模型

接下来,将创建模型。右键点击“Models”文件夹,选择“Add -> New Item”,在左侧的树状视图中选择“Data”,然后选择“ADO.NET Entity Data Model”并点击“Add”。

在“Choose Model Contents”部分,选择“Generate from database”并点击Next。在“Choose Your Data Connection”部分,点击Next。在下一个部分(“Choose Your Database Objects”),勾选“Tables”和“Stored Procedures”复选框,然后点击“Finish”。

使用DataTable

将使用“Customers”表作为DataTable。要添加实体对象和DbContext,需要展开“Models”目录,双击“Model1.edmx”。在出现的图表中,右键点击空白区域,选择“Add Code Generation Item”。在左侧的树状视图中,选择“Code”,选择“ADO.NET DbContext Generator”并点击“Add”。

构建项目

构建项目,按下F6键。

添加控制器

现在,准备添加控制器。右键点击“Controller”文件夹,然后选择“Add -> Controller”。将其重命名为“CustomersController”。选择“Controller with read/write actions and views, usingEntity Framework”作为模板。对于Model类,选择“Customer (Project.Models)”,对于Data context类选择“NORTHWNDEntities2 (Project.Models)”。完成后,点击“Add”。

修改CustomersController.cs文件

控制器生成完成后,转到“Controllers”文件夹,双击“CustomersController.cs”。在“Index”方法后添加以下方法:

public JsonResult GetCustomers() { var dbResult = db.Customers.ToList(); var customers = from customer in dbResult select new { customer.CompanyName, customer.ContactName, customer.ContactTitle, customer.Address, customer.City }; return Json(customers, JsonRequestBehavior.AllowGet); }

修改Index.cshtml视图

转到项目中的“Views/Customers”文件夹,双击“Index.cshtml”。将以下内容放入其中:

<script type="text/javascript"> $(document).ready(function () { // prepare the data var source = { datatype: "json", datafields: [{ name: 'CompanyName' }, { name: 'ContactName' }, { name: 'ContactTitle' }, { name: 'Address' }, { name: 'City'}, ], url: 'Customers/GetCustomers' }; $("#jqxgrid").jqxGrid({ source: source, theme: 'classic', columns: [{ text: 'Company Name', datafield: 'CompanyName', width: 250 }, { text: 'ContactName', datafield: 'ContactName', width: 150 }, { text: 'Contact Title', datafield: 'ContactTitle', width: 180 }, { text: 'Address', datafield: 'Address', width: 200 }, { text: 'City', datafield: 'City', width: 120 }] }); }); </script> <h2>Index</h2> <div id="jqxgrid"></div>

修改Global.asax.cs文件

public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( "Customers", "{controller}/{action}/{id}", new { controller = "Customers", action = "Index", id = UrlParameter.Optional } ); }
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485