0

MVC3 で popView モデルを作成したい:

これは私のアクションリンクです:

 @Html.ActionLink("Edit", "Edit", "Category", new { categoryId = Item.Id }, null)

また、これは関連する actionresult!

 public ActionResult Edit(Guid categoryId)
        {
            var category = _categoryService.GetCategory(categoryId);
            return View(category);
        }

        [HttpPost]
        public ActionResult Edit(CategoryViewModel categoryViewModel)
        {
            if(ModelState.IsValid)
            {
                _categoryService.UpdateCategory(categoryViewModel.Id);
            }
            return View();
        }

このページを (ポップアップのように) 開きたいのですが、どうすればいいですか???thanks

4

2 に答える 2

0

アクションリンクを次のように変更します。

@Html.ActionLink("Edit", "Edit", "Category", new { categoryId = Item.Id }, new { target="_blank" })
于 2013-02-17T16:24:17.970 に答える
0

このサンプルを使用してください。

<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~Content/themes/base/jquery.ui.all.css") rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
    </head>

次に、モーダル ポップアップが機能するために必要な jQuery コードを掘り下げてみましょう。

jQuery コード:

<script type="text/javascript">

$.ajaxSetup({ cache: false });

$(document).ready(function () {
    $(".openDialog").live("click", function (e) {
        e.preventDefault();

    $("<div></div>")
        .addClass("dialog")
        .attr("id", $(this)
        .attr("data-dialog-id"))
        .appendTo("body")
        .dialog({
        title: $(this).attr("data-dialog-title"),
        close: function () { $(this).remove(); },
        modal: true,
        height: 250,
        width: 400,
        left: 0

    })
    .load(this.href);
    });

    $(".close").live("click", function (e) {
        e.preventDefault();
        $(this).closest(".dialog").dialog("close");
    });
});
</script>

以下で定義されている ActionLink では、次の 3 つのプロパティを使用しています。

  • class– このリンクをクリックすると、上記の jQuery が実行されることを示します
  • data_dialog_id
  • data_dialog_title– jQueryモーダルポップアップのタイトルを表示するために使用されます

かみそりコード

@Html.ActionLink("Open Jquery Modal Popup", "About", "Home",null,new {
@class = "openDialog",
data_dialog_id = "aboutDialog",
data_dialog_title = "About Us"
})

以下は、ユーザーが上記の ActionLink をクリックしたときに呼び出される "Home" コントローラーの "About" アクションです。

コントローラ

public ActionResult About()
{
    return View();
}

以下は、上記の (About) アクションによって表示される About.cshtml ビューです。重複したマスター テンプレートが互いに表示されないように、レイアウトを null に設定したことに注意してください。

About.cshtml見る

@{
    ViewBag.Title = "About Us";
    Layout = null;
}


<h2>About</h2>
<p>
Hello, this is a modal jquery popup !
</p>
<p><a href="javascript:void(0);" class="close">Close this Window</a></p>
于 2013-02-17T16:24:36.100 に答える