在同一模式对话框中验证表单帖子答案

【问题标题】：Validate form post in same modal dialog在同一模式对话框中验证表单帖子
【发布时间】：2012-09-15 11:24:09
【问题描述】：

我已经用 mvc 表单和 jquery 试验了几天，发现了一些有趣的结果。

我有一个在视图中上传文件的表单。提交表单后，我使用模型验证来确保文件不为空，它是允许的类型等。如果模型验证失败，我可以将模型返回到视图（同一视图），并显示错误在验证摘要中非常好。这是我的代码：

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

   @using (Html.BeginForm("TestView", "TestController", FormMethod.Post, new { enctype = "multipart/form-data",  @id = "ImportFile"}))
    {    @Html.ValidationSummary(false, "")

        <span id="instructions">Select a File to Import:</span><br />           
        @Html.TextBoxFor(model => Model.UploadedFile, new { style = "width:275px;", type = "file", @id = "UploadedFile", @name = "UploadedFile" })
                @Html.ValidationMessageFor(model => Model.UploadedFile)
        <span style="font-size: 8pt">@Html.CheckBoxFor(model => Model.HeadersIncluded)
            First Column Includes Headers?</span>
        <p style="margin-bottom: 7px;">
            <input type="submit" name="launchbutton" value="Continue" class="InnerButton"/></p>
    } 
<div id="UploadPartial"></div>

这里还有我的控制器方法：

    [AcceptVerbs("GET")]
    public ActionResult TestView()
    {
        TestViewModel testModel = new TestViewModel();
        testModel.HeadersIncluded = true;
        return View(testModel);
    }

    [AcceptVerbs("POST")]
    public ActionResult TestView(TestViewModel model)
    {
        if (!ModelState.IsValid)
        {
             return View(model);
       }
        else
        {
             return View(model);
        }
    }

这样，一切都很好，如果模型有效，或者原始表单不受干扰（验证错误除外），我已经能够使用 jquery 将部分视图加载到同一页面像这样发帖：

$(document).ready(function () {
    $('#UploadPartial').load('@Url.Content("~/TestController/TestView2")', function() {
    });

换句话说，如果模型有效，则加载另一个额外的局部视图。

然后我想知道，我可以在模态对话框中执行此操作吗？换句话说，我可以在模态对话框中打开表单，提交它，执行模型验证，然后将结果返回到模态对话框。 . .

发生的情况是，当模型被验证时，结果会被发送回一个空白页面。没有布局，没有脚本文件，只有一个包含表单的空白页面（如果存在验证错误）。我尝试返回 View、PartialView、修改视图布局、添加必要的脚本文件等。我使用相同的表单代码（但在对话框中），提交后，我可以看到模型验证确实发生了，如果模型验证成功与否，我只想将相同的 View 或 PartialView 返回到同一个对话框，其中包含验证错误或附加信息（在模型中），以便我可以继续下一步（其中将加载另一个视图）。这是我的控制器代码：

    [AcceptVerbs("GET")]
    public ActionResult TestView()
    {
        TestViewModel testModel = new TestViewModel();
        testModel.HeadersIncluded = true;
        return PartialView(testModel);
    }

    [AcceptVerbs("POST")]
    public ActionResult TestView(TestViewModel model)
    {
        if (!ModelState.IsValid)
        {
            return PartialView("TestView", model);

        }
        else
        {
             return PartialView(model);
        }
    }

我尝试返回 PartialView，View，将 ActionResult 更改为 PartialViewResult，但我无法将现在的 Partial View 返回到表单所在的模式对话框。正在返回 Partial View，但只是返回到一个没有格式的空白页，而不是我想要的模式对话框。似乎模式对话框消失了，所有的网站都用它格式化了。

所以我的问题是，这甚至可能吗？您是否可以在模式对话框中提交表单，并将该表单提交的结果返回到同一对话框（在执行模型验证之后），并且仍然具有站点的格式以及处理进一步 jquery 所需的必要脚本文件.

谢谢，如果您需要任何其他信息，请告诉我。

【问题讨论】：

我不知道答案，但想知道。有专家吗？
我面临同样的问题。你能解决这个问题吗？

标签： asp.net-mvc dialog validation

【解决方案1】：

我通常在我的对话框 div 中有一个内容 div，并让 jQuery 从局部视图中填充内容 div。

您还可以使用 Ajax.BeginForm 帮助器并将 UpdateTargetId 设置为内容 div。

当您的表单位于 jQuery 对话框中时，另一个问题是您必须在通过 Ajax 更新内容后重新触发验证。就像是 $.validator.unobtrusive.parse("form");

【讨论】：