【问题标题】:Trouble getting Bootstrap modal window to open from server-side ASP.NET code无法从服务器端 ASP.NET 代码打开引导模式窗口
【发布时间】:2021-01-31 22:34:02
【问题描述】:

我在从服务器端 ASP.NET 代码打开模式引导窗口时遇到问题,尽管我遵循了我在此处找到的所有示例。代码执行,我没有收到任何 JavaScript 错误,但模式窗口从未出现。

这里是模态窗口 HTML:

    <div id="StatusPopUp" 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">Credentials Not Found</h4>
                </div>
                <div class="modal-body">
                    <p class="text-justify">
                        The email address and/or password entered do not match our records.  Please try your login again if you believe this is an
                        error.
                    </p>
                    <p class="text-justify">
                        If you are an associate and need credentials for use of the Portal then please contact your regional office
                        or Team Sales Lead to request them.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">
                        Close</button>
                </div>
            </div>
        </div>
    </div>

这是打开模态的Javascript代码:

    <script type="text/javascript">
        function Show() {
            $("#StatusPopUp").modal("show");
        }
    </script>

最后,这是用于打开模式的服务器端代码:

        protected void btnGo_Click(object sender, EventArgs e) {
            bool isValid=Membership.ValidateUser(UName.Value,Pwd.Value);
            if ( isValid )
                this.Response.Redirect ( "associates/home.aspx", true );
            else
                ClientScript.RegisterStartupScript ( this.GetType ( ), "alert", "Show();", true );

        }

目标是当用户尝试在登录页面上登录但未成功时,模态框应弹出一条消息。正如我所说,所有的代码都按照编写的方式执行,但它仍然没有让模态窗口真正出现在浏览器中。帮忙?

【问题讨论】:

  • 您检查控制台是否有错误?如果有,它们是什么?
  • 浏览器控制台或 .NET 端没有任何类型的错误。这是某种“无声的失败”,这是令人困惑的部分。
  • 在加载引导 js 库之前,您的 RegisterStartUp 脚本可能正在运行(但在这种情况下,我预计会出现控制台错误)。在 show 方法的开头添加console.log($("#StatusPopUp")),以确保在该点加载模态元素。我假设这是一个网络表单项目是否正确?

标签: asp.net twitter-bootstrap server-side-scripting


【解决方案1】:

如果模式的显示仅由页面重新加载时的服务器端响应触发,我会稍微重构一下,使用 asp:panel 并将 javascript 移动到您的常规 jquery $(document).ready() 函数中。

这样,模态 HTML 甚至在需要时才呈现,并且您可以更好地控制何时调用显示模态的脚本。您不必处理任何外部脚本加载等。

aspx

<asp:panel id="pnlStatusPopUp" runat="server" visible="false">
  <div id="StatusPopUp" 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">Credentials Not Found</h4>
            </div>
            <div class="modal-body">
                <p class="text-justify">
                    The email address and/or password entered do not match our records.  Please try your login again if you believe this is an
                    error.
                </p>
                <p class="text-justify">
                    If you are an associate and need credentials for use of the Portal then please contact your regional office
                    or Team Sales Lead to request them.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">
                    Close</button>
            </div>
        </div>
    </div>
  </div>
</asp:panel>

.cs

protected void btnGo_Click(object sender, EventArgs e) {
    bool isValid=Membership.ValidateUser(UName.Value,Pwd.Value);
    if ( isValid )
         this.Response.Redirect ( "associates/home.aspx", true );
    else
         pnlStatusPopUp.visible = true;
}

js

$(document).ready(function(){
   $("#StatusPopUp").modal("show");
});

【讨论】:

  • 行得通,乔恩 P! (微笑)在某种程度上似乎有点不雅,但很难争论什么是有效的,对吧?谢谢!我投票给它作为答案,但我太新了,无法显示。
  • 我认为作为 StackOverflow 的新手,您必须等待 24 小时才能接受答案。您确实失去了一点优雅,但您确实获得了对 javascript 执行时间的更多控制。您还可以为用户节省几个字节,在他们需要之前不向他们发送 HTML。面板是根据服务器端条件有条件地在页面上呈现内容的好方法。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-06-22
  • 2016-12-08
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多