更新视图的模型或数据表以进行客户端更新？

Question

在网页中，当用户从数据表中删除行时，我应该使用视图模型还是数据表来进行数据操作？ （我正在学习MVC 4，我不确定访问模型是否会导致服务器命中。）

以下是我正在尝试做的一个简单示例。在我的控制器中，我正在返回一些Person对象：

public ActionResult Index()
{
    List<Person> people = new List<Person>();
    people.Add(new Person() { Id = 1, FirstName = "Geddy", LastName = "Lee" });
    people.Add(new Person() { Id = 2, FirstName = "Alex", LastName = "Lifeson" });
    // more people here...

    return View(people);
}

这是我的观点引用人物的方式（视野中的第一行）：

@model List<MiscCommon.Entities.Person>

在我看来，我正在使用数据表来显示。那部分工作正常。

在我的javascript函数中，当用户点击表中某行的删除（x）时，我能够成功传递ID。但是，我不确定是否应该直接操作数据表（如下所示），或者我是否应该修改@model 然后刷新数据表。哪种方式被认为是正确的？或者是否还有其他我不知道的方法？

function RemovePerson(personIdToDelete) {
    var oTable = $('#tablePeople').dataTable();
    var rows = oTable.fnGetNodes();
    var rowToDelete;

    for (var i = 0; i < rows.length; i++) {
        var idFromCurrentRow = oTable.fnGetData(i, 1);  // ID column
        if (idFromCurrentRow == personIdToDelete) {
            rowToDelete = i;
        }                
    }

    oTable.fnDeleteRow(rowToDelete);
}

注意：我正在使用该模型首先填充表格：

@foreach (var person in Model) {
                @:$('#tablePeople').dataTable().fnAddData([@MvcHtmlString.Create(string.Format("'<a href=\"\", onclick=\"RemovePerson({0}); return false;\">x</a>'", @person.Id)), '@person.FirstName', '@person.LastName']);
            }

Answer 1

最好的方法是使用ViewModel，它将传递给您的视图。所以它变成了：

Database -> Model -> Controller -> ViewModel -> View

然后当用户更新或删除记录时：

View -> ViewModel -> Controller -> Model -> Database

换句话说，您将创建一个PeopleModel类，该类仅包含视图所需的属性。

Answer 2

您的@model仅存在服务器端。一旦呈现DOM并将其发送到客户端，就会处理@model。您需要再次联系服务器以让数据库知道应删除该记录。您有两种选择：

选项一

通过AJAX在Javascript中的RemovePerson功能期间联系服务器。

选项二

将整个页面发回服务器并解析结果。这将要求您的表包含在form中，并且每行都包含一个输入。

我更喜欢使用选项1并使用找到here的jQuery.ajax()方法。