Question

我想在MVC3中创建一个popView模型：

这是我的actionlink：

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

这也是相关的行动结果！

 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();
        }

我想打开这个页面（像popUp一样动作），我怎么能这样做？谢谢

Answer 1

将您的actionlink更改为：

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

Answer 2

使用此示例可能很有用：

<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"
})

以下是“Home”控制器的“关于”操作，当用户点击上述ActionLink时将调用该操作。

控制器

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

以下是About.cshtml视图，该视图将通过上述（About）操作显示。请注意，我已将布局设置为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>

MVC3中的PopUp视图

2 个答案: