asp.net-mvc - 以 mvc4 模式将视图显示为弹出窗口

Question

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

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

谢谢

Answer 1

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

您的 get 操作将是这样的：

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

你的帖子是这样的：

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

    return PartialView("_ThanksForFeedback", input);
}

前端是这样的：

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