在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.

我想要做的是在行中显示所有数据元素，而不是让用户必须在每一行上单击 EDIT，所有行的数据点都已经在用户可以直接更新的文本框中.页面上只有一个 SAVE 可以一次性保存所有更新/编辑.

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.下面的示例显示了正常的表单发布示例.如果需要，您可以使用 serialize 方法并发送表单值来对其进行 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.

假设您需要编辑课程的学生姓名列表.所以让我们为此创建一些视图模型

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 操作方法中，您创建我们视图模型的对象，初始化 Students 集合并将其发送到我们的强类型视图.

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

现在在 Views/YourControllerName 下创建一个名为 EditorTemplates 的文件夹.然后在名为 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) 中，使用 EditorTemplate HTML 辅助方法来引入此视图.

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 模型绑定将在我们的视图模型的 Students 属性中具有所有文本框值.

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 这个，你可以监听提交按钮的点击，获取表单并序列化它并发送到相同的 post action 方法.您可以返回一些表示操作状态的 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屋！