asp.net-mvc – Bootstrap模式表单在提交后不会关闭

我不得不使用更多的jquery,但这是一个干净的答案(我认为).

在我的模型中使用数据注释：

[Required]
public string Name { get; set; }

[Required]
public string Phone { get; set; }

然后我在包含我的模态表单的共享文件夹中创建了一个部分,因此我可以将其设置为全局.

@model Controli.Models.Provider

<!-- Modal -->
<div class="modal fade" id="mdlnewprovider" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        @using (Html.BeginForm("Add","Providers",FormMethod.Post,new { id = "frmnewprovider" }))
        {
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Nuevo Proveedor</h4>
        </div>
        <div class="modal-body">
            <div class="form-group">
                @Html.TextBoxFor(u => u.Name,new { @class = "form-control",@placeholder = HttpUtility.HtmlDecode(@Html.DisplayNameFor(u => u.Name).ToHtmlString()) })
                @Html.ValidationMessageFor(u => u.Name)
            </div>
            <!--More Textboxes and Validaton Messages-->
        </div>
        <div class="modal-footer">
            <input type="submit" value="Agregar" class="btn btn-primary" />
        </div>
        }
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

和剧本：

var frmnewprovider = $("#forms-providers-new");
$(document).ready(function () {
frmnewprovider.submit(function (e) {
    e.preventDefault();
    frmnewprovider.validate();
    if (frmnewprovider.valid()) {
        $.ajax({
            url: "/Providers/Add",type: "POST",contentType: "application/json; charset=utf-8",data: JSON.stringify({
                Name: frmnewprovider.find('#Name').val(),Phone: frmnewprovider.find('#Phone').val(),Email: frmnewprovider.find('#Email').val(),Country: frmnewprovider.find('#Country').val(),State: frmnewprovider.find('#State').val(),Address: frmnewprovider.find('#Address').val()
            }),success: function (result) {
                //if record was added to db,then...
                window.location.replace('/Providers/Index'); //we can redirect
                //or simply close our modal.
                //$('#mdlnewprovider').modal('hide');
            },error: function(result) {
                alert('error');
            }
        });
    }
});
});

现在我需要做的就是在我需要的地方渲染我的表单是添加这些行：

<button class="btn btn-primary" data-toggle="modal" data-target="#mdlnewprovider">
    Nuevo
</button>

@Html.Partial("Modals/Providers/FrmNew",new Provider())

@section scripts
{
<script src="~/Scripts/Modals/Providers/NewProvider.js"></script>
<!--Where this script is the one above-->
}

最后因为我的模型是客户端验证的我只是将我的模型添加到我的数据库,并重定向到索引视图,而ajax调用隐藏活动模式更新：我建议在ajax调用时决定是重定向还是隐藏模态.喜欢评论.

public ActionResult Add(Provider provider)
    {
        if (ModelState.IsValid) //Validate in server side too!
        {
            db.Providers.Add(provider);
            db.SaveChanges();
            return Json(new{ success = true}); //return a dummy json,you can pass what
                                               //ever parameter you need. if code reach
                                               //this point. it will always hit success 
                                               //in our ajax call
        }
    }

确保您的web.config包含：

<appSettings>
  <add key="ClientValidationEnabled" value="true" />
  <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

我也使用这些脚本：

<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

如果事情可能会更好,请告诉我.