bootstrapのmodalで検索の小窓をつくりたい

###実現したいこと
お世話になります。
C# 版のASP.net Webform bootstrap3のmodalで検索項目と結果表示のGridをつくりたいのですがうまくいきません。
ボタンを押すとmodalが消えてしまいますし、
消えないようにjavascriptをボタンのイベントで生成したら
画面がちらつくし、ソースもわけわかんなくなってきました。
簡単なサンプルないでしょうか。

やりたいこと
１．親画面のボタンクリックでjqueryからmodalを表示（ここはできてる）
２．モーダルには検索項目用のテキストボックスとAsp:buttonとGridviewがある
３．モーダルのasp:buttonクリックでテキストボックスの条件で検索し、結果をモーダル上のGridViewに表示

よろしくお願いいたします。

###補足情報(言語/FW/ツール等のバージョンなど)
ドットネットフレームワーク４．５．２
Ｃ＃
bootstrap3

行動規範の内容に同意します

回答1件

ベストアンサー

Button クリックでポストバックがかかり、サーバーから応答が戻ってきてブラウザ上に再描画される時に、画面全部が書き直されるので、その時 modal 部分が非表示になってしまうのだと思います。

ASP.NET AJAX Extensions の ScriptManager と UpdatePanel を利用し、「テキストボックスとAsp:buttonとGridview」（他にもあればそれも）を UpdatePanel 内に配置して試してみてください。

そのようにすると UpdatePanel 内のみしか書き換えられないので、modal 部分が表示されたまま中身の GridView などが書き換わると思います。

それでうまくいかなかったら連絡ください。その際に、具体的にどのようにしたのかを上の質問欄に追記してください。

【2016/10/8 10:55 追記】

上の回答で書いた「ASP.NET AJAX Extensions の ScriptManager と UpdatePanel を利用し・・・」という案を検証してみました。検証に使ったコードをアップしておきます。このコードで、modal 部分を表示したまま GridView に検索結果を表示できます。ご参考まで。

（以下のサンプルで使用しているデータベースは Microsoft が提供しているサンプルデータベース Northwind の Products テーブルを使っています）

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    // 2016/10/8 teratail の検証用
    // https://teratail.com/questions/50621
    
    // 以下の Bootstrap Modal の枠組みはデモのコードほとんどそのまま
    // http://getbootstrap.com/javascript/
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Bootstrap Modal Demo</title>

    <!-- Bootstrap -->
    <link href="/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/Scripts/jquery-1.11.1.js" type="text/javascript"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/bootstrap-3.2.0-dist/js/bootstrap.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <input id="Button1" type="button" class="btn btn-primary btn-lg" 
        value="Launch demo modal" onclick="$('#myModal').modal('show');"/>
    
    <div class="modal fade" id="myModal" tabindex="-1" 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">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    Category ID (1 - 8) を入力
                    
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>
                            <asp:TextBox ID="TextBox1" runat="server">
                            </asp:TextBox>
                            <asp:Button ID="Button2" runat="server" Text="Button" />
                            <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                                ConnectionString="<%$ ConnectionStrings:NORTHWINDConnectionString %>" 
                                SelectCommand="SELECT [ProductID], [ProductName], 
                                            [CategoryID], [UnitPrice] FROM [Products] 
                                            WHERE ([CategoryID] = @CategoryID)">
                                <SelectParameters>
                                    <asp:ControlParameter ControlID="TextBox1" 
                                        DefaultValue="0" Name="CategoryID" 
                                        PropertyName="Text" Type="Int32" />
                                </SelectParameters>
                            </asp:SqlDataSource>
                            <asp:GridView ID="GridView1" runat="server" 
                                AutoGenerateColumns="False" DataKeyNames="ProductID" 
                                DataSourceID="SqlDataSource1">
                                <Columns>
                                    <asp:BoundField DataField="ProductID" 
                                        HeaderText="ProductID" 
                                        InsertVisible="False" ReadOnly="True" 
                                        SortExpression="ProductID" />
                                    <asp:BoundField DataField="ProductName" 
                                        HeaderText="ProductName" 
                                        SortExpression="ProductName" />
                                    <asp:BoundField DataField="CategoryID" 
                                        HeaderText="CategoryID" 
                                        SortExpression="CategoryID" />
                                    <asp:BoundField DataField="UnitPrice" 
                                        HeaderText="UnitPrice" 
                                        SortExpression="UnitPrice" />
                                </Columns>
                            </asp:GridView>
                        </ContentTemplate>
                    </asp:UpdatePanel>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>

    </form>
</body>
</html>