1

mvc3 にhrefリンクがある webgrid があります。

リンクがクリックされると、ポップアップウィンドウに表示したいサーバーからのいくつかのレコードで応答が返されます（そのリンクをクリックした後、コントローラーで新しいクエリを実行した後、ポップアップに表示されるよりもデータがサーバーから送信されます窓）。

しかし、私は新しいウィンドウを開きたくありません。同じブラウザページのポップアップで開きたいです。

彼らがjQueryまたはAJAXを使用したかどうかはわかりませんが、同じ機能を実装したいと考えています。

これを達成するのを手伝ってください

前もって感謝します

4

1 に答える 1

1

jQueryこれを行うには、ポップアップウィンドウを提供する任意のプラグインを使用できます。fancybox、SimpleModel、Colorbox、jQuery UIダイアログ、thickboxなどのいくつかのオプションを利用できます。

これは、 jQueryUIダイアログで行う方法です。

ステップ1） jQueryとjQuery UIライブラリをページ（またはレイアウトページ）に含めます。CDNからのコピーを参照するのローカルコピーを参照できます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

ステップ2） グリッドでcss、リンクにクラス名を付けて、jQueryの選択に使用できるようにします。ここで私はCSSクラスを与えましたpopupLink

@Html.ActionLink("Scott", "Details", "Customers",
                new { @Id = "someId" }, new { @class = "popupLink" })

ステップ3） この特定のCSSクラスを持つリンクに対してjQueryUIダイアログ機能を有効にします

<script type="text/javascript">
$(function(){
    $(".popupLink").click(function (e) {
        var url = this.href;
        var dialog = $("#dialog");
        if ($("#dialog").length == 0) {
            dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
        }
        dialog.load(
            url,
            {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
            function (responseText, textStatus, XMLHttpRequest) {
                dialog.dialog({                       
                    close: function (event, ui) {                            
                        dialog.remove();
                    },
                    modal: true,                        
                    width: 460, resizable: false
                });
            }
        );           
        return false;           
    });
});
</script>

したがって、ユーザーがそれらのリンクをクリックするたびに、そのリンクのHREF属性値（そのアクションメソッド）が呼び出され、結果が取得され、ポップアップウィンドウに表示されます。

このリクエストを処理するためのアクションメソッドがあることを確認してください

public ActionResult Details(string Id)
{
  //do some dB query or whatever and return the result

  return View();  // can return the Model here to the view.

}
于 2012-07-13T13:32:03.487 に答える