在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绑定。