在MVC4中,如何一次保存多行编辑?
我可以找到MVC4应用程序的每个示例都有一次编辑处理一行数据。 它显示所有数据行,每行都有一个编辑,可以将您带到另一个页面,并允许您编辑该行。
我想要做的是显示行中的所有数据元素,而不是让用户必须在每一行上单击EDIT,所有行的数据点都已经在用户可以直接更新的文本框中。 并且页面上只有一个SAVE可以立即保存所有更新/编辑。
如何设置我的MVC应用程序来支持它?
您可以使用EditorTemplates进行此操作。 以下示例显示了正常的表单发布示例。 如果需要,可以使用serialize
方法并发送表单值来对其进行ajaxify。
假设您需要编辑课程的学生姓名列表。 所以让我们为此创建一些视图模型
public class Course { public int ID { set;get;} public string CourseName { set;get;} public List Students { set;get;} public Course() { Students=new List (); } } public class Student { public int ID { set;get;} public string FirstName { set;get;} }
现在,在您的GET
操作方法中,您可以创建视图模型的对象,初始化Students
集合并将其发送到我们的强类型视图。
public ActionResult StudentList() { Course courseVM=new Course(); courseVM.CourseName="Some course from your DB here"; //Hard coded for demo. You may replace this with DB data. courseVM.Students.Add(new Student { ID=1, FirstName="Jon" }); courseVM.Students.Add(new Student { ID=2, FirstName="Scott" }); return View(courseVM); }
现在在Views / YourControllerName下创建一个名为EditorTemplates的文件夹。 然后在名为Student.cshtml
的下面的内容下创建一个新视图
@model Student @{ Layout = null; } @Html.HiddenFor(x => x.ID) @Html.TextBoxFor(x => x.FirstName )
现在在我们的主视图(StudentList.cshtml)中,使用EditorTemplate HTML帮助器方法来显示此视图。
@model Course @Model.CourseName
@using(Html.BeginForm()) { @Html.EditorFor(x=>x.Students)
}
这将使您的每个学生姓名的所有UI都包含在表格行中的文本框中。 现在,当发布表单时,MVC模型绑定将在我们的viewmodel的Students
属性中具有所有文本框值。
[HttpPost] public ActionResult StudentList(Course model) { //check for model.Students collection for each student name. //Save and redirect. (PRG pattern) }
Ajax化解决方案
如果你想要Ajaxify这个,你可以听取提交按钮点击,获取表格并序列化它并发送到相同的post action方法。 您可以返回一些指示操作状态的JSON,而不是在保存后重定向。
$(function(){ $("#btnSave").click(function(e){ e.preventDefault(); //prevent default form submit behaviour $.post("@Url.Action("StudentList",YourcontrollerName")", $(this).closest("form").serialize(),function(response){ //do something with the response from the action method }); }); });
您只需要指定正确的模型,示例列表,并发送带有每行(数组元素)信息的ajax,在服务器端读取它并相应地更新每个元素。 为此目标,您使用Post请求。 只需将元素列表作为参数传递给控制器,然后使用ajax传递它。
例如,您可以将控制器定义为:
public ActionResult Update(List list) { ... } public class MyEntity { public string Name {get; set;} public int Count {get; set;} }
和JavaScript可以是:
var myList = new Array(); // fill the list up or do something with it. $.ajax( { url: "/Update/", type: "POST", data: {list: myList} } );
当然,您的“保存”按钮具有单击事件处理程序,该处理程序将使用ajax调用调用该function。
为方便起见,您可以考虑使用KnockoutJS或其他MVVM框架将数据与客户端的DOM绑定。