在mvc4模式中显示视图作为弹出窗口

I've a view rendered with Razor engine and I need to open at a button click a popup to insert a new user (i've already got my view/controller for the InsertUser)

我有一个使用Razor引擎渲染的视图，我需要打开一个按钮，单击一个弹出窗口以插入一个新用户（我已经获得了InsertUser的视图/控制器）

I wish to know what the correct workflow to perform this, if I open it with jQuery how do I tell after the insert to close the view? my controller doesn't know it's on a popup and I've not seen any CloseResult as ActionResult... I'm using also KendoUI, I've seen it has the Window control....this as well won't help me on this.....what's best to use for opening a popup?

我想知道执行此操作的正确工作流程，如果我用jQuery打开它，如何在插入后关闭视图？我的控制器不知道它是在弹出窗口上我没有看到任何CloseResult作为ActionResult ...我也使用KendoUI，我已经看到它有Window控件....这也无济于事我在这......打开弹出窗口最好用什么？

Thanks

谢谢

1 个解决方案

#1

Try reading this article on progressive enhancement, while you might not want to do it progressivly the article contains all the little recipes you will need to do it.

尝试阅读关于渐进增强的这篇文章，虽然你可能不想进步，但文章包含了你需要做的所有小方法。

Your get action would be like this:

你的行动将是这样的：

[HttpGet]
public ActionResult ContactUs()
{
     return PartialView("_ContactUs");
}

Your post like this:

你的帖子是这样的：

[HttpPost]
public ActionResult ContactUs(ContactUsInput input)
{ 
    if (!ModelState.IsValid)
    { 
            return PartialView("_ContactUs", input);
    }       

    return PartialView("_ThanksForFeedback", input);
}

The front end something like this:

前端是这样的：

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

<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
                })
                .load(this.href);
        });

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

<a class="openDialog" data-dialog-id="emailDialog"
 data-dialog-title="Contact Us" href="/Home/ContactUs">Contact Us</a>

#1