ASP.NET MVC - 通过修改视图模型从AJAX查看 [英] ASP.NET MVC - passing modified viewmodel from AJAX to view

问题描述

我创建一个ASP.NET MVC 5 SQL服务器（实体框架，数据库一）应用程序，其中有一个订单记录和一组连接到它的订单项记录。用户应该能够通过一个添加按钮，新的行项目记录添加到视图模型，但直到用户点击保存按钮，该行的项目不应该被提交到数据库。点击添加按钮，不应该刷新页面 - 网页应该保持它的确切位置，只是额外添加的行

I'm creating a ASP.NET MVC 5 SQL Server (Entity Framework, database-first) application where there is an order record and a set of line item records attached to it. The user should be able to add new line item records to the viewmodel through an "Add" button, but the line items should not be committed to the database until the user clicks the "Save" button. Clicking the "Add" button should not refresh the page -- the page should stay exactly where it is, just with the extra rows added.

现在，我已经被以这种方式添加新行：

Right now, I have new rows being added in this way:

查看：

@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函数序列化当前视图模型，并将其发送给控制器。该控制器使得新行与一些默认选项，它增加了对正在传递的视图模型行集，然后返回重新presents新行（以及新行的数据发送到局部视图的局部视图，所以我们知道如何来填充它）。

When the user clicks on the "Add" button, a jQuery function serializes the current viewmodel and sends it back to the controller. The controller makes a new row with some default options, adds it to the viewmodel rowset that's passed in, then returns a partial view that represents the new row (and sends the data for the new row into the partial view so we know how to populate it).

这是从这个失踪的事情是...我怎么修改视图模型送回到原来的看法？基本上，我有什么样的应的是AddNewLineItem（当前视图模型），但我不知道在哪里，它需要被发送。

The thing that's missing from this is...how do I send back the modified viewmodel to the original view? Basically, I've got what should be the current viewmodel in AddNewLineItem() but I have no idea where it needs to be sent.

我是相当新的ASP.NET MVC，所以我道歉，如果我想的东西很明显这里。

I'm fairly new to ASP.NET MVC, so my apologies if I'm missing something obvious here.

推荐答案

您就需要创建一个能够把你的 OrderViewModel 新的局部视图和生成所有的排在表格中。移动Ajax调用这个新的局部视图。 AddNewLineItem 将返回新的局部视图和重绘整个表，而不是只有一行。这将允许视图模型：@ Html.Raw（Json.En code（型号））来始终是当前的，因为它是在新的部分观点每次添加一行时被再生

You'd need to create a new partial view that would take your OrderViewModel and generate all of the rows in your table. Move the ajax call to this new partial view. AddNewLineItem would return the new partial view and redraw the entire table and not just one row. This would allow 'viewModel': @Html.Raw(Json.Encode(Model)), to always be current, since it's in the new partial view that gets regenerated each time a row is added

这篇关于ASP.NET MVC - 通过修改视图模型从AJAX查看的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！