CODEWITHSUNDEEP
asp.net-mvcjsonjquerypostpartial-views
user2232861
user2232861

Reputation: 283

Return PartialView from JsonResult ActionMethod back to ajax post and display that PartialView as a Modal pop-up

I am trying to return back PartialView or any other view from action method back to ajax post. I wanted to display the contents ParitalView as a Jquery Modal pop-up from ajax success function or whichever way its possible.

'MyRegistrationView' with Registration Form on it has below mentioned ajax post call on form submit button.

 $.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
            }
        });

The above ajax call goes to my Controller named " MyRegistrationController" with the action method as below.

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

}

Now

  1. how can i get back the 'content' of '_ShowSuccessfulModalPartial' in 'Success' function of ajax and show that as the Modal Pop up on that same registration page.
  2. If i want to return/redirect it to some other view how can i do it if i have JsonResult as return type of my ActionMethod.
  3. How I can send back the ModalErrors from registration process back to my view and show them under ValidationSummary.

(Note: If I don't use JsonResult as return type i get ajax 'parseerror' Unexpected token <)

Upvotes: 1

Views: 6206

Answers (1)

lopezbertoni
lopezbertoni

Reputation: 3641

You can return a partial view instead of a json.

In your main view you shoudl add the dialog html like this (assumming you're using jQueryUI):

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

Make sure you initialize the dialog.

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

In the controller you might need to return a partial view:

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

Then when you do your ajax request, you append the partial view to the dialog and then show it.

 $.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
            }
        });

Hope this helps.

Upvotes: 2

Related Questions