使用目标 AJAX 和 ASP 将复杂模型传递给控制器

Question

我正在尝试将模型传递给 ASP.NET 中的控制器。有两种方法可以做到这一点：使用 Ajax.BeginForm 和使用 JQuery。我已经尝试了这两种技术。我更愿意让 Ajax.BeginForm 工作，但我更幸运 JQuery.

我的页面提供了存储在 KnowledgeTransfer 模型中的职责列表，这些职责将由 KnowledgeTransfer 控制器编辑和保存。用户编辑并单击 "AddKnowledgeTransfer" 按钮将模型发送到控制器（未显示），其中 returns 部分视图。局部视图是要完成并提交的较大调查表中的一个问题。

一些要求：我的表单是一个更大的嵌套表单中的局部视图，因此我必须针对正确的 Ajax 和控制器方法，而不是提交整个页面。（我读到这可能是不可能的？我已经能够接近jQuery。如果不可能，我可以只提交一个层次结构的表单吗？）我还有一个要求是我必须自动拉取整个KnowledgeTransfer模型。模型中实际上有数百个属性，所以我需要将它们全部提取出来，而不是像某些示例所示那样列出它们。

这是Ajax.BeginForm技巧：

    @model KnowledgeTransfer

    <partial name="_MainResponsibilities" />


    @using (Ajax.BeginForm("UpdateMainResponsibilities2",
            "KnowledgeTransfer",
            null,
        new AjaxOptions()
        {
            HttpMethod = "POST",
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "mainResponsibilitiesList"
        },
        new { id = "MainResponsibilitiesForm" }))
        {

    <div class="form-group" id="mainResponsibilitiesList">
        <table id="ResponsibilitiesTable">
            <thead>
                <tr>
                    <th class="col-sm-5">
                        @Html.LabelFor(m => m.MainResponsibilities[0].Responsibility)
                    </th>
               </tr>
            </thead>
            <tbody>
                @for (int i = 0; i < Model.MainResponsibilities.Count; i++)
                {
                    <tr style="border-bottom:thin">
                        <td>
                            @Html.TextAreaFor(m => m.MainResponsibilities[i].Responsibility, new { id="responsibility_" + i, @style = "width:90%; margin:auto; border-style:none;" })
                        </td>      
                    </tr>
                }
            </tbody>
        </table>
    </div>

    <button class="btn col-sm-2" value="Create" type="button" name="MainReponsibilities" onclick="document.getElementById('MainResponsibilitiesForm').submit();" id="AddResponsibility" title="Add Responsibility"><i class="fa fa-plus"></i>Add Responsibility</button>

    }

此代码的问题是按钮无法找到 MainResponsibilitiesForm ID，因此无法提交。

现在开始第二个jQuery技巧：

@model KnowledgeTransfer

<partial name="_MainResponsibilities" />

<div class="form-group" id="mainResponsibilitiesList">
    <table id="ResponsibilitiesTable">
        <thead>
            <tr>
                <th class="col-sm-5">
                    @Html.LabelFor(m => m.MainResponsibilities[0].Responsibility)
                </th>
        </thead>
        <tbody>
            @for (int i = 0; i < Model.MainResponsibilities.Count; i++)
            {
                <tr >
                    <td>
                        @Html.TextAreaFor(m => m.MainResponsibilities[i].Responsibility)
                    </td>                    
                </tr>
            }
        </tbody>
    </table>
</div>

<button class="btn col-sm-2" value="Create" type="button" id="AddResponsibility2" title="Add Responsibility">Add Responsibility</button>

<script>
    $("#AddResponsibility2").click(function () {
            var model = @Html.Raw(Json.Encode(Model));
            var url = "@Url.Action("UpdateMainResponsibilities2", "KnowledgeTransfer")";

            $.ajax({
                type: "POST",
                url: url,
                data: JSON.stringify(model),
                contentType: "application/json",
                success: function () {
                    location.reload();
                }
            });
        })
</script>

使用 JQuery 我可以使用 var model = @Html.Raw(Json.Encode(Model)); 提取模型，但这会调用服务器并从数据库更新模型，而不是从客户端更改的模型。所以也许我可以使用 Json.Encode() 来拉模型，然后编辑 JSON 对象来更新值？这似乎 unnecessary.Working 和 JSON 也可能很困难，因为我必须遍历结构以识别每个元素。我可能还需要将 HTML 中的元素动态标记为 select。

我应该用Angular，哈哈。但是这个应用程序不会在其他任何地方使用它，所以我来了。

如果您对我如何改进这个 post 有任何建议，请告诉我。感谢您的帮助。

Answer 1

将模型传递给控制器的方式使用了ID参数。

<tbody>
            @for (int i = 0; i < Model.MainResponsibilities.Count; i++)
            {
                <tr >
                    <td>
                        @Html.TextAreaFor(m => m.MainResponsibilities[i].Responsibility, new{id="responsibility-" + 1})
                    </td>                    
                </tr>
            }
        </tbody>

我从数据库中提取模型，在客户端重新写入模型值...

<script>
var model = @Html.Raw(Json.Encode(Model));

function MainResponsibilitiesLoop(callback) {
    for (i = 0; i < model.MainResponsibilities.length; i++) {
        var thisResponsibility = document.getElementById("responsibility_" + i);
        thisResponsibility = thisResponsibility.value;


model.MainResponsibilities[i].Responsibility = thisResponsibility;
</script>

然后我通过 AJAX 调用将更新后的模型保存到服务器。

<script>
function SaveOverview(callback) {
    var url = "@Url.Action("UpdateMainResponsibilities", "ResponsibilitiesController")";
    $.ajax({
        type: "POST",
        url: url,
        data: JSON.stringify(model),
        contentType: "application/json",
        success: function () {
            callback();
            }
        }
    )
}
</script>

使用目标 AJAX 和 ASP 将复杂模型传递给控制器

Passing complex model to controller using targeted AJAX and ASP

asp.net

ajax

jquery

asp.net-mvc-4