ASP.NET MVC - 将修改后的视图模型从 AJAX 传递到视图答案

【问题标题】：ASP.NET MVC - passing modified viewmodel from AJAX to viewASP.NET MVC - 将修改后的视图模型从 AJAX 传递到视图
【发布时间】：2015-07-30 14:24:14
【问题描述】：

我正在创建一个 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 还很陌生，所以如果我在这里遗漏了一些明显的东西，我深表歉意。

【问题讨论】：

标签： asp.net-mvc

【解决方案1】：

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

【讨论】：

谢谢——这让我找到了答案。基本上，我必须将“添加”按钮放在 div 中，并返回不同类型的视图（不是“ViewRow”，而是“ViewRows”——即“ViewRow”之上的级别）。
awesome.. 我只使用允许添加和删除的 javascript 编写了类似的东西，但是将所有字段名称按 [0]、[1] 等顺序保持是很痛苦的。那也是在我知道@Html.Raw(Json.Encode(Model))之前

【解决方案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。

【讨论】：