Question

我正在创建一个ASP.NET MVC 5 SQL Server（实体框架，数据库优先）应用程序，其中有一个订单记录和一组附加到它的行项目记录。用户应该能够通过“添加”按钮将新的行项目记录添加到视图模型，但是在用户单击“保存”按钮之前，不应将行项目提交到数据库。单击“添加”按钮不应刷新页面 - 页面应该保持原样，只需添加额外的行。

现在，我以这种方式添加了新行：

查看：

@model Models.OrderViewModel
<table style="width: 90%; margin: auto" id="divPartial">
    <tr>
    <th style="width: 25px">
        Header 1
    </th>
    <th style="width: 25px">
        Header 2
    </th>
    <th style="width: 25px">
        Header 3
    </th>
    </tr>


    @if (Model.LineItemRows.Count > 0)
    {
    for (int i = 0; i < Model.LineItemRows.Count; i++)
    {
        @Html.Partial("ViewRow", Model.LineItemRows[i])
    }
    }
</table>

<input type="button" id="mybutton" value="Add New Line Item" class="btn btn-default" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
    $("#mybutton").click(function () {
        $.ajax({
            url: "../AddNewLineItem/",
            cache: false,
            type: "POST",
            data: {
            'viewModel': @Html.Raw(Json.Encode(Model)),
            },
            success: function (data) {
            $('#divPartial').append(data);
            },
            error: function (reponse) {
            alert("Error: " + reponse);
            }
        });
        });
    });
</script>

控制器：

[HttpPost]
public ActionResult AddNewLineItem(OrderViewModel viewModel)
{
    OrderLineItemRowViewModel lineItemRow = new OrderLineItemRowViewModel();
    // Set some defaults
    lineItemRow.active = true;
    lineItemRow.location = "I"; 

    if (viewModel.LineItemRows != null) // This shouldn't ever be null
    {
    viewModel.LineItemRows.Add(lineItemRow);
    }

    return PartialView("ViewRow", lineItemRow);
}

当用户点击“添加”按钮时，jQuery函数序列化当前视图模型并将其发送回控制器。控制器使用一些默认选项创建一个新行，将其添加到传入的viewmodel行集中，然后返回表示新行的部分视图（并将新行的数据发送到局部视图中，以便我们知道如何填充它）。

这件事中缺少的是......如何将修改后的视图模型发送回原始视图？基本上，我已经将应该作为AddNewLineItem（）中的当前视图模型，但我不知道它需要在哪里发送。

我是ASP.NET MVC的新手，所以如果我在这里遗漏了一些明显的东西，我很抱歉。

Answer 1

您需要创建一个新的部分视图，该视图会占用您的OrderViewModel并生成表格中的所有行。将ajax调用移动到此新的部分视图。 AddNewLineItem将返回新的局部视图并重绘整个表而不只是一行。这将允许'viewModel': @Html.Raw(Json.Encode(Model)),始终是最新的，因为它在每次添加行时重新生成的新局部视图中

Answer 2

您所做的就是为您的AJAX方法发回JSON吗？这是我在发回数据时所做的事情。

如果您要将整个表单序列化到控制器，那么这应该可行。让您的新控制器获取所有序列化数据并将模型修改为您想要的 - 然后将结果作为JSON返回。

//Controller Code
var model // <-- this is your modified viewModel with the new row in it
var jsonModel = Json(new
            {
                data = model
            }, JsonRequestBehavior.AllowGet);
return jsonModel;

然后，只需要让你的JavaScript / JQuery函数使用返回的json。

ASP.NET MVC - 将修改后的viewmodel从AJAX传递到

2 个答案: