30943


ASP.NET C#にてWebアプリケーションを作成しています。

BootStrapのModalを使用しています。  
モーダル表示用のボタンクリック時に  
サーバ側処理でOnclickイベントを入れているのですが、  
このイベント発生直後にモーダルが勝手に閉じてしまいます。

sample.aspx：modal表示ボタン

[code]

    <input type="button" id="BtnShowModal" name="BtnShowModal" class="btn btn-primary" data-toggle="modal" data-target="#modal-BtnShowModal" value="モーダル表示" onserverclick="BtnShowModal_Click" runat="server" />    
    
[/code]

sample.aspx：モーダル本体

[code]

    <div class="modal" id="modal-BtnShowModal" tabindex="-1" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modal-label">タイトル</h4>
            </div>
    
            <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <div class="modal-body" style="height: 400px;">
                    <asp:GridView ID="gvData" runat="server" AutoGenerateColumns="False">
                    <Columns>                       
                    </Columns>
                    </asp:GridView>
                </div>
            </ContentTemplate>
            </asp:UpdatePanel>
    
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
                <asp:Button ID="BtnSave" runat="server" Text="保存" OnClick="BtnSave_Click" />
            </div>
        </div>
    </div>
    
[/code]

Sample.aspx.cs：ボタンクリックイベント

[code]

    protected void BtnShowModal_Click(object sender, EventArgs e)
    {
    
    }
    
[/code]

宜しくお願い致します。


CC BY-SA 3.0
2016-12-06T02:56:05.843
30940
2016-12-06T04:03:29.870
19580
question
c# asp.net bootstrap
.NETでBootstrapのModalがOnClickイベント後に閉じてしまう。


`onserverclick`なのでポストバックが発生し、ページ全体または`UpdatePanel`が再読み込みされてBootstrapによるモーダルの表示を打ち消しているのでしょう。ですので`UpdatePanel`のトリガーとして問題のボタンを登録する必要があります。対象の`<asp:UpdatePanel>`に

[code]

    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="BtnShowModal" />
        </Triggers>
    </asp:UpdatePanel>
    
[/code]

のように指定すれば、`BtnShowModal`で`UpdatePanel2`が更新されると思います。

また`BtnShowModal`でフルポストバックが要求されるのであれば、画面の再描画時にモーダルを表示状態にしておけばよいと思います。例えば`class="modal"`を`class="modal
in"`に変更するとか、`ClientScriptManager`の`RegisterStartupScript`メソッドに`$("#modal-
BtnShowModal").modal("show")`を登録するといった方法があります。


CC BY-SA 3.0
2016-12-06T03:44:09.990
30943
2016-12-06T04:03:29.870
2016-12-06T04:03:29.870
5750
5750
30940
answer