需要建议,如何打开一个twitter bootstrap模态,从
Asp.net Webform代码背后？
我想根据保存时的一些要求打开模态.一旦用户点击保存按钮,它将以代码背后的方式运行验证,如果有任何验证错误,则在引导模态对话框中显示所有错误.这一切都应该发生在保存按钮单击.
我尝试下面的代码,但它提示我java脚本错误“错误：对象不支持属性或方法’模态’”.谢谢
Asp.Net Webforms 4.5
Bootstrap V3.0.1
jQuery的1.9.0.js
jQuery的UI,1.8.24.js
Default.aspx
<asp:Content runat="server" ID="DisplayContent" ContentPlaceHolderID="DisplayContent">
<div class="container">
</div>
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<div class="container">
<div class="btn-group">
<asp:Button ID="btnSubmit" class="btn-info" runat="server" Text="Submit"
OnClick="btnSubmit_Click"></asp:Button>
</div>
</div>
<%--Bootstrap Modal Dialog--%>
<div class="modal fade" id="myModal" 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">×</button>
<h4 class="modal-title">Validation Errors List for HP7 Citation</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
</asp:Content>
Default.aspx.cs
protected void btnSubmit_Click(object sender,EventArgs e)
{
ScriptManager.RegisterClientScriptBlock(this,this.GetType(),"none","
<script>$('#mymodal').modal('show');</script>",false);
}
Script order defined in master page
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
<%: Scripts.Render("~/bundles/jquery") %>
<%: Scripts.Render("~/bundles/bootstrap") %>
<%: Scripts.Render("~/bundles/common") %>
</asp:PlaceHolder>
解决方法
首先,我建议您将您的模态放在UpdatePanel中,以便从CodeBehind设置标题和正文,以便您不必为每个按钮或每个消息创建单独的模态.
所以我修改你的代码并添加UpdatePanel：
所以我修改你的代码并添加UpdatePanel：
<div class="container">
<div class="btn-group">
<asp:Button ID="btnSubmit" class="btn-info" runat="server" Text="Submit"
OnClick="btnSubmit_Click"></asp:Button>
</div>
</div>
<!-- Bootstrap Modal Dialog -->
<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">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><asp:Label ID="lblModalTitle" runat="server" Text=""></asp:Label></h4>
</div>
<div class="modal-body">
<asp:Label ID="lblModalBody" runat="server" Text=""></asp:Label>
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
并在CodeBehind中使用这个：
protected void btnSubmit_Click(object sender,EventArgs e)
{
lblModalTitle.Text = "Validation Errors List for HP7 Citation";
lblModalBody.Text = "This is modal body";
ScriptManager.RegisterStartupScript(Page,Page.GetType(),"myModal","$('#myModal').modal();",true);
upModal.Update();
}
您可以看到,首先设置您的Modal的标题和正文,然后显示它,然后更新UpdatePanel以显示Label的消息.
您可以在页面末尾添加您的模式代码,这是提高页面加载性能的好方法,也可以防止与其他UpdatePanels或元素的任何冲突.
更新：
如果您收到错误：对象不支持属性或方法’模态’,这可能是因为安装引导失败.
尝试使用原始引导示例来检查代码：
http://getbootstrap.com/javascript/#modals
http://www.mytecbits.com/microsoft/dot-net/bootstrap-3-0-0-with-asp-net-web-forms
