MVC.NET 模式小部件 helper

分享于 

6分钟阅读

Web开发

  繁體 雙語

介绍

我想概述一个小部件工厂 Pattern 来创建可重用的MVC控件。 在本例中,我决定创建一个可以重用的"mvc"模式。 利用 MVC HtmlHelper - 我可以轻松地从 Razor"html"类创建扩展,以实现自己的自定义pop控件。

背景

你需要对 jQuery。MVC和 C# 代码有很好的理解。

使用代码

将控件添加到视图中确实很容易:

  • 确保将小部件控件添加到页面上。
  • 指定所有必需的属性。 定义这些属性将帮助你管理模式弹出式弹出式的行为。
 @(Html.HollowPoint().Window()
.Name("modalPopup")
.TemplateViewPath("~/Views/Shared/BootstrapModal.cshtml")
.Title("Hellow newworld..!")
.Resizable(false)
.Draggable()
.IconUrl("~/Images/User_Male_Check.png"))

了解你的模式弹出属性的特性:

Needtodefinethetitle`.Title("Hellow newworld..!")Provideatemplateyouwouldliketore-use. Thetemplateislikethebuildingblocksofyourclientsidecontrol.ThetemplateneedstoimplementtheclientsideUIstructureofthecontrolyouwishtosee.InthisexampleIprovidea"Bootstrap" modalHTMLtemplate.
.TemplateViewPath("~/Views/Shared/BootstrapModal.cshtml")

操作中的控件

包括了一个示例,其中 List 显示了 gridview 中显示的一系列" People"。 在这个例子中,我展示了弹出的方式如何与项目的Grid 或者 List 一起使用。 这允许我在同一个页面中快速编辑这些"人员详情"。

你可以看到,我已经在 foreach 循环下添加了模式弹出控件。

 List all the people included within the provided Model
@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><ahref="#"data-id="@item.Key"class="my-edit">Edit</a></td></tr> }

现在我们需要编辑其中一个人。 当单击网格中的"编辑"按钮时,模式弹出控件将出现。 我们现在需要"获取"的特定细节,我们尝试的"编辑"。 示例中:" /People/GetPerson"控制器将通过Ajax调用调用。 这里可以决定是要调用 Web API 还是要调用控制器方法。

 $(".my-edit").click(function () {
 //show the 'OK' button again $('.modal-footer').find('.btn-primary').first().show();
 clearContent();
 //the unique key found on this particular itemvar idx = $(this).attr("data-id");
 //store this unique 'key' away - as we will be needing it later $("#currentID").val(idx);
 //lets go and fetch this 'person' $.ajax({
 url: "/People/GetPerson?idx=" + idx,
 datatype: "application/json",
 type: "GET",
 cache: false,
 success: function (data) {
 //this call created a partial view for us = and returned the HTML//all we need to do is place it within the modal's internal content area var dialog = $("#modalPopup")
. modalpopup("populateContent", data)
. modalpopup("show"); 
 },
 error: function (e) {
 var test = e;
 }
 });
 });
}

模式 Windows 内部 CONTENT 封装为- 根据返回的Ajax调用填充模式的内容,换句话说,是从服务器检索内容"html"。 在我的示例中,我检索" Person",换句话说,的内容,将" Person"模型绑定到patial视图: _Person.cshtml"。

// Here the controller method is called. You can decide what to do with the incoming parameters.public ActionResult GetPerson(string idx)
{
 Person person;
 if (p.GetPeopleDictionary().TryGetValue(int.Parse(idx), out person))
 {
 //let us return a partial view - passing through the"Person" modelreturn PartialView("~/Views/Home/_Person.cshtml", person);
 //you could also pass a JSON object of the Person Model - if you so wished//you have to"AllowGet" to pass the security restriction//return Json(person, JsonRequestBehavior.AllowGet); }
 elsereturnnull;
}

编辑详细信息

为了更新选定的Person 详细信息,必须跟踪哪个记录( 或者或或者" key") 可以显示更新目的。 通过确保 key-value 在" edit"链接中被添加为" attribute",这样做。

<ahref="#"<b>data-id="@item.Key"</b> class="my-edit">Edit</a>

现在我们有能力更新这个特定 Person的任何属性。

[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.");
 }
 }

就是这样我们已经成功更新了集合中的项目。


wid  Helper  Widget  modal  
相关文章