34

コードビハインドから、Twitterブートストラップモーダルを開く方法を知っている人はいますか？

保存時にいくつかの要求に基づいてモーダルを開きたいです。「在庫がないので、次のオプションのいずれかを選択して続行し（破棄、予約...）、そのボタンを押します（続行するにはポストバックが実行される場合があります）」のようなものです。

ASP.NETWebフォームを使用しています。

4

8 に答える 8

47

デフォルトでは、Bootstrapjavascriptファイルは終了bodyタグの直前に含まれています

        <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>

これらの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>

次に、コードビハインドから次のようにモーダルポップアップを呼び出すことができます。

protected void lbEdit_Click(object sender, EventArgs e) {   
      ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop", "openModal();", true);
}
于 2013-09-22T18:04:44.967 に答える
24

最後に、コードビハインドからモーダルを表示できないという問題を発見しました。次のように、オープニングを作成したクライアントスクリプトを登録するのと同じくらい簡単だったと考える必要があります。

ScriptManager.RegisterClientScriptBlock(this, this.GetType(),"none",
    "<script>$('#mymodal').modal('show');</script>", false);

しかし、これは私にはうまくいきませんでした。

問題は、モーダルがasp：Updatepanel、期間内にある場合、TwitterBootstrapModalsスクリプトがまったく機能しないことです。モーダルの動作は、コードビハインドからクライアントへ、クライアントからコードビハインドへ（ポストバック）、それぞれの側で失敗します。モーダルのjsが実行されたときのポストバックも防止します。たとえば、閉じるボタンのように、いくつかのサーバーオブジェクトを破棄する必要があります（汚い例の場合）

ブートストラップスタッフに通知しましたが、彼らは便利な「aspではなく単純なhtmlのみで失敗シナリオを教えてください」と答えました。私の町では、それは...と呼ばれています。Bootstrapはプレーンなhtml以上のものをサポートしていません。気にしないでください、aspでそれを使用してください。

少なくとも背景管理で彼らが何をしているのかを見て、問題の大部分を引き起こしていると私は思ったが...（そこにちょっとしたヒント）

したがって、問題が発生した場合は、updatepanelをドロップして試してください。

于 2013-04-23T09:24:04.187 に答える
11

たぶんこの答えはとても遅いですが、それは役に立ちます。
これを行うには、3つのステップがあります
。1-HTMLでモーダル構造を作成します。
2- Javaスクリプトで関数を呼び出し、モーダルを開いdisplay:noneてCSSで設定するボタンを作成します。
3-コードビハインドの関数でこのボタンを呼び出します。
以下のスニペットでこれらの手順を確認できます。

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">&times;</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 -->

隠しボタン： 

<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 type="text/javascript">
        function ShowPopup() {
            $("#btnShowPopup").click();
        }
    </script>

背後にあるコード： 

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";
}

このソリューションは、私が使用したソリューションの1つです。

于 2016-05-07T11:56:35.443 に答える
1

モーダルを開くこの方法では、モーダルは表示されません。私はこれを回避策として見つけました。

私は削除しました：

 ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop", "openModal();", true);

lblJavaScriptという名前のasp：labelを追加し、コードビハインドコールで：

lblJavaScript.Text = "<script language=\"JavaScript\">openModal()</script>";

これで、モーダルが表示されます。

于 2016-04-12T18:33:57.210 に答える
1

上記のすべての例は、ドキュメントの準備ができたアクションを追加し、テキストの更新を実行する方法の順序を変更するだけで機能するはずです。また、スクリプトマネージャーを使用する代わりに、これ以外でも機能することを確認してください。これがコードビハインド内のテキストです。

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">&times;</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>

コードビハインド

lblModalTitle.Text = "Validation Errors";
lblModalBody.Text = form.Error;
upModal.Update();
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$(document).ready(function () {$('#myModal').modal();});", true);
于 2020-02-07T20:40:13.533 に答える
0

このようにやってみませんか：

1）フォームでポップアップを表示する

2）AJAXを使用してフォームを送信する

3）AJAXサーバー側のコードで、次のいずれかの応答をレンダリングします。

  • 検証またはメッセージのみを含むフォームでポップアップを表示する
  • ポップアップを閉じます（そしておそらくあなたを新しいページにリダイレクトします）
于 2013-03-15T14:01:13.497 に答える
0

ご参考までに、

私は以前、jQueryウィジェットでこの奇妙な振る舞いを見たことがあります。重要なのは、更新パネルをモーダル内に配置することです。これにより、updatepanelのDOMがモーダルに「とどまる」ことができます（ただし、ブートストラップでは機能します）。

于 2013-07-24T15:46:07.017 に答える
0

この行は、コードの背後にあるBootstrapModalを開くために機能しました

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "randomText", "$(document).ready(function () {$('#myModal').modal();});", true);
于 2021-03-20T16:57:25.223 に答える