在本教程中,将学习如何使用ASP.NET MVC3框架与Entity Framework进行集成,并通过Northwind数据库示例来演示如何创建一个简单的数据展示应用。
首先,确保已经安装了ASP.NET MVC 3和Entity Framework。如果没有安装,可以从以下链接下载:
ASP.NET MVC 3:
Entity Framework:
Northwind Database:
打开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文件。右键点击“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
为了确保jqxGrid控件的样式正确显示,需要添加它的CSS依赖。右键点击“Content”目录,选择“Add -> Existing Item”,然后从文件夹中选择“jqx.base.css”和“jqx.classic.css”并添加到项目中。
打开“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控件的视觉效果更佳,建议将包含箭头和关闭按钮图标的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”。
将使用“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”。
控制器生成完成后,转到“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);
}
转到项目中的“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>
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 }
);
}