Question

我在MVC中有一个带有Ajax.BeginForm的登录视图。我想要做的是在te OnBeing方法上显示一个bootstrap模式对话框，一旦操作完成，我想关闭bootsrap对话框。问题是，当我提交表单时，对话框没有显示。动作控制器工作正常！我错了什么？

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - B.Bring</title>
    @Styles.Render("~/Content/css")
    <link href="@Url.Content("~/Content/Login/Login.css")" rel="stylesheet" type="text/css"/>    
    <script src="~/Scripts/jquery-1.11.1.min.js"></script>
    <script src="~/Scripts/respond.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="http://ajax.aspnecdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>    
    <script src="~/Scripts/bootswatch.js"></script>
    <script type="text/javascript">
        function openProgressDialog() {
            //alert('xczc');
            $('#progressModal').modal({
                keyboard: true,
                show: true,
                backdrop: true
            })
            
            return true;
        }
        function closeProgressDialog() {
            $('#progressModal').modal({
                show: false
            })
            return true;
        }
        function onBegin()
        {
            $("#btnlogin").button('loading');
        }

        //$(document).ready(function() {
        //    $('#form0').submit(function() {
        //        openProgressDialog();

        //        //var form = $(this);
        //        //var url = form.attr('action');
        //        //var formData = form.serialize();
        //        //$.post(url, formData, function(result) {
        //        //    // Do something with result
        //        //});

        //        return false;
        //    });
        //});
    </script>
</head>

<body>
    @*<div id="fullscreen_bg" class="fullscreen_bg"></div>*@
    <div class="container">
        <button class="btn btn-primary" onclick="openProgressDialog()">test call modal (work!)</button>
        <div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
            <div class="panel panel-info panel-default">
                <div class="panel-heading">
                    <div class="panel-title"><span class="glyphicon glyphicon-globe"></span> @BBring.Shared.GlobalVariables.ApplicationName - Login</div>
                </div>

                @using (Ajax.BeginForm("Login", "Account", null, new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, OnBegin = "return openProgressDialog();", OnComplete="return closeProgressDialog();" LoadingElementId = "divLoading", LoadingElementDuration = 1000 }))
                {
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    @Html.AntiForgeryToken()

                    <div class="panel-body" style="padding-top:30px">
                        <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12">
                        </div>

                        @Html.ValidationMessageFor(m => m.Username, "", new { @class = "text-danger" })
                        <div style="margin-bottom: 25px" class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        @Html.TextBoxFor(m => m.Username, new { @class = "form-control", @placeholder = "username" })
                    </div>

                        @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
                        <div style="margin-bottom: 25px" class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                        @Html.PasswordFor(m => m.Password, new { @class = "form-control", @placeholder = "password" })
                    </div>
                        <div class="input-group">
                            <div class="checkbox">
                                <label>
                                    <input id="login-remember" type="checkbox" name="remember" value="1"> Ricordami l'account
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer">
                        <div class="bs-component text-right">                            
                            <div id="divLoading" style="display:none">
                                <img src="~/Content/Image/dx-spinner.png" />
                            </div>
                            <button id="btnlogin" type="submit" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Accedi a BBring" data-loading-text="Login..."><span class="glyphicon glyphicon-log-in"></span> Login</button>
                            <button type="reset" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Ripulisci i campi"><span class="glyphicon glyphicon-refresh"></span> Reset</button>
                        </div>
                    </div>
                }
            </div>
        </div>
       
        <div id="progressModal" class="modal" role="dialog" tabindex="-1" style="display:none">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                                <span class="sr-only">45% Complete</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

＆＃13;

Answer 1

确保页面上有两个标签。

<强>脚本
<script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>

CSS链接
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet">

<强> JQuery的

$(document).ready(function () {
    $("#progressModal").modal({
        keyboard: true,
        show: false,
        backdrop: 'static'
    });

    function openProgressDialog() {
        $('#progressModal').modal("show");
        return true;
    }

    function closeProgressDialog() {
        $('#progressModal').modal("close")
        return true;
    }
    $("input").click(function () {
        openProgressDialog();
    });
});

发布后，Ajax.BeginForm不会通过onBegin函数显示引导模式

1 个答案:

DEMO