在本文中，将探讨如何在ASP.NET MVC4应用程序中使用Partial Views和jQueryUI来实现Ajax调用，以便创建、编辑和删除培训信息。将学习如何使用jQueryUI方法来创建控件，如何从XML文件中访问数据，以及如何创建和使用Partial Views。
概述
Partial View允许在应用程序的多个页面中重复使用相同的代码，这在需要在多个视图中使用相同代码时非常有用。在ASP.NET Web Forms中，使用母版页来定义所有其他页面共享的核心布局。但是，如果只想为少数页面添加一些功能，那么Partial View就是正确的选择。例如，创建产品、编辑产品等功能。
jQueryUI是jQuery库的扩展，提供了丰富的交互式控件集合，用于增强Web应用程序的用户界面。它是jQuery的官方UI库。默认情况下，jQueryUI随Visual Studio 2012一起提供。如果使用的是Visual Studio 2012，将在Scripts文件夹中获得所有必需的jQueryUI库，在content文件夹中获得所需的CSS文件。如果不使用Visual Studio 2012，需要自己添加jQueryUI库和CSS文件。
创建ASP.NET MVC 4应用程序
将通过选择ASP.NET MVC4 Web应用程序模板并命名为"CRUDWithAjax"来创建一个示例应用程序。Visual Studio 2012将在解决方案中添加一个名为"CRUDWithAjax"的项目。
打开Content和Scripts文件夹，将看到所有必需的jQuery、jQueryUI库和所有CSS文件。作为良好实践，不应该包含应用程序中未使用的文件。因此，让从Scripts和Content文件夹中删除不必要的文件。
打开App_Start文件夹，从这个文件夹中移除WebApiConfig.cs，因为在这个应用程序中没有做任何与WebApi相关的事情。打开BundleConfig.cs文件并从这个文件中移除不必要的代码。
创建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文件夹中。向Trainings.xml文件中添加数据，如下载的代码中所示。
实现Action方法和视图
通过右键单击Controller文件夹并命名为Home来添加一个控制器。创建TrainingRepository类的实例，并使用这个对象来执行CRUD操作。
在HomeController.cs文件中，添加以下代码到Index action方法中，以返回填充了培训信息的Index视图。
public ActionResult Index()
{
List<Training> allTrainings = _trainingRepository.GetTrainings().ToList();
return View(alltrainings);
}
通过右键单击Index() action方法，添加一个视图，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">
Start Date
</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文件。
现在运行应用程序。希望屏幕看起来和下面显示的类似：
在这里，将获得XML数据库中所有可用的培训。但是，创建、编辑和删除按钮不起作用。在下一部分中，将实现创建、编辑和删除操作的功能。
结论