質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.38%

  • Bootstrap

    1381questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • ASP.NET

    635questions

    ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

  • .NET Framework

    552questions

    .NET Framework は、Microsoft Windowsのオペレーティングシステムのために開発されたソフトウェア開発環境/実行環境です。多くのプログラミング言語をサポートしています。

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,281

doremifa

score 25

実現したいこと

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

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

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

補足情報(言語/FW/ツール等のバージョンなど)

ドットネットフレームワーク4.5.2
C#
bootstrap3

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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>

 

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/08 17:57

    ありがとうございます。
    まさにやりたかったことです。
    あと1つだけ悩んでいるのが、テキストボックスに何もはいっていない場合は検索条件なしで全件だしたいのですがこのサンプルだとデフォルトで0で検索してしまいますよね。
    ここはどのようにすればよろしいのでしょうか。(ここで聞くことではないかもしれませんが)

    キャンセル

  • 2016/10/08 20:24

    確かにここで聞くことではないのですが・・・

    SELECT クエリを工夫すればできると思います。例えば SELECT ... WHERE (@CategoryID=0 OR [CategoryID]=@CategoryID) のようにするとか。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • Bootstrap

    1381questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • ASP.NET

    635questions

    ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

  • .NET Framework

    552questions

    .NET Framework は、Microsoft Windowsのオペレーティングシステムのために開発されたソフトウェア開発環境/実行環境です。多くのプログラミング言語をサポートしています。