显示来自Asp.Net Web表单引导莫代尔 [英] Display Bootstrap Modal from Asp.Net Webforms
问题描述
需要建议，如何打开一个Twitter的引导模式，从Asp.net网络表单code后面？
我想根据在保存的那一刻一些要求开模。一旦保存按钮用户点击，它运行在code中的验证后面如果有任何验证错误，显示自举模式对话框的所有错误。这一切应该发生在保存按钮的点击。
我试着用下面一段code，但它提示我的Java脚本错误错误：对象不支持属性或方法'模式'。谢谢
Asp.Net Web表单4.5
引导V3.0.1
JQuery的-1.9.0.js
jQuery的-UI-1.8.24.js
的Default.aspx＆LT; ASP：内容=服务器ID =DisplayContentContentPlaceHolderID =DisplayContent＆GT;
＆LT; DIV CLASS =容器＆GT;
＆LT; / DIV＆GT;
＆LT; / ASP：内容＆GT;＆LT; ASP：内容=服务器ID =的BodyContentContentPlaceHolderID =日程地址搜索Maincontent＆GT;＆LT; DIV CLASS =容器＆GT;
＆LT; DIV CLASS =BTN-组＆GT;
＆LT; ASP：按钮的ID =btnSubmit按钮级=BTN-INFO=服务器文本=提交
的OnClick =btnSubmit_Click＆GT;＆LT; / ASP：按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;％ - 引导模态对话框 - ％GT;
＆LT; DIV CLASS =模式变脸ID =myModal角色=对话框中的咏叹调-labelledby =myModalLabelARIA隐藏=真＆GT;
＆LT; DIV CLASS =模式-对话框＆GT;
＆LT; DIV CLASS =模式内容＆GT;
＆LT; DIV CLASS =模头＆GT;
＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA隐藏=真＆GT;＆安培;倍;＆LT; /按钮＆GT;
＆LT; H4类=模式标题＆gt;作为HP7引用＆LT验证错误清单; / H4＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =模体＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =模式躯＆GT;
＆LT;按钮类=BTN BTN-INFO数据解雇=莫代尔ARIA隐藏=真＆GT;关闭＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / ASP：内容＆GT;
Default.aspx.cs保护无效btnSubmit_Click（对象发件人，EventArgs的发送）
{
ScriptManager.RegisterClientScriptBlock（这一点，this.GetType（），无，
＆LT;脚本＆GT; $（'＃mymodal'）模态（'秀'）;＆LT; / SCRIPT＆gt;中，FALSE）;
} 在母版页中定义的脚本命令 ＆LT; ASP：占位符ID =PLACEHOLDER1=服务器＆GT;
＆LT;％：Scripts.Render（〜/包/ Modernizr的）％＆GT;
＆LT;％：Scripts.Render（〜/包/ jQuery的）％＆GT;
＆LT;％：Scripts.Render（〜/包/引导）％＆GT;
＆LT;％：Scripts.Render（〜/包/通用）％GT;
＆LT; / ASP：占位符＆GT;
首先我建议你把你的模式在的UpdatePanel ，以设置标题和从codeBehind身体，这样你就不必为每个按钮创建或每个消息的单独的模式。
所以我修改code，并添加一个UpdatePanel：
＆LT; DIV CLASS =容器＆GT;
＆LT; DIV CLASS =BTN-组＆GT;
＆LT; ASP：按钮的ID =btnSubmit按钮级=BTN-INFO=服务器文本=提交
的OnClick =btnSubmit_Click＆GT;＆LT; / ASP：按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;！ - 引导模态对话框 - ＆GT;
＆LT; DIV CLASS =模式变脸ID =myModal角色=对话框中的咏叹调-labelledby =myModalLabelARIA隐藏=真＆GT;
＆LT; DIV CLASS =模式-对话框＆GT;
＆LT; ASP：的UpdatePanel ID =upModal=服务器ChildrenAsTriggers =假的UpdateMode =条件＆GT;
＆LT;＆的ContentTemplate GT;
＆LT; DIV CLASS =模式内容＆GT;
＆LT; DIV CLASS =模头＆GT;
＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA隐藏=真＆GT;＆安培;倍;＆LT; /按钮＆GT;
＆LT; H4类=模式标题＆GT;＆LT; ASP：标签ID =lblModalTitle=服务器文本=＆GT;＆LT; / ASP：标签＆gt;＆LT; / H4＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =模体＆GT;
＆LT; ASP：标签ID =lblModalBody=服务器文本=＆GT;＆LT; / ASP：标签＆gt;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =模式躯＆GT;
＆LT;按钮类=BTN BTN-INFO数据解雇=莫代尔ARIA隐藏=真＆GT;关闭＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /＆的ContentTemplate GT;
＆LT; / ASP：的UpdatePanel＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
结果
而在codeBehind使用此：
保护无效btnSubmit_Click（对象发件人，EventArgs的发送）
{
lblModalTitle.Text =验证错误HP7引文目录;
lblModalBody.Text =这是模态的身体;
ScriptManager.RegisterStartupScript（页，Page.GetType（），myModal，$（'＃myModal'）模态（）;，真）;
upModal.Update（）;
}
正如你所看到的，设置标题和你的模态的身体在第一，然后再显示它，然后更新的UpdatePanel显示标签的消息。
您可以在网页的末尾加上模态code，这是提高你的页面加载性能的好办法，也prevent与其他的UpdatePanel或要素发生任何冲突。
搜索结果
更新：
结果
如果你得到错误：对象不支持属性或方法'模式'也许是因为没有设置引导。
尝试与原来的引导样品检查code：
http://getbootstrap.com/javascript/#modals
结果
而如果再次出现该错误，想必这些链接会有所帮助：
结果
<一href=\"http://geekswithblogs.net/JeremyMorgan/archive/2012/09/18/how-to-use-twitter-bootstrap-on-an-asp.net-website.aspx\">http://geekswithblogs.net/JeremyMorgan/archive/2012/09/18/how-to-use-twitter-bootstrap-on-an-asp.net-website.aspx
结果
<一href=\"http://www.mytecbits.com/microsoft/dot-net/bootstrap-3-0-0-with-asp-net-web-forms\">http://www.mytecbits.com/microsoft/dot-net/bootstrap-3-0-0-with-asp-net-web-forms
Need Suggestions, how to open a twitter bootstrap modal, from Asp.net Webform code behind?
I want to open the modal based on some requirement at the moment of the save. Once user click on the save button , it runs the validations in code behind and if there are any validation errors , display all errors in bootstrap modal dialog. This all should happen on Save button click.
I tried with below piece of code , but it prompts me java script error "Error: Object doesn't support property or method 'modal'". Thanks
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>
First of all i suggest you to put your modal in an UpdatePanel in order to set the Title and Body from CodeBehind so you don't have to create a separate modal for each button or each message.
So i modify your code and add an 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>
And in CodeBehind using this:
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();
}
As you can see, set the Title and Body of your Modal at first, then show it and then update the UpdatePanel to show Label's messages.
You can add your modal code at the end of your page, it's a good way to improve performance of your page loading and also prevent any conflict with other UpdatePanels or elements.
Update:
If you get Error: Object doesn't support property or method 'modal' maybe it's because failing setup bootstrap.
Try to check your code with the original bootstrap sample:
http://getbootstrap.com/javascript/#modals
And if you get this error again, propbably these links be helpful:
http://geekswithblogs.net/JeremyMorgan/archive/2012/09/18/how-to-use-twitter-bootstrap-on-an-asp.net-website.aspx
http://www.mytecbits.com/microsoft/dot-net/bootstrap-3-0-0-with-asp-net-web-forms
这篇关于显示来自Asp.Net Web表单引导莫代尔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
