发布模式表单并显示验证

时间:2015-09-24 03:16:45

标签: asp.net-mvc-5

我有一个简单的模态,其中包含我想要发布的表单,用于插入数据库。这是我的代码:

地址视图

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Address</h4>
        </div>
        <div class="modal-body">
            <!-- Modal content-->

            @{Html.RenderAction("_AddMemberAddress", "MemberData");}
            </div>
        </div>
     </div>
  </div>

模态部分视图:

    @using (Html.BeginForm("_AddMemberAddress", "MemberData", FormMethod.Post, new { @class = "form-horizontal"}))
    {           
        <div class="form-group">
            <label class="control-label col-sm-4" for="email">Line 1:</label>
            <div class="col-sm-8">
                @Html.TextBoxFor(x => x.Line1, new { @class = "form-control" , placeholder = "Line1"})
                @Html.ValidationMessageFor(x=> x.Line1)                  
            </div>
        </div>
        <div class="modal-footer">
           <button type="submit" class="btn btn-success">Save</button>
           <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
        </div>

    }

控制器是基本的:

  public PartialViewResult _AddMemberAddress(MemberAddressViewModel viewModel)
    {
        if (ModelState.IsValid)
        {
            //Save
        }
        viewModel.AddressTypes = _memberAddressService.GetAddressType();
        return PartialView(viewModel);
    }

现在这是一个相当简单和标准的,如果这是一个常规形式,但我希望它是模态只是fancy并尝试新事物。问题是当验证返回时,如果它当然无效,它会重定向到我的空局部视图。我想在模态中显示验证消息,我不知道如何做到这一点。任何帮助都会很棒。

1 个答案:

答案 0 :(得分:0)

这是一种常见的混淆。仅仅因为您的表单处于部分视图中并不意味着发布时服务器的响应将被放置在同一位置。将呈现的HTML文档传送到客户端后,就没有“部分视图”的概念。它只是一个HTML文档,发布表单将导致浏览器将整个页面替换为该请求的响应。

唯一的方法是使用AJAX发布表单,这不会更改浏览器中的页面。但是,然后,您可以处理来自服务器的响应并使用它执行某些操作。例如,您可以发布返回部分的操作,但是在您的AJAX成功块中,您必须手动将返回的HTML插入到现有页面中的所需位置。