Twitter bootstrapモーダル、Asp.net Webformコードの背後からの提案、どのように開くか?
保存の時点でいくつかの要件に基づいてモーダルを開きたいです。ユーザーが[保存]ボタンをクリックすると、コードビハインドで検証が実行され、検証エラーがある場合は、bootstrapモーダルダイアログにすべてのエラーが表示されます。
以下のコードで試してみましたが、プロンプトJavaスクリプトエラー「エラー:オブジェクトはプロパティまたはメソッド「モーダル」をサポートしていません」。ありがとうございます。
Asp.Net Webforms 4.5
ブートストラップ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を追加します。
<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();
}
まず、モーダルのタイトルとボディを設定してから表示し、最後にUpdatePanelを更新します。
ページの読み込み速度を改善するための良い方法は、モーダルコードをページの最後に置くことです。他のUpdatePanelまたは要素と競合します。
より高度でトリッキーな提案:モーダルコードをMasterPageの最後に配置し、それを更新するグローバル関数を記述して、生活をさらに楽にします!
トラブルシューティング:Error: Object doesn't support property or method 'modal'
、可能性の高い理由は、Bootstrapのセットアップに失敗した可能性があります。公式のbootstrap=サンプル: http://getbootstrap.com/javascript/ #modals
それでもエラーが発生する場合は、次のリンクが役立つかもしれません。
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