我能找到的 MVC4 应用程序的每个示例都一次对一行数据进行编辑。它显示所有数据行，每行都有一个编辑，可将您带到另一页并允许您编辑该行。
我想做的是在行中显示所有数据元素，而不是让用户必须在每一行上单击编辑，所有行的数据点都已经在用户可以直接更新的文本框中。页面上只有一个 SAVE 可以一次保存所有更新/编辑。
如何设置我的 MVC 应用程序来支持它？
【问题讨论】：
标签： c# asp.net-mvc asp.net-mvc-4
您可以为此使用 EditorTemplates。下面的示例显示了普通表单发布示例。如果需要，您可以使用 serialize 方法并发送表单值来对其进行 ajaxify。
假设您需要编辑课程的学生姓名列表。所以让我们为此创建一些视图模型
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 helper 方法来带来这个视图。
@model Course
<h2>@Model.CourseName</h2>
@using(Html.BeginForm())
{
<table>
@Html.EditorFor(x=>x.Students)
</table>
<input type="submit" id="btnSave" />
}
这会将带有每个学生姓名的所有 UI 显示在包含在表格行中的文本框中。现在，当表单发布时，MVC 模型绑定将在我们的视图模型的Students 属性中包含所有文本框值。
[HttpPost]
public ActionResult StudentList(Course model)
{
//check for model.Students collection for each student name.
//Save and redirect. (PRG pattern)
}
Ajax化解决方案
如果您想对此进行 Ajaxify，您可以监听提交按钮的点击，获取表单并将其序列化并发送到相同的 post 操作方法。您可以返回一些指示操作状态的 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<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 绑定。
【讨论】：