modalウインドウ内のDropDownListをポストバックせずに取得

表題の通りですが、modalウインドウ内のDropDownListをおいて
AutoPotBackをtrueにするとポストバックするので、modalが消えてしまうので、
別の方法を取りたいのですが、何か良い案はないでしょうか。

モーダルがスライドインのアニメーションを入れているので
ポストバックを受け取って、再度モーダルを表示するのは避けたいとおもっています。

退会済みユーザー

2016/09/29 14:39

「modalウインドウ」って何？

Qoo

2016/09/29 15:10

bootstrapの http://mizukazu.minibird.jp/bootstrap-modal/

退会済みユーザー

2016/09/30 02:16

Bootstrap を使うのは必須なんですか？（モーダルでありさえすれば Ajax Control Toolkit とか jQuery UI でもよい？）あと「AutoPotBackをtrueにするとポストバックする」と「ポストバックを受け取って、再度モーダルを表示するのは避けたい」というのが矛盾しているように思えますが、どういうことですか？ DropDownList をクリックするとポストバックしてサーバー側で何らかの処置を行う必要があるのですよね？　非同期でポストバックすればサーバーはページ丸ごと応答として返すので、ブラウザ側ではその応答受け取ってページ丸ごと再描画するこのになるので、その時「再度モーダルを表示」せざるを得ないはずですが？

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

回答2件

DropDownList をクリックすると、DropDownList の選択結果をサーバーに送信して、サーバー側で何らかの処置を行うのであろうと想像してサンプルを作ってみました。

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Web.Services" %>

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

<script runat="server">

    // 以下のページの Modal のデモのコードほとんどそのまま使用
    // http://getbootstrap.com/javascript/

    // jQuery.Ajax で POST されたデータを受けるためのメソッド。
    // public static にして WebMethodAttribute 属性を付与
    [WebMethod]
    public static string ReceiveData(string postedData)
    {
        // サーバーでの何らかの処置        

        return postedData + " を処理しました。";
    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" 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>

    <script type="text/javascript">
    //<![CDATA[
        $(document).ready(function () {
            $("#DropDownList1").change(function () {
                var str = $("#DropDownList1 option:selected").val() +
                " " +
                $("#DropDownList1 option:selected").text();

                $.ajax({
                    type: "POST",
                    url: "0168-BootstrapModalsDropDownList.aspx/ReceiveData",
                    data: '{"postedData":"' + str + '"}',
                    contentType: "application/json; charset=utf-8",

                    success: function (data) {
                        // .NET 3.5 で追加された d パラメータの処置
                        if (data.hasOwnProperty('d')) {
                            data = data.d;
                        }
                        $('#result').text(data);
                    },

                    error: function (jqXHR, textStatus, errorThrown) {
                        $('#result').text('textStatus: ' + textStatus +
                       ', errorThrown: ' + errorThrown);
                    }
                });


            });
        });
    //]]>
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <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">
                    Modal Body&hellip;
                    <br />
                    <asp:DropDownList id="DropDownList1" 
                        runat="server">
                        <asp:ListItem Value="00" Text="Red" />
                        <asp:ListItem Value="01" Text="Green" />
                        <asp:ListItem Value="02" Text="Blue" />
                    </asp:DropDownList>
                    <div id="result"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

クライアントスクリプトで DropDownList の選択結果（選択された Value と Text）を取得し、それを jQuery.ajax でサーバーに送信します。

非同期でクライアントから送信された DropDownList の選択結果は、.aspx ページに静的メソッドを追加してそれで受け、そのメソッドでサーバー側での処置を済ませたあと、"ＸＸＸを処置しました。" という文字列を返しています。

クライアント側でその文字列を受け取ると、Modal の中の div 要素に表示するようにしています。

実行結果は以下の画像のようになります。

http://surferonwww.info/BlogEngine/image.axd?picture=2016%2f9%2fbootstrapmodal.jpg

投稿2016/10/01 07:27

編集2016/10/01 07:33

退会済みユーザー

総合スコア0

Qoo

2016/10/02 03:54

サンプルまでご提示頂きありがとうございます。とても参考になります。このような書き方は初めてみましたが、どても汎用性がありそうなので、ぜひ覚えたいと思います。ちなみに<script runat="server">はhtmlより上に書く必要があるとのことですがマスターページを使っている場合で個々のページごとに処理を行う場合などには向いていないということでしょうか。

退会済みユーザー

2016/10/02 04:39

何か勘違いされているような気がします。 jQuery.Ajax で POST されたデータを受けるためのメソッド（上の例ですと ReceiveData）をどこに書くかという話ですよね？それはマスターページを使っている・いないとは関係ないです。マスターページを使っていても、子のページにコードは書けます。その中に必要なメソッドを書けばいいです。それは「<script runat="server">はhtmlより上に書く必要がある」か・ないかとは関係ない話です。 ASP.NET Web Forms アプリには Web アプリケーションプロジェクトと Web サイトプロジェクトの 2 種類があることはご存知ですか？ Web アプリケーションプロジェクトと Web サイトプロジェクト https://msdn.microsoft.com/ja-jp/library/dd547590(v=vs.100).aspx Web サイトプロジェクトではコードは HTML も C#（または VB.NET）のソースも全て同一の .aspx ファイルに置けます（.aspx と .aspx.cs または .aspx.vb に分けることもできます）。上のサンプルは、Web サイトプロジェクトで、 HTML も C#（または VB.NET）のソースも全て同一の .aspx ファイルに置く場合の書き方です。最近は Web アプリケーションプロジェクトが主流のようですので、そういう書き方をご存じない人が多いようですが・・・

Qoo

2016/10/03 12:21

ありがとうございます！ちょっと奥が深そうなので折を見てトライしてみたいと思います！ありがとうございました！

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

ベストアンサー

DropDownListコントロールをUpdatePanelコントロールで囲んで部分更新するのはいかがでしょうか？

UpdatePanelコントロールならページ更新にならないので、ページが初期化されることがないので、ページ表示後に作られる擬似モーダルウィンドウは消えないと思いますが。

投稿2016/10/01 02:01

twck

総合スコア314

Qoo

2016/10/02 03:50

ありがとうございます。 UpdatePanelを組み込んだところ、やりたいことが実現できました。ありがとうございました。また、別スレッドで質問すべきか迷いましたが、可能であれば以下も教えていただけるとたすかります。 UpdatePanelにListViewを配置して、TriggersにListView内のボタンコントロールを設定したのですが、pdatePanel 'UpdatePanel2' のトリガー用の ID 'DeleteButton' のコントロールが見つかりませんでした。というエラーになってしまいます。 <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="削除" /> <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="編集" /> <Triggers> <asp:AsyncPostBackTrigger ControlID="DeleteButton" /> <asp:AsyncPostBackTrigger ControlID="EditButton" /> </Triggers>

twck

2016/10/03 00:46

ListView内で定義したコントロールは ListViewの状態によって表示されたりされなかったりしますよね？つまり ListView内のコントロールは動的に生成されているわけです。それに対して AsyncPostBackTriggerタグによる登録は静的な定義になるのでエラーが発生します。質問文のソースには ListView や UpdatePanel や ScriptManager が書かれてないのでよく分からないのですが、Page.Loadイベント辺りで、ListView内に DeleteButton が表示されるかどうか判定して、表示されるときのみ ScriptManager.RegisterAsyncPostBackControl で DeleteButton を登録すれば出来るのではないでしょうか？いや、もしかしたら UpdatePanel の UpdateModeプロパティや ChildrenAsTriggersプロパティ辺りを変えるだけで上手くいくかも。とにかく提示されているソースだけではよくわからないので、解決しなければ別スレッドで質問を上げて、もっと関連個所のソースを掲載した方がいいと思います。

Qoo

2016/10/03 12:23

なるほど、まだリストビューの出来ていないということですね。 DataBoundイベントなどのタイミングでAsyncPostBackTriggerも動的に追加する方向でトライしてみます！ありがとうございました！

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

あなたの回答