9

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

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

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

4

2 回答 2

12

您可以为此使用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)
}

解决方案

如果您想对此进行 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
    });
  });
});
于 2012-11-20T23:28:57.887 回答
1

您只需要指定正确的模型、示例列表，并发送带有每行（数组元素）信息的 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 绑定。

于 2012-11-20T23:19:51.520 回答