将 PartialView 从 JsonResult ActionMethod 返回到 ajax 帖子并将该 PartialView 显示为模态弹出窗口

Question

我正在尝试将 PartialView 或任何其他视图从操作方法返回到 ajax 帖子。我想将 ParitalView 的内容显示为来自 ajax 成功函数的 Jquery Modal 弹出窗口或任何可能的方式。

带有注册表的“MyRegistrationView”在下面提到了表单提交按钮上的 ajax post call。

 $.ajax({
            url: url,            //http://localhost/MyRegistration/RegisterUser
            type: 'POST',
            dataType: 'json',
            data: ko.toJSON(RegistrationInfoModel),
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                //Do something
            },
            error: function (request, status, error) {
                //Do something
            }
        });

上面的 ajax 调用转到我的名为“MyRegistrationController”的控制器，操作方法如下。

[HttpPost]
public JsonResult RegisterUser(RegistrationInfo model)
{
   //Register User
   ....
  if(successful)
  {
     return Json(new { data = PartialView("_ShowSuccessfulModalPartial") });   
  }

}

现在

1. 我怎样才能取回“_ShowSuccessfulModalPartial”的“内容” ajax 的“成功”功能并显示为 Modal Pop up on that 相同的注册页面。
2. 如果我想将其返回/重定向到其他视图，我该怎么做 如果我将 JsonResult 作为我的 ActionMethod 的返回类型。
3. 如何将注册过程中的 ModalErrors 发回 在我看来，并在 ValidationSummary 下显示它们。

（注意：如果我不使用 JsonResult 作为返回类型，我会得到 ajax 'parseerror' Unexpected token

Answer 1

您可以返回部分视图而不是 json。

在您的主视图中，您应该像这样添加对话框 html（假设您使用的是 jQueryUI）：

<div id="dialog-confirm" title="Your title">    
    <div id="dialog-content"></div>
</div>

确保初始化对话框。

$(document).ready(function() {
    $("#dialog-confirm").dialog();
});

在控制器中你可能需要返回一个局部视图：

[HttpPost]
public virtual ActionResult RegisterUser(RegistrationInfo model)
{
    var model = //Method to get a ViewModel for the partial view in case it's needed. 
    return PartialView("PartialViewName", model);
}

然后，当您执行 ajax 请求时，将部分视图附加到对话框中，然后显示它。

 $.ajax({
            url: url,          
            type: 'POST',
            dataType: 'json',
            data: ko.toJSON(RegistrationInfoModel),
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                $("#dialog-content").empty();
                $("#dialog-content").html(result);
                $("#dialog-confirm").dialog("open");
            },
            error: function (request, status, error) {
                //Do something
            }
        });

希望这会有所帮助。