在本文中，将探讨如何创建一个可重用的MVC模态窗口控件。这个控件基于MVC框架，利用HtmlHelper扩展和Razor语法，可以轻松地在视图中实现自定义的弹出控件。为了更好地理解本文，需要对jQuery、MVC和C#代码有一定的了解。
要在视图中添加这个控件，需要确保将控件添加到页面上，并分配所有必要的属性。这些属性将帮助管理模态窗口的行为。
首先，需要定义模态窗口的标题：
@(Html.HollowPoint().Window().Name("modalPopup").TemplateViewPath("~/Views/Shared/BootstrapModal.cshtml").Title("Hello new world!"))
然后，提供一个想要重用的模板。这个模板就像是客户端控件的构建块。模板需要实现希望看到的控件的客户端UI结构。在本例中，提供了一个Bootstrap模态HTML模板。
包含了一个示例，其中列出了在GridView中显示的一组“人员”。在这个示例中，展示了如何将弹出窗口与GridView或列表结合使用。这允许在同一页面内快速编辑这些人的“详细信息”。
列出所有包含在提供的模型中的人员：
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Value.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Value.LastName)
</td>
<td>
@Html.DisplayFor(modelItem => item.Value.Address)
</td>
<td>
<a href="#" data-id="@item.Key" class="my-edit">Edit</a>
</td>
</tr>
}
现在，需要编辑这些人中的一个。当GridView中的“编辑”按钮被点击时，模态窗口控件将出现。需要“获取”试图“编辑”的特定人员的细节。在本例中，将通过Ajax调用调用"/People/GetPerson"控制器。在这里，可以选择是否调用Web API或控制器方法。
当点击“编辑”按钮时，执行以下操作：
$(".my-edit").click(function() {
// 显示'OK'按钮
$('.modal-footer').find('.btn-primary').first().show();
clearContent();
// 找到这个特定项目的独一无二的键
var idx = $(this).attr("data-id");
// 存储这个独一无二的'键' - 因为稍后会需要它
$("#currentID").val(idx);
// 让去获取这个'人'
$.ajax({
url: "/People/GetPerson?idx=" + idx,
datatype: "application/json",
type: "GET",
cache: false,
success: function(data) {
// 这个调用为创建了一个部分视图，并返回了HTML
// 所需要做的就是将其放置在模态的内部内容区域
var dialog = $("#modalPopup")
.modalpopup("populateContent", data)
.modalpopup("show");
},
error: function(e) {
var test = e;
}
});
});
模态窗口内部的内容被包裹在一个DIV中 - 模态的内容根据返回的Ajax调用进行填充，即内容的"HTML"是从服务器检索的。在本例中，检索了一个"Person"的内容，即将"Person"模型绑定到部分视图："_Person.cshtml"。
这里是控制器方法被调用的地方。可以决定如何处理传入的参数：
public ActionResult GetPerson(string idx)
{
Person person;
if (p.GetPeopleDictionary().TryGetValue(int.Parse(idx), out person))
{
// 让返回一个部分视图 - 传递"Person"模型
return PartialView("~/Views/Home/_Person.cshtml", person);
// 也可以传递Person模型的JSON对象 - 如果愿意
// 必须"AllowGet"以通过安全限制
// return Json(person, JsonRequestBehavior.AllowGet);
}
else
return null;
}
为了更新选定的Person的详细信息，必须跟踪想要显示以更新目的的记录（或"键"）。可以通过确保在"编辑"链接中添加一个键值作为"属性"来做到这一点。
<a href="#" <b>data-id="@item.Key"</b> class="my-edit">Edit</a>
[HttpPost]
public ActionResult Edit(int id, Person person)
{
Person found;
int key = int.Parse(id.ToString());
if (p.GetPeopleDictionary().TryGetValue(key, out found))
{
found.Name = person.Name;
found.Address = person.Address;
found.LastName = person.LastName;
return Content("Well done. " + found.Name + " - has now been updated!");
}
else
{
return Content("Nope! Something went wrong.");
}
}