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

Question

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

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

一些要求：我的表单是较大表单中的部分视图，嵌套，所以我必须针对正确的 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 对象来更新值？这似乎没有必要。使用 JSON 也可能很困难，因为我必须遍历结构以识别每个元素。我可能还需要动态标记 HTML 中的元素以选择它们。

我应该使用 Angular，哈哈。但是这个应用程序在其他任何地方都没有使用它，所以我在这里。

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

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>