在同一模态对话框中验证表单帖子

时间:2012-09-24 00:56:08

标签: asp.net-mvc dialog validation

我已经在几天内尝试了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,但我无法将现在的部分视图返回到表单所在的模式对话框。部分视图正在返回,但仅仅是没有格式化的空白页面,而不是我希望它的模态对话框。似乎模态对话框消失了,所有的网站格式都用它。

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

谢谢,如果您需要任何其他信息,请与我们联系。

1 个答案:

答案 0 :(得分:0)

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

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

当您的表单在jQuery对话框中时,另一个问题是您必须在通过Ajax更新内容后重新启动验证。就像是     $ .validator.unobtrusive.parse( “形式”);