twitter-bootstrap 从代码隐藏中打开 Bootstrap Modal
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15410232/
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
Open Bootstrap Modal from code-behind
提问by Sergio
Anyone knows how to open a twitter bootstrap modal, from code behind?
任何人都知道如何从背后的代码中打开 twitter bootstrap 模式？
I want to open the modal based on some requeriment at the moment of the save. Something like "Hey there's no stock, pick up one of the following options to continue (discard, reserve...) and press that button (that may do a postback for continue)"
我想在保存时根据一些要求打开模态。类似于“嘿，没有库存，选择以下选项之一继续（丢弃，保留......）并按下该按钮（可能会进行回发以继续）”
I'm using ASP.NET web forms.
我正在使用 ASP.NET Web 表单。
采纳答案by Sergio
Finally I found out the problem preventing me from showing the modal from code-behind. One must think that it was as easy as register a clientscript that made the opening, like:
最后我发现了阻止我从代码隐藏显示模态的问题。必须认为这就像注册一个打开的客户端脚本一样简单，例如：
ScriptManager.RegisterClientScriptBlock(this, this.GetType(),"none",
"<script>$('#mymodal').modal('show');</script>", false);
But this never worked for me.
但这对我从来没有用过。
The problem is that Twitter Bootstrap Modals scripts don't work at all when the modal is inside an asp:Updatepanel, period. The behaviour of the modals fail from each side, codebehind to client and client to codebehind (postback). It even prevents postbacks when any js of the modal has executed, like a close button that you also need to do some sever objects disposing (for a dirty example)
问题是当模态在 asp:Updatepanel期间时，Twitter Bootstrap Modals 脚本根本不起作用。模态的行为从每一方都失败了，代码隐藏到客户端和客户端到代码隐藏（回发）。它甚至可以在模式的任何 js 已执行时阻止回发，例如关闭按钮，您还需要执行一些服务器对象处理（例如脏示例）
I've notified the bootstrap staff, but they replied a convenient "please give us a fail scenario with only plain html and not asp." In my town, that's called... well, Bootstrap not supporting anything more that plain html. Nevermind, using it on asp.
我已经通知了引导工作人员，但他们回复了一个方便的“请给我们一个只有纯 html 而不是 asp 的失败场景。” 在我的城镇，这被称为......好吧，Bootstrap 不支持任何更简单的 html。没关系，在asp上使用它。
I thought them to at least looking what they're doing different at the backdrop management, that I found causes the major part of the problems, but... (justa hint there)
我认为他们至少应该看看他们在后台管理方面所做的不同，我发现这是问题的主要部分，但是......（只是暗示）
So anyone that has the problem, drop the updatepanel for a try.
因此，任何有问题的人都可以尝试删除更新面板。
回答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 Hamid Talebi
Maybe this answer is so late, but it's useful.
to do it,we have 3 steps:
1- Create a modal structure in HTML.
2- Create a button to call a function in java script, to open modal and set display:nonein CSS .
3- Call this button by function in code behind .
you can see these steps in below snippet :
也许这个答案太晚了，但它很有用。
要做到这一点，我们有 3 个步骤：
1- 在 HTML 中创建一个模态结构。
2-创建一个按钮来调用java脚本中的函数，打开模态并display:none在CSS中设置。
3- 通过后面的代码中的函数调用此按钮。
您可以在以下代码段中看到这些步骤：
HTML modal:
HTML 模态：
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">
Registration done Successfully</h4>
</div>
<div class="modal-body">
<asp:Label ID="lblMessage" runat="server" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close</button>
<button type="button" class="btn btn-primary">
Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Hidden Button:
隐藏按钮：
<button type="button" style="display: none;" id="btnShowPopup" class="btn btn-primary btn-lg"
data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
Script Code:
脚本代码：
<script type="text/javascript">
function ShowPopup() {
$("#btnShowPopup").click();
}
</script>
code behind:
后面的代码：
protected void Page_Load(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowPopup();", true);
this.lblMessage.Text = "Your Registration is done successfully. Our team will contact you shotly";
}
this solution is one of any solutions that I used it .
此解决方案是我使用过的任何解决方案之一。
回答by Danny
This method of opening the Modal would not display the Modal for me. I found this as a work arround.
这种打开模态的方法不会为我显示模态。我发现这是一项工作。
I removed:
我删除了：
ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop", "openModal();", true);
Than I added an asp:label named lblJavaScript and in code behind call:
比我添加了一个名为 lblJavaScript 的 asp:label 并在调用后面的代码中：
lblJavaScript.Text = "<script language=\"JavaScript\">openModal()</script>";
Now the Modal will display.
现在将显示模态。
回答by Ameji012
All of the example above should work just add a document ready action and change the order of how you perform the updates to the texts, also make sure your using Script manager alternatively non of this will work for you. Here is the text within the code behind.
上面的所有示例都应该可以工作，只需添加一个文档就绪操作并更改您对文本执行更新的顺序，同时确保您使用的脚本管理器或者这些都不适合您。这是后面代码中的文本。
aspx
aspx
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><asp:Label ID="lblModalTitle" runat="server" Text=""></asp:Label></h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<asp:Label ID="lblModalBody" runat="server" Text=""></asp:Label>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
Code Behind
背后的代码
lblModalTitle.Text = "Validation Errors";
lblModalBody.Text = form.Error;
upModal.Update();
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$(document).ready(function () {$('#myModal').modal();});", true);
回答by Dan M
FYI,
供参考，
I've seen this strange behavior before in jQuery widgets. Part of the key is to put the updatepanel inside the modal. This allows the DOM of the updatepanel to "stay with" the modal (however it works with bootstrap).
我以前在 jQuery 小部件中见过这种奇怪的行为。部分关键是将更新面板放在模态中。这允许 updatepanel 的 DOM 与模式“保持一致”（但是它可以与引导程序一起使用）。
回答by tomaszbak
How about doing it like this:
这样做怎么样：
1) show popup with form
1）显示带有表单的弹出窗口
2) submit form using AJAX
2) 使用 AJAX 提交表单
3) in AJAX server side code, render response that will either:
3) 在 AJAX 服务器端代码中，呈现以下任一响应：
- show popup with form with validations or just a message
- close the popup (and maybe redirect you to new page)
- 显示带有验证表单的弹出窗口或仅显示一条消息
- 关闭弹出窗口（并可能将您重定向到新页面）
