Question

我能找到的MVC4应用程序的每个示例都有一次编辑处理一行数据。它显示所有数据行，每行都有一个编辑，可以将您带到另一个页面并允许您编辑该行。

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

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

Answer 1

您可以使用 EditorTemplates 。以下示例显示了正常的表单发布示例。如果需要，您可以使用serialize方法并发送表单值来解析它。

假设您需要编辑课程的学生姓名列表。所以让我们为那个

创建一些视图模型

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集合并将其发送到我们的强类型视图。

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;
}
<tr> 
 <td>
  @Html.HiddenFor(x => x.ID)
  @Html.TextBoxFor(x => x.FirstName ) </td>
</tr>

现在在我们的主视图（StudentList.cshtml）中，使用EditorTemplate HTML帮助方法来显示此视图。

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

这会将带有每个学生姓名的所有用户界面放在表格行中包含的文本框中。现在，当发布表单时，MVC模型绑定将在我们的viewmodel的Students属性中包含所有文本框值。

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

Ajaxified解决方案

如果你想要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
    });
  });
});

Answer 2

您只需要指定正确的模型，示例列表，并发送带有每行（数组元素）信息的ajax，在服务器端读取它并相应地更新每个元素。为此目标，您使用Post请求。只需将元素列表作为参数传递给控制器，然后使用ajax传递它。

例如，您可以将控制器定义为：

public ActionResult Update(List<MyEntity> 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调用调用该功能。

为方便起见，您可以考虑使用KnockoutJS或其他MVVM框架将数据与客户端的DOM绑定。

在MVC4中，如何一次保存多行编辑？

2 个答案: