引导模式窗体不会关闭后提交 [英] Bootstrap modal form does not close after submit

查看：136
本文介绍了引导模式窗体不会关闭后提交的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要做的是显示一个弹出一个新的记录添加到我的数据库，即时通讯使用的引导3，我因为没有使用jQuery的单行IM喜欢它，我有非常好的形式（obvioulsy他们基于jQuery中）。

我验证通过AJAX我的形式，但现在的问题是，我的语气永远不会关闭，当我试图重定向到动作是我的语气里装载的动作，所以我的问题是如何停止我的模式<？ / p>

这是一个例子这是什么code的作用：

我的方式：

验证时当

我的方式：

这是完美的与此code：

 ＆LT; D​​IV CLASS =模式变脸ID =myModal的tabindex = -  1角色=对话框中的咏叹调-labelledby =myModalLabelARIA隐藏=真＆GT;
＆LT; D​​IV CLASS =模式-对话框＆GT;
    ＆LT; D​​IV CLASS =模式内容＆GT;
        ＆LT; D​​IV CLASS =模头＆GT;
            ＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA隐藏=真＆GT;＆安培;倍;＆LT; /按钮＆GT;
            ＆LT; H4类=模式标题ID =myModalLabel＆gt;添加汽车和LT; / H4＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =模体＆GT;
            @using（Ajax.BeginForm（ModalAdd，新AjaxOptions（）{UpdateTargetId =mymodalform}））
            {
                ＆LT; D​​IV ID =mymodalform＆GT;
                    @ Html.Partial（CreatePartialView，新车（））
                ＆LT; / DIV＆GT;
            }
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;＆LT;！ -  /.modal-content  - ＆GT;
＆LT; / DIV＆GT;＆LT;！ -  /.modal-dialog  - ＆GT;

和我的部分：

  @model ControliBootstrap.Models.Car    ＆LT; D​​IV CLASS =形横＆GT;
    @ Html.ValidationSummary（真）    ＆LT; D​​IV CLASS =表单组＆GT;
        @ Html.LabelFor（型号=＆GT; model.Model，新{@class =控制标签COL-MD-2}）
        ＆LT; D​​IV CLASS =COL-MD-10＆GT;
            @ Html.EditorFor（型号=＆GT; model.Model）
            @ Html.ValidationMessageFor（型号=＆GT; model.Model）
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;    ＆LT;！ - 更多的领域 - ＆GT;    ＆LT; D​​IV CLASS =表单组＆GT;
        ＆LT; D​​IV CLASS =COL-MD-偏移2 COL-MD-10＆GT;
            ＆LT;输入类型=提交值=创建类=BTN BTN-默认的/＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

现在的问题是比当模型是有效的在我的控制器我去这是我的模式我的问题里面装又是如何关闭索引操作模式我？

这是我的控制器：

 公众的ActionResult ModalAdd（车车）
    {
        如果（ModelState.IsValid）
        {
            db.Cars.Add（车）;
            db.SaveChanges（）;
            返回RedirectToAction（「指数」）;
        }        返回PartialView（CreatePartialView，汽车）;
    }


解决方案

为了记录，我发现我的回答希望它可以帮助别人，实在是很难找到的这个完整的文章。

我不得不使用更多的jQuery，但它是一种清洁的答案（我认为）。

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

  [必需]
公共字符串名称{;组; }[需要]
公共字符串电话{搞定;组; }

然后，我创建了一个包含我的模式窗体我的共享文件夹的部分，这样我就可以让全球的。

  @model Controli.Models.Provider＆LT;！ - 模态 - ＆GT;
＆LT; D​​IV CLASS =模式变脸ID =mdlnewprovider的tabindex = -  1角色=对话框中的咏叹调-labelledby =myModalLabelARIA隐藏=真＆GT;
    ＆LT; D​​IV CLASS =模式-对话框＆GT;
        ＆LT; D​​IV CLASS =模式内容＆GT;
        @using（Html.BeginForm（添加，供应商，FormMethod.Post，新{ID =frmnewprovider}））
        {
        ＆LT; D​​IV CLASS =模头＆GT;
            ＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA隐藏=真＆GT;＆安培;倍;＆LT; /按钮＆GT;
            ＆LT; H4类=模式标题ID =myModalLabel＆GT; NUEVO Proveedor＆LT; / H4＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =模体＆GT;
            ＆LT; D​​IV CLASS =表单组＆GT;
                @ Html.TextBoxFor（U =＆GT; u.Name，新{@class =表格控，@placeholder = HttpUtility.HtmlDe code（@ Html.DisplayNameFor（U =＆GT; u.Name）.ToHtmlString （））}）
                @ Html.ValidationMessageFor（U =＆GT; u.Name）
            ＆LT; / DIV＆GT;
            ＆LT;！ - 更多的文本框和Validaton消息 - ＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =模式躯＆GT;
            ＆LT;输入类型=提交值=Agregar级=BTN BTN-主要/＆GT;
        ＆LT; / DIV＆GT;
        }
        ＆LT; / DIV＆GT;＆LT;！ -  /.modal-content  - ＆GT;
    ＆LT; / DIV＆GT;＆LT;！ -  /.modal-dialog  - ＆GT;
＆LT; / DIV＆GT;＆LT;！ -  /.modal  - ＆GT;

和脚本：

  VAR frmnewprovider = $（＃形式的提供者 - 新）;
$（文件）。就绪（函数（）{
frmnewprovider.submit（函数（五）{
    亦即preventDefault（）;
    frmnewprovider.validate（）;
    如果（frmnewprovider.valid（））{
        $阿贾克斯（{
            网址：/供应商/添加
            键入：POST，
            的contentType：应用/ JSON的;字符集= UTF-8，
            数据：JSON.stringify（{
                名称：frmnewprovider.find（'＃名称）VAL（）
                电话：frmnewprovider.find（'＃电话）VAL（）。
                电子邮件：frmnewprovider.find（'＃电子邮件）VAL（）。
                国家：frmnewprovider.find（'＃国）VAL（）
                状态：frmnewprovider.find（'＃国家'）VAL（）。
                地址：frmnewprovider.find（'＃地址）VAL（）。
            }），
            成功：函数（结果）{
                //如果添加记录数据库，然后... ...
                window.location.replace（'/供应商/指数'）; //我们可以重定向
                //或者干脆闭上了我们的模式。
                //$('#mdlnewprovider').modal('hide'）;
            }，
            错误：功能（结果）{
                警报（'错误'）;
            }
        }）;
    }
}）;
}）;

现在所有我必须做我的呈现形式在以往我需要它是添加这些行：

 ＆LT;按钮类=BTN BTN-主要数据切换=莫代尔数据目标=＃mdlnewprovider＆GT;
    NUEVO
＆LT; /按钮＆GT;@ Html.Partial（情态动词/供应商/ FrmNew，新的供应商（））@section脚本
{
＆LT;脚本SRC =〜/脚本/情态动词/供应商/ NewProvider.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;！ - 这哪里是剧本上面的那个 - ＆GT;
}

最后<击>，因为我的模型，客户端验证我只需添加我的模式我的数据库，<击>并重定向到索引视图，而Ajax调用隐藏了有效的模态 <强>的更新：的我建议，以决定是否重定向或隐藏Ajax调用模式。像评论说。

 公众的ActionResult添加（提供商提供商）
    {
        如果（ModelState.IsValid）//验证服务器端呢！
        {
            db.Providers.Add（供应商）;
            db.SaveChanges（）;
            返回JSON（新{成功=真}）; //返回一个虚拟JSON，你可以通过什么
                                               //永远参数需要。如果code范围
                                               //这一点。它会永远成功击中
                                               //我们的Ajax调用
        }
    }

请确保你的web.config包括：

 ＆LT;＆的appSettings GT;
  ＆LT;添加键=ClientValidationEnabledVALUE =真/＆GT;
  ＆LT;添加键=UnobtrusiveJavaScriptEnabledVALUE =真/＆GT;
＆LT; /的appSettings＆GT;

即时通讯使用这些脚本太：

 ＆LT;脚本SRC =〜/脚本/ jquery.validate.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =〜/脚本/ jquery.validate.unobtrusive.js＆GT;＆LT; / SCRIPT＆GT;

请让我知道，如果事情可以做得更好。

What I need to do is to show a popup to add a new record to my database, im using bootstrap 3 and I love it because im not using a single line of jquery, and I have really nice form (obvioulsy they are based in jquery).

I am validating my form via ajax, but the problem now is that my modal never closes, when I try to redirect to an Action the action is loaded inside my modal, so my question is how do I stop my modal?

This is an example of what this code does:

My form:

My form when when validated:

this is perfect with this code:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Add Car</h4>
        </div>
        <div class="modal-body">
            @using (Ajax.BeginForm("ModalAdd", new AjaxOptions() {UpdateTargetId = "mymodalform"}))
            {
                <div id="mymodalform">
                    @Html.Partial("CreatePartialView", new Car())
                </div>
            }
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

and my partial:

@model ControliBootstrap.Models.Car

    <div class="form-horizontal" >
    @Html.ValidationSummary(true)

    <div class="form-group">
        @Html.LabelFor(model => model.Model, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Model)
            @Html.ValidationMessageFor(model => model.Model)
        </div>
    </div>

    <!--More fields-->

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default"/>
        </div>
    </div>
</div>

the problem now is than when model is valid in my controller I go to Index Action which is loaded inside my modal so my question again is how do I close my modal?

here is my controller:

public ActionResult ModalAdd(Car car)
    {
        if (ModelState.IsValid)
        {
            db.Cars.Add(car);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return PartialView("CreatePartialView",car);
    }

解决方案

Just for the record, I found my answer hope it helps someone else, it is really hard to find a full article of this.

I had to use more of jquery but It is a clean answer (I think).

Using data annotations in my model:

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

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

Then I created a partial in my shared folder that contains my modal form, so I can make it global.

@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 -->

And the script:

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');
            }
        });
    }
});
});

Now all I have to do to render my form where ever I need it is to add these lines:

<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-->
}

Finally since my model was client-side validated I just add my model to my database, and redirect to Index view, while the ajax call hides active modal Update: I recommend to decide if redirect or hide modal at ajax call. like commented.

    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
        }
    }

make sure your web.config contains:

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

Im using these scripts too:

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

Please let me know if something could be better.

这篇关于引导模式窗体不会关闭后提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
ASP .NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆