none
Ajaxでのフォーム送信 RRS feed

  • 質問

  • はじめまして。よろしくお願いいたします。

    現在visualstudio2012、MVC3で開発をしていますが表題の件で悩んでおります。

    タブ切り替えでそれぞれに検索ボタンがついているページを作成しているのですが

    検索結果やwebgridでの並び順をそれぞれのタブで保持しなければならないので

    Ajaxで解決できないものかと思い色々と検索しているのですがよくわかりません。

    「実現したい事」

    それぞれのタブ状態の保持

    ・フォーム送信をAjaxで行う。

    ・結果をwebgridに表示する。

    「現在の状態」

    ・View

    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

    @using (Ajax.BeginForm("Action", "aa", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "grid" }))

    var grid = new WebGrid(
             source: Model.DbList, ajaxUpdateContainerId: "grid");

    <div id="grid">
        
        @grid.GetHtml(
            columns: grid.Columns(

    </div>

    ・Controller

    ボタン押下でそれぞれのメソッドに飛ばす。

    [HttpParamAction]
    [HttpPost]
            public ActionResult Kensaku(aaModel model){

     

    if (Request.IsAjaxRequest())
                    {

    検索処理

    }

    return View("aa",model);

    }

       

    public class HttpParamActionAttribute : ActionNameSelectorAttribute
    {
            public override bool IsValidName(ControllerContext controllerContext, string actionName, MethodInfo methodInfo)
            {
                if (actionName.Equals(methodInfo.Name, StringComparison.InvariantCultureIgnoreCase))
                    return true;

                if (!actionName.Equals("Action", StringComparison.InvariantCultureIgnoreCase))
                    return false;

                var request = controllerContext.RequestContext.HttpContext.Request;
                return request[methodInfo.Name] != null;
            }
        }

    という感じなのですが検索ボタン押下でTargetIdで指定したdiv(webグリッドをかこんだdiv)に

    ページそのものがヘッダーからもう一つ描画されてしまいます。

    どのようにすればwebgrid部分だけに適用できるのでしょうか?

    経験が浅いためわかりにくい質問で申し訳ありませんがよろしくお願いいたします。

    2014年4月30日 5:41

すべての返信

  • > タブ切り替えでそれぞれに検索ボタンがついているページを作成しているのですが
    > 検索結果やwebgridでの並び順をそれぞれのタブで保持しなければならないので

    書いてあることからは全体的にどうなっているのか、何をしたいのかをイメージするのが難しいです。

    タブとは何ですか? jQuery UI の Tabs のようなものですか? そのようなタブが複数あって、各タブごとに WebGrid と検索ボタンが配置してあるのですか? 「検索結果やwebgridでの並び順をそれぞれのタブで保持」というのは、ボタンが押されたタブ内の WebGrid のみ Ajax を使って部分更新したいということですか?

    タブを使って複雑なことをする以前に、Ajax を使って期待通り部分更新できないという問題があるようですが、それならもっと単純に、タブなどは使わないで、WebGrid と検索ボタン一つだけのページで部分更新を実現できてから次のステップに進んではいかがですか。(ひょっとして、今はそのための質問をしている?)


    • 編集済み SurferOnWww 2014年4月30日 7:38 誤字訂正
    2014年4月30日 7:37
  • ご返信有難うございます。

    タブというのはjQuery UI の Tabsのようなものです。

    タブが複数で各タブ毎にWebGridと検索ボタンが配置してあります。

     >ボタンが押されたタブ内の WebGrid のみ Ajax を使って部分更新したい

    まさにこれを実現したいのです。

    今はまず片側のタブだけを部分更新すべくいろいろ試しているのですが、上手くいっていません。

    コントローラーで取得したデータをどのようにWebGridだけに適用するのかがよくわからず…。


    ご教示いただければありがたいです。

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

    2014年4月30日 8:02
  • 自分で検証したわけではないのでイマイチ自信はありませんが、以下のページの「AJAX: クライアント側の変更」のセクションが参考になりませんか。

    ASP.NET MVC で WebGrid を最大限に活用する
    http://msdn.microsoft.com/ja-jp/magazine/hh288075.aspx

    2014年4月30日 9:04
  • ご回答有難うございます。

    該当のページは拝見したことがあるんですが

    ajaxUpdateContainerId: "grid"を設定すると

    WebGridのソートやページングはAjaxで実行できます。

    ただ他のタブの検索ボタンを押されてしまうとクリアされるため

    フォームをAjax送信してWebGridへ表示したいのですが表示の時点で悩んでいます。

    該当ページを応用すれば可能なのでしょうか。

    勘違い等ありましたらご指摘よろしくお願いいたします。

    2014年4月30日 10:22
  • > ajaxUpdateContainerId: "grid"を設定すると
    > WebGridのソートやページングはAjaxで実行できます。

    それをすでに試していたのであれば、そういう重要な情報は後出しにしないで、最初に書いていただくようお願いします。

    > ただ他のタブの検索ボタンを押されてしまうとクリアされるため
    > フォームをAjax送信してWebGridへ表示したいのですが表示の時点で悩んでいます。

    先に「タブなどは使わないで、WebGrid と検索ボタン一つだけのページで部分更新を実現できてから次のステップに進んではいかがですか。」と書きましたが、それはクリアできているのでしょうか?

    検索ボタンでどのように検索条件を取得して、どのように検索をかけているか、タブをどのように実装したか、各タブに検索ボタンと WebGrid を実装したそうですが具体的にどのようになっているか、自タブと他タブの部分更新の仕方がどうなっているか等の詳しい情報を提供できますか?

    それから、最初にお願いすべきでしたが、質問にはご自分の環境(OS, .NET, IIS のバージョン、DB サーバー使っているならそれは何か、ASP.NET 開発サーバー or IIS Express or IIS のどれを使っているか、使っているブラウザは何かなどの情報)を書くようにしてください。
     
    面倒なことを言うと思うかもしれませんが、タイムリーに的を得た回答が得やすくなるということで、質問者さんにメリットのあることと思います。


    • 編集済み SurferOnWww 2014年5月1日 1:06 誤字訂正
    2014年5月1日 1:00
  • ご返信有難うございます。返信が遅くなりすみません。

    > ajaxUpdateContainerId: "grid"を設定すると
    > WebGridのソートやページングはAjaxで実行できます。

    それ以前の段階(WebGridへの表示)で悩んでいたのではぶいてしまいました。

    お手間をおかけして申し訳ありません。

    結果として部分ビューを新たに作り

    return PartialViewで返すことで両タブとも実現できました。

    まだ問題はありそうですがとりあえず解決しました。

    ご指摘の件以後気を付けます。

    貴重なお時間を割いていただき有難うございました。

    2014年5月1日 17:05
  • > 結果として部分ビューを新たに作り
    > return PartialViewで返すことで両タブとも実現できました。

    ajaxUpdateContainerId パラメーターを使う方法に加えて、部分ビューを使うやり方は、先の私のレスで紹介した MSDN マガジンの記事に書いてあって、サンプルコードも提供されているのですが、それではやりたいことが実現できなかったのでしょうか?

    その記事の「AJAX: サーバー側の変更」のセクションです。


    【追伸】

    ajaxUpdateContainerId パラメーターを使う方法でも実現できると思います。例えば、紹介した MSDN ライブラリのサンプルコードの StandardAjax.cshtml のページで、以下のようなコードを追加してやれば、[Reload] ボタンクリックで初期画面の table がリロードされるはずです。その応用で可能だと思います。


    <input type="button" value="Reload" 
        onclick="$('#grid').load('/Product/StandardAjax #grid');" />

    ただ、ブラウザによるキャッシュには注意が必要で、キャッシュされたページの table 部分がリロードされることでうまく行かないことがあるかもしれませんが。

    • 編集済み SurferOnWww 2014年5月2日 3:05 「[Reload] ボタンクリックで」を追加
    2014年5月2日 2:04