在MVC4，如何同时保存多个行编辑？ [英] In MVC4, how to save multiple row edits at once?

问题描述

这是我能找到一个MVC4应用程序的每个实例有编辑在时间中的一行数据的工作。它显示有一个编辑带您到另一个页面，并允许你编辑一行，每行数据的所有行。

Every example that I can find of an MVC4 app has the edit working on one row of data at a time. It displays all the rows of data with each row having an edit which takes you to another page and allows you to edit that one row.

我想这样做是显示所有行中的数据元素，而不是让用户必须点击每行编辑，并且所有行数据点就已经在文本框中，用户可以直接更新。而只有一个保存只想保存所有的更新页面上/编辑一次。

What I would like to do is display all the data elements in rows and instead of having the user have to click EDIT on each row, all the rows' data points would already be in text boxes which the user can directly update. And there is just one SAVE on the page that would just save all the updates/edits at once.

如何设置我的MVC应用程序来支持？

How can I setup my MVC app to support that?

推荐答案

您可以使用 EditorTemplates 这一点。下面的例子显示了正常的表单提交的例子。如果您需要使用您可以ajaxify它连载方法和发送表单值。

You can use an EditorTemplates for this. The below example shows the normal form posting example. You can ajaxify it if you need by using the serialize method and sending form values.

假设你需要编辑学生姓名的名单为一疗程。因此，让我们创造一些的ViewModels

Assuming You need to Edit the List of Student Names for a course. So Let's create some viewmodels for that

public class Course
{
  public int ID { set;get;}
  public string CourseName { set;get;}
  public List<Student> Students { set;get;}

  public Course()
  {
    Students=new List<Student>();
  }
}
public class Student
{
  public int ID { set;get;}
  public string FirstName { set;get;}
}

现在在你的 GET 的操作方法，创建我们的视图模型的对象，初始化学生收集和它发送到我们​​的强类型视图。

Now in your GET action method, you create an object of our view model, initialize the Students collection and send it to our strongly typed view.

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);
}

现在创建一个文件夹，名为 EditorTemplates 在查看/的 YourControllerName 的。然后在调用创建一个新视图 Student.cshtml 下面的内容。

Now Create a folder called EditorTemplates under Views/YourControllerName. Then create a new view under that called Student.cshtml with below content

@model Student
@{
    Layout = null;
}
<tr> 
 <td>
  @Html.HiddenFor(x => x.ID)
  @Html.TextBoxFor(x => x.FirstName ) </td>
</tr>

现在我们主视图（StudentList.cshtml），使用HTML EditorTemplate辅助方法，把这个观点。

Now in our main view (StudentList.cshtml), Use EditorTemplate HTML helper method to bring this view.

@model Course
<h2>@Model.CourseName</h2>
@using(Html.BeginForm())
{
  <table>
     @Html.EditorFor(x=>x.Students)
  </table>
  <input type="submit" id="btnSave" />
}

这将使所有与每个学生的名字的UI中所含的表行的文本框。现在，当形式发布，MVC模式的结合将在学生的所有文本框的值我们的视图模型的属性。

This will bring all the UI with each of your student name in a text box contained in a table row. Now when the form is posted, MVC model binding will have all text box value in the Students property of our viewmodel.

[HttpPost]
public ActionResult StudentList(Course model)
{
   //check for model.Students collection for each student name.
   //Save and redirect. (PRG pattern)
}

Ajax化的解决方案

如果你想Ajaxify这一点，你可以听的提交按钮点击，获取的形式和序列化，发送给同一个岗位操作方法。相反，储蓄重定向后，你可以返回一些JSON它指示操作的状态。

If you want to Ajaxify this, you can listen for the submit button click, get the form and serialize it and send to the same post action method. Instead of redirecting after saving, you can return some JSON which indicates the status of the operation.

$(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
    });
  });
});

这篇关于在MVC4，如何同时保存多个行编辑？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！