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.
}