引导模式弹出 C# 代码隐藏

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15688572/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-10 17:36:20  来源:igfitidea点击:

bootstrap modal popup c# codebehind

c#javascripttwitter-bootstrap

提问by user1144596

i am using bootstrap in my c# asp.net project and i want to show to show the modal popup from code behind.

我在我的 c# asp.net 项目中使用引导程序,我想显示以显示代码背后的模式弹出窗口。

in my page header i have a javascript function as follows:

在我的页眉中,我有一个 javascript 函数,如下所示:

function LoginFail() {
        $('#windowTitleDialog').modal('show');
    }

and on the click of my button i am calling the javascript as follows

单击我的按钮后,我按如下方式调用 javascript

ScriptManager.RegisterClientScriptBlock(this, typeof(System.Web.UI.Page), "LoginFail", "LoginFail();", true);

this does not show the modal popup. however, if i use something like alert('login failed'), it works fine.

这不会显示模态弹出窗口。但是,如果我使用类似的东西alert('login failed'),它工作正常。

can anybody please help with this?

有人可以帮忙吗?

采纳答案by wallace740

By default Bootstrap javascript files are included just before the closing body tag

默认情况下,Bootstrap javascript 文件包含在结束正文标记之前

    <script src="vendors/jquery-1.9.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="vendors/easypiechart/jquery.easy-pie-chart.js"></script>
    <script src="assets/scripts.js"></script>
 </body>

I took these javascript files into the head section right before the body tag and I wrote a small function to call the modal popup:

我将这些 javascript 文件放在 body 标签之前的 head 部分,并编写了一个小函数来调用模态弹出窗口:

<script src="vendors/jquery-1.9.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/easypiechart/jquery.easy-pie-chart.js"></script>
<script src="assets/scripts.js"></script>

<script type="text/javascript">
function openModal() {
    $('#myModal').modal('show');
}
</script>
</head>
<body>

then I could call the modal popup from code-behind with the following:

然后我可以使用以下代码从代码隐藏中调用模式弹出窗口:

protected void lbEdit_Click(object sender, EventArgs e) {   
  ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop", "openModal();", true);
}

回答by drax

I assume, you are using one of jQuery modal plugins. In that case, I suspect, plugin code isn't initialized at the time it is called (which would be immediately after it is rendered into page). You have to postpone call to the function after plugin code is executed. Implementation for your case might look like this:

我假设您正在使用 jQuery 模态插件之一。在这种情况下,我怀疑插件代码在调用时没有初始化(这将在它呈现到页面之后立即进行)。您必须在执行插件代码后推迟对该函数的调用。您的案例的实现可能如下所示:

ScriptManager.RegisterClientScriptBlock(this, typeof(System.Web.UI.Page), "LoginFail", "$(function() { LoginFail(); });", true);

回答by user2215565

I have the same problem, tried to find online solution but i was unable to do so. I am able to call other javascript funcionts as you said from the code behind but when i add the modal js function the modal does not show up.

我有同样的问题,试图找到在线解决方案,但我无法这样做。我可以像您从后面的代码中所说的那样调用其他 javascript 函数,但是当我添加模态 js 函数时,模态不会出现。

My guess is that the modal.('show') function is not being call because when i insepct in crhome the modal element the class is modal hide fade and not modal hide fade IN and other attributes stay the same.

我的猜测是 modal.('show') 函数没有被调用,因为当我在 crhome 中检查模态元素时,该类是模态隐藏淡入淡出而不是模态隐藏淡入淡出,其他属性保持不变。

A possible solution is to change those attributes from the code behind, i mean you can do what the js does from the code behind, possible not the best solution but i did not what else to do. By doing this i got the modal to show up with the background grey but could not make the effect to work.

一个可能的解决方案是从背后的代码中更改这些属性,我的意思是你可以从背后的代码中做 js 所做的事情,这可能不是最好的解决方案,但我没有别的办法。通过这样做,我使模态显示为背景灰色,但无法使效果起作用。

回答by Tito Ruiz

This is how I solved:

我是这样解决的:

The Script function

脚本功能

<script type="text/javascript">
    function LoginFail() {
        $('#windowTitleDialog').modal();
    }        
</script>

The Button declaration

按钮声明

<asp:Button ID="LaunchModal" runat="server" Text="Launch Modal" CssClass="btn" onclick="LaunchModal_Click"/>

Notice that the attribute data-togle="modal" is not set.

请注意,未设置属性 data-togle="modal"。

The Server-side code in the LaunchModal_Click event is:

LaunchModal_Click 事件中的服务器端代码为:

ScriptManager.RegisterStartupScript(this, this.GetType(), "LaunchServerSide", "$(function() { LoginFail(); });", true);

I hope this help you.

我希望这对你有帮助。

回答by John Drinkwater

I do this in the aspx page:

我在 aspx 页面中这样做:

<asp:Panel ID="MessagePanel" runat="server" CssClass="hide"  EnableViewState="false">
<div class="modal-header">
<asp:Button type="button" ID="btnClose" runat="server" data-dismiss="modal" Text="x" />
</div>
<div class="modal-body">
<h4>What's new in this version</h4>
... rest of bootstrap modal stuff....
</div>
</asp:Panel>

Then in code-behind to show the modal popup on any event such as page.load or a button click I just change the CssClass of the Panel:

然后在代码隐藏中显示任何事件(例如 page.load 或按钮单击)上的模式弹出窗口,我只需更改面板的 CssClass:

MessagePanel.CssClass = "modal fade in"

No need for js or ScriptManager.

不需要 js 或 ScriptManager。