将JialResult ActionMethod中的PartialView返回到ajax帖子并将PartialView显示为Modal弹出窗口

时间:2013-04-11 22:00:08

标签: asp.net-mvc json jquery post partial-views

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

'MyRegistrationView'上有注册表格,下面提到了表格提交按钮上的ajax邮件调用。

 $.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”的Controller。

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

}

现在

  1. 我怎样才能找回'_ShowSuccessfulModalPartial'的'内容' ajax的'成功'功能,并表明当Modal弹出它 相同的注册页面。
  2. 如果我想将其返回/重定向到其他视图,我该怎么办呢 如果我有JsonResult作为我的ActionMethod的返回类型。
  3. 如何从注册流程发回ModalErrors 在我看来并在ValidationSummary下显示它们。
  4. (注意:如果我不使用JsonResult作为返回类型,我会得到ajax'parseerror'意外的令牌<)

1 个答案:

答案 0 :(得分:2)

您可以返回部分视图而不是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
            }
        });

希望这会有所帮助。