使用部分视图和 jQueryUI 在 ASP.NET MVC4 中进行 CRUD 操作 - 第 1 部分
4.92/5 (54投票s)
使用部分视图和 jQueryUI 在 ASP.NET MVC4 中进行 CRUD 操作
引言
在本文中，我们将学习如何在 ASP.NET MVC4 中使用部分视图和 jQueryUI 实现 CRUD 操作。我们将通过 Ajax 调用服务器来访问用于创建、编辑和删除培训的部分视图。我们将借助 jQuery $.ajax() 调用控制器操作方法。为了方便起见，XML 文件用作数据库。在本系列文章中，您将学习：
- 什么是部分视图
- 如何使用 jQueryUI 方法创建控件
- 如何从 XML 文件访问数据
- 如何创建部分视图
- 如何使用部分视图
- 如何使用 jQueryUI 方法
- 如何使用 jQuery Ajax 方法调用相应的方法
注意：我使用Google Chrome 浏览器测试了代码，对于其他浏览器，编辑弹出窗口（本文第 2 部分介绍） 可能无法正常工作。
为使文章篇幅合理，本文分为两部分。
第 1 部分大纲
- 部分视图和 jQueryUI 概述
- 创建 ASP.NET MVC 4 应用程序
- 创建 XML 文件作为数据库和培训存储库
- 实现操作方法和视图
第 2 部分大纲
- 实现创建操作
- 实现编辑操作
- 实现删除操作
我们现在开始第 1 部分。首先，一些基础知识...
部分视图和 jQueryUI 概述
部分视图
部分视图允许我们在应用程序中的多个页面中使用相同的 Razor 和 HTML 代码。当您需要在多个视图中使用相同的代码时，部分视图是一个很好的选择。我们知道，如果需要在所有页面中显示某些内容，最好将其放在 MVC 应用程序的布局页面中。在 ASP.NET Web Forms 中，我们有主页面来定义所有其他页面共享的核心布局。但如果您想添加一些功能，但不是所有页面都添加，而是只添加部分页面，那么部分视图就是正确的选择。例如，创建产品、编辑产品等功能。
在此代码示例中，我们为培训的创建、编辑和删除表单使用部分视图。在标准的 ASP.NET MVC 项目模板中，部分视图可以添加到 Views 文件夹内的任何文件夹中，但这些部分视图不能被该文件夹外的视图使用。例如，如果您将部分视图添加到 Home 文件夹，它只能被 Home 文件夹内的视图使用。如果我们添加部分视图到未与任何控制器关联的 Shared 文件夹，那么它们可以在整个应用程序的任何视图中使用，这极大地提高了代码的可重用性。
jQueryUI
jQueryUI 扩展了底层的 jQuery 库，提供了一系列丰富而交互式的 UI 组件，用于增强 Web 应用程序的用户界面。它是 jQuery 的官方 UI 库。默认情况下，jQueryUI 随 Visual Studio 2012 一起提供。如果您使用的是 Visual Studio 2012，您将在 Scripts 文件夹中找到所有必需的 jQueryUI 库，以及 Content 文件夹中的必需 CSS 文件。如果您不使用 Visual Studio 2012，您需要自己添加 jQueryUI 库和 CSS 文件。您可以从此处下载 jQueryUI 包。
注意：我们假设您已下载附带的包含运行项目的示例代码。如果没有，请下载，因为我们在这里不提供所有代码的屏幕截图。让我们开始创建一个演示应用程序，以实现培训的 CRUD 操作。
创建 ASP.NET MVC 4 应用程序
- 让我们通过选择 ASP.NET MVC4 Web Application 模板来创建一个示例应用程序，并将项目名称设置为
CRUDWithAjax，然后单击“确定”。
- 选择 Basic Application 作为模板。Visual Studio 2012 会在解决方案中添加一个
CRUDWithAjax项目，如下图所示：
- 展开 Content 和 Scripts 文件夹。您将在 Content 文件夹中找到所有必需的 jQuery、jQueryUI 库以及所有 CSS 文件，如下图所示：
作为一种良好的实践，我们不应该在应用程序中包含我们不使用的文件。所以，让我们从 Scripts 和 Content 文件夹中删除不必要的文件。查看下面的屏幕截图，了解我们需要什么，并删除 Scripts 和 Content 文件夹中的所有其他文件。
- 打开 App_Start 文件夹。从该文件夹中删除 WebApiConfig.cs，因为在此应用程序中我们不进行任何与 WebApi 相关的工作。
- 打开 BundleConfig.cs 文件，并从该文件中删除不必要的代码。现在代码如下：
public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include( "~/Scripts/jquery-ui-{version}.js")); bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css")); bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( "~/Content/themes/base/jquery-ui.css" )); }
创建 XML 文件作为数据库和培训存储库
- 在 Models 文件夹下添加 Training.cs、ITrainingRepository.cs 和 TrainingRepository.cs 文件。编写下载文件中的代码。
Training.cs 文件包含 Training 实体的属性。ITrainingRepository是一个接口，其中包含我们将用于执行 CRUD 操作的方法。
我们需要在 TrainingRepository.cs 文件中实现这些方法。在 TrainingRepository.cs 文件的构造函数内部，为 Trainings.xml 的物理位置提供了路径。这里，Trainings.xml 作为数据库。 - 将 Trainings.xml 文件添加到 App_Data 文件夹，如下图所示：
向 Tranings.xml 文件添加下载代码中给出的数据。示例如下：
实现操作方法和视图
- 通过右键单击 Controller 文件夹来添加一个控制器，并将其命名为
Home。创建TrainingRepository类的实例，并使用该对象执行 CRUD 操作。 - 在 HomeController.cs 文件中，在
Index操作方法中添加以下代码，以返回填充了培训数据的Index视图。public ActionResult Index() { List<Training> allTrainings = _trainingRepository.GetTrainings().ToList(); return View(alltrainings); } - 通过右键单击
Index()操作方法添加一个视图，Index.cshtml 文件将被添加到 Views -> Home 文件夹。为了在 Index.cshtml 文件中显示我们的培训，请编写以下代码：@model <IEnumerable<CRUDWithAjax.Models.Training> <html> <head> <title></title> <script src="~/Scripts/appjs/jquery.timepicker.min.js"></script> <link href="~/Content/appcss/custom-style.css" rel="stylesheet" /> <link href="~/Content/appcss/jquery.timepicker.css" rel="stylesheet" /> </head> <body> <div class="pageHeader" > <h2>Manage Trainings</h2> </div> <table id="tbltraining" class="tblStyle"> <tr class="tblHearerRow"> <th class="tblHearerCell" >Name </th> <th class="tblHearerCell">Instructor </th> <th class="tblHearerCell">Star tDate </th> <th class="tblHearerCell">End Date </th> <th class="tblHearerCell">Start Time </th> <th class="tblHearerCell">Duration </th> <th class="tblHearerCell">Actions </th> </tr> @foreach (var item in Model) { <tr class="tblRow"> <td id="itemId" class="itemIdClass tblColumn"> @Html.TextBoxFor(modelItem => item.ID) </td> <td class="tblColumn"> @Html.DisplayFor(modelItem => item.Name) </td> <td class="tblColumn"> @Html.DisplayFor(modelItem => item.Instructor) </td> <td class="tblColumn"> @Html.DisplayFor(modelItem => item.StartDate) </td> <td class="tblColumn"> @Html.DisplayFor(modelItem => item.EndDate) </td> <td class="tblColumn"> @Html.DisplayFor(modelItem => item.Time) </td> <td class="tblColumn"> @Html.DisplayFor(modelItem => item.Duration) </td> <td class="tblColumn"> <input type="button" value="Edit" class="buttonEdit btnStyleOne" /> <input type="button" value="Delete" class="buttonDelete btnStyleOne" /> <td> </tr> } </table> <div class="btnStyleTwo"> <input type="button" value="Create new Training" class="buttonCreate btnStyleOne" /> </div> </body> </html>在这里，我们使用
foreach函数遍历Model（培训列表），以表格形式显示数据。 - Content 文件夹有两个文件，custom-style.css 和 jquery.timepicker.css。这些文件包含所有样式相关的信息。目前，Index.cshtml 只使用了 custom-style.css 文件。jquery.timepicker.css 将在稍后使用。
- 现在运行应用程序。希望您会得到一个类似于下面屏幕的界面：
在这里，您将获得 XML 数据库中的所有培训。但是创建、编辑和删除按钮不起作用。在下一部分中，我们将实现用于实现创建、编辑和删除操作的功能。
结论
在本文中，我们回顾了如何在网页上显示培训。我们了解了如何使用 ASP.NET MVC 4 模板。为了获取培训列表，我们使用 XML 文件作为数据库。我们通过存储库类（在控制器中用于响应请求）读取 XML 文件中的数据。在本系列的第 2 部分中，我们将看到如何使用 AJAX 调用和部分视图进行创建、编辑和删除操作。