MVC 中的表单和模型数据问题答案

【问题标题】：Issue with form and model data in MVCMVC 中的表单和模型数据问题
【发布时间】：2014-12-15 18:42:41
【问题描述】：

我目前在 MVC5 中遇到了一个表单问题：

提交表单后，我会向控制器发送一个 ajax 请求，控制器应该负责 CRUD 操作，然后返回一个视图。

如果 ModelState 有效，它应该返回一个空表单，否则，它应该返回带有验证错误消息的表单。

我的问题是，当我的视图被返回时，如果 ModelState 是有效的，尽管返回一个空模型，表单并没有被清空。

这是实际的ajax调用部分：

    $.ajax({
    url: urlAction,
    type: 'POST',
    data: formData,
    dataType: 'html',
    success: function(code_html) {
        $("#addUserForm").html(code_html);
    }
});

以及控制器代码：

        [HttpPost]
    public ActionResult CreateUserAndContinue(AjoutUtilisateurViewModel data)
    {
        if (ModelState.IsValid)
        {
            // INSERT In DB.
            return PartialView("AjoutUtilisateurPartial", new AjoutUtilisateurViewModel());
        }
        return PartialView("AjoutUtilisateurPartial", data);
    }

主视图代码相关：

<div id="addUserForm">
    @Html.Partial("AjoutUtilisateurPartial")
</div>

局部视图：

<div id="AddUserADForm">
    @using (Html.BeginForm("CreateUserAndContinue", "Habilitation", FormMethod.Post, new { @id = "addUserAD" }))
    {
        @Html.EditorForModel()
        <div class="interSmall">
            <div class="ligneOrangeHaut droite">
                <a id="btnSubmitAndContinue" class="button" href="#">Créer & Continuer</a>
                <a id="btnSubmitAndStop" class="button" href="#">Créer & Stop</a>
            </div>
        </div>
    }

</div>

这是表单代码：（由 EditorForModel() 调用）

@model AjoutUtilisateurViewModel

<div class="indentBig interSmall">

    <div class="col45 interSmall padding-left-5">
        @*@Html.ValidationMessage("error")*@
        @Html.ValidationMessageFor(model => model.Matricule)
    </div>

    <div class="clear-both"></div>

    <div class="col45 interSmall padding-left-5">
        @Html.LabelFor(x => x.Matricule, new { @class = "label110" })
        @Html.TextBoxFor(x => x.Matricule)
        <a id="TestMatricule" class="button" href="#">Test</a>
    </div>
    <div class="col45 interSmall padding-left-5">
        @Html.LabelFor(x => x.EtatCompte, new { @class = "label110" })
        @Html.DropDownListFor(model => model.EtatCompte, new[] { new SelectListItem { Text = "Actif", Value = "true" }, new SelectListItem { Text = "Inactif", Value = "false" } })
    </div>
</div>

<div class="clear-both"></div>

<div class="indentBig interSmall">

    <div class="col45 interSmall padding-left-5">
        @Html.LabelFor(x => x.Nom, new { @class = "label110" })
        @Html.TextBoxFor(x => x.Nom, new { disabled = "true" })
    </div>

    <div class="col45 interSmall padding-left-5">
        @Html.LabelFor(x => x.Prenom, new { @class = "label110" })
        @Html.TextBoxFor(x => x.Prenom, new { disabled = "true" })
    </div>

    <div class="clear-both"></div>

    <div class="col45 interSmall padding-left-5">
        @Html.LabelFor(x => x.Service, new { @class = "label110" })
        @Html.TextBoxFor(x => x.Service, new { disabled = "true" })
    </div>

    <div class="col45 interSmall padding-left-5">
        @Html.LabelFor(x => x.Bureau, new { @class = "label110" })
        @Html.TextBoxFor(x => x.Bureau, new { disabled = "true" })
    </div>

    <div class="clear-both"></div>

    <div class="col45 interSmall padding-left-5">
        @Html.LabelFor(x => x.Telephone, new { @class = "label110" })
        @Html.TextBoxFor(x => x.Telephone, new { disabled = "true" })
    </div>

    <div class="col45 interSmall padding-left-5">
        @Html.LabelFor(x => x.Courriel, new { @class = "label110" })
        @Html.TextBoxFor(x => x.Courriel, new { disabled = "true" })
    </div>

    <div class="clear-both"></div>

    <div class="col45 interSmall padding-left-5">
        @Html.LabelFor(x => x.Adresse, new { @class = "label110" })
        @Html.TextBoxFor(x => x.Adresse, new { disabled = "true" })
    </div>

    <div class="col45 interSmall padding-left-5">
        @Html.LabelFor(x => x.CodePostal, new { @class = "label110" })
        @Html.TextBoxFor(x => x.CodePostal, new { disabled = "true" })
    </div>

    <div class="clear-both"></div>

    <div class="col45 interSmall padding-left-5">
        @Html.LabelFor(x => x.Ville, new { @class = "label110" })
        @Html.TextBoxFor(x => x.Ville, new { disabled = "true" })
    </div>

    <div class="col45 interSmall padding-left-5">
        @Html.LabelFor(x => x.Departement, new { @class = "label110" })
        @Html.TextBoxFor(x => x.Departement, new { disabled = "true" })
    </div>

    <div class="clear-both"></div>

    <div class="col45 interSmall padding-left-5">
        @Html.LabelFor(x => x.OU, new { @class = "label110" })
        @Html.TextBoxFor(x => x.OU, new { disabled = "true" })
    </div>

    <div class="clear-both"></div>

    <div class="col45 interSmall padding-left-5">
        @Html.LabelFor(x => x.ZoneLibre1, new { @class = "label110" })
        @Html.TextBoxFor(x => x.ZoneLibre1)
    </div>

    <div class="col45 interSmall padding-left-5">
        @Html.LabelFor(x => x.ZoneLibre2, new { @class = "label110" })
        @Html.TextBoxFor(x => x.ZoneLibre2)
    </div>

    <div class="clear-both"></div>

</div>

这是一个编辑器模板。

这个问题让我很困惑，因为我有一个非常相似的函数，它填充表单并返回一个带有模型预设的 PartialView，效果很好。但是作为 MVC 的新手，我可能会错过一些重要的东西。

感谢任何帮助:)

【问题讨论】：

addUserForm 在你的 HTML 中定义在哪里？我没有看到它，所以不清楚 jQuery 是否正在取代它。还是您提供的 HTML 定义了 addUserForm（本质上是您的部分视图）？
我不再工作了，所以我试图从我记得的内容中回答：#addUserForm 是 PartialView
@Html.Partial 等的父级。
部分视图本身只包含表单+按钮。（几乎是一个包含@Html.BeginForm + @Html.EditorFor 的 div）如果它还不够，我只能明天更好地清除它 x：
那么，问题中的 HTML 只是部分视图？而这里的 HTML 位于父视图的 addUserForm div 中，离屏？
问题中的 HTML 取自 PartialView 中包含的 EditorTemplate。部分视图本身几乎是 @Html.EditorFor （显示粘贴在问题中的 HTML） [再一次我不准确，因为我面前没有代码了自动取款机，对此感到抱歉:/)
我编辑了，也意识到在无效的 ModelState 的情况下，程序实际上运行正常（显示错误消息），尽管返回了预期的空模型，但如果表单填写正确，则不会.

标签： .net ajax forms model-view-controller asp.net-mvc-partialview

【解决方案1】：

我认为您应该将所有输入 @using(Html.BeginForm()) { ... }

【讨论】：

嘿，他们确实是。正如我所说，表单取自为我的视图模型制作的 EditorTemplate。实际的局部视图有这样的东西：P（后跟@Html.EditorFor()）
我认为每个部分都应该有自己的表单标签。或者我不明白你想要达到什么目的
哼，你误会了。我只有一个表格。如果正确填写，控制器应该返回一个带有空表单的视图（为此我返回带有与此表单关联的空模型实例的 PartialView）。如果出现错误，它应该返回具有用于提交和显示错误的相同模型实例的局部视图，但这些行为实际上都没有发生。（尽管断点显示它根据 ModelState 转到“返回 PartialView（new Model()）”或“返回 PartialView（oldmodel）”。
您能发布主视图代码吗？因为我不确定是否有可能有部分内部形式。您应该为每个局部视图使用单独的表单，然后在失败后它将使用模型填充您的输入。如果可以在您尝试插入部分视图的位置提供视图代码，那么一种或另一种方式会更容易为您提供帮助
正如我所说，我下班了，所以直到明天我才能发布更多代码；但会的。表单在部分视图中，而不是 D:

【解决方案2】：

新的一天，新的想法，它最终几乎是这个线程的重复：

Reset the value of textarea after form submission

感谢解决问题的原始答案作者。 =p

几乎在返回 POST 请求时，视图从 ModelState 而不是模型本身返回读取数据，因此为什么返回一个空模型不会改变任何东西。

【讨论】：