一种可以复用的MVC.NET

分享于 

7分钟阅读

Web开发

  繁體

介绍

显示可以重用的jQuery模式弹出。 可以动态地将弹出部分的jQuery模式内容绑定到你所选择的任何数据模型。 因这里,模式允许开发人员通过许多有用的技术来使用"插入"内容。

背景

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

简单示例:使用代码

使用该控件确实很容易:

  • 确保将 helper 控件添加到页面上。
  • 确保分配所有必要的属性。
  • 添加你希望在modal内容content中显示的附加 HTML:
 @using (Html.BeginPopupModal(new PopupModel("messageDialog") {
 Title = "Hi there",
 TitleImageUrl = "~/Images/User_Male_Check.png",
 PopupButtonSet = PopupButtonSet.OkPostbackClose,
 ClientFunction = "SavePerson()" }))
{
 // all the Person Model data will be bound within into this Content section @Html.Partial("_Person");
}

设置你的模式弹出属性的属性:

// Set up what values you want in your pop-up modal control.Title = "Hi there",
TitleImageUrl = "~/Images/User_Male_Check.png",
PopupButtonSet = PopupButtonSet.OkPostbackClose,
ClientFunction = "SavePerson()"

在模式弹出控件中单击"行"按钮时,可以决定事件发生后要执行的操作。 在我的示例中:" SavePerson()"客户端的函数将被执行。 在这个函数中,可以决定是要调用 Web API 还是调用 Controller 方法。

模态 Windows 内容是隐藏 DIV的包装 inside - 你需要费用来放置任何内容( HTML ) 与你的模态弹出。 由开发人员决定"行"按钮被单击了模式的inside 后将发生什么。 因此,你可以决定更改模式弹出的消息,如我所做的。 或者,如果需要,可以重定向到另一个页面。

客户端函数调用

// Here is the client side function. In this example once the"ok" button is clicked// I take the values from the modal 'page' and do a GET to a// Controller Method named:"/Home/SavePerson"function SavePerson() {
 var name = $("#txtName").val();
 var address = $("txtAddress").val();
 var data = JSON.stringify({ Name: name, Address: address });
 //lets make a Ajax call to the Controller Method $.ajax({
 url: "/Home/SavePerson?JSONString=" + data,
 datatype: "application/json",
 type: "GET",
 success: function (data) {
 $('.messageDialog-content').html(data);
 },
 error: function (e) {
 $(".messageDialog-content").html("ERROR");
 }
 });}

服务器端控制器方法调用

// Here the controller method is called.// The developers can decide what to do with the incoming parameters.public ActionResult SavePerson(string JSONString)
{
 using (Stream jsonSource = Utilities.StringToStream(JSONString))
 {
 // serializer will read data streamvar s = new DataContractJsonSerializer(typeof(Person));
 var person = (Person)s.ReadObject(jsonSource);
 return Content("Well done" + person.Name + ". You clicked on the OK button");
 }
}

扩展示例

我还包含了一个更多的'complex'示例- 或者更真实的世界示例。 在这个例子中,我展示了弹出的方式如何与项目的Grid 或者 List 一起使用。 这里示例可以在以下位置找到: /People/Index"。

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

@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>
 }

为了更新必要的行,必须跟踪" key"要为更新显示哪个记录。 这样做是为了确保将 key-value 添加为" 数据 id " edit"超链接中的属性。

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

我们知道我们尝试编辑哪些行项目- 我们可以调用服务器将特定对象的细节。

注意 :只返回一个简单的JSON对象,我认为它很好地解决了实际视图(" _Person.cshtml"在这里实例中),它将转换为一个部分 HTML Fragment。 这样- 我们不需要担心在客户端填充任何字段/输入,因为这个模型一旦绑定到视图。

public ActionResult GetPerson(string idx)
{
 Person person;
 if (people.TryGetValue(int.Parse(idx), out person))
 {
 return 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 对象的任何属性。

再次:你会注意到我的一个参数属于" Person"类型,因此简化了实际更新过程的任务。

[HttpPost]public ActionResult Edit(int id, Person person)
{
 Person found;
 int key = int.Parse(id.ToString());
 if (people.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.");
 } 
}

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

请随意下载页面顶部的源代码。

enjoy!