Question

我试图将模型传递给ASP.NET中的控制器。有两种方法可以执行此操作：使用Ajax.BeginForm和JQuery。我已经尝试了这两种技术。我希望使Ajax.BeginForm能够正常工作，但我对JQuery感到更幸运。

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

一些要求：我的表单是嵌套的较大表单中的局部视图，因此我必须以正确的Ajax和controller方法为目标，而不是提交整个页面。（我读到这可能是不可能的？我已经可以使用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，哈哈。但是这个应用程序没有在其他任何地方使用，所以我在这里。

如果您对我如何改善此信息有任何建议，请告诉我。谢谢您的帮助。

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

0 个答案: