MVC return both json and html response

Question

Hi I have not found a sufficient answer for my problem. I need to return both json data and html from action result invoked by ajax.

$if (Request.IsAjaxRequest())
        {
            return Json(new
                            {
                                val1= Model.val1,
                                val2 = Model.val2,
                                val3= Model.val3,
                                Html = PartialView("_SearchResult", Model)
                            });
        }

What do I have to do in ajax success part? This is bad try:

$.ajax({
        type: "post",
        dataType: "json",
        url: actionUrl,
        data: {
            specs: selections,
            params: parameters
        },
        success: function (response) {
            $("#maincontent").html( response.html);
            val1= response.val1;
            val2= response.val2;
            val3= response.val3;
        },
        error: function (xHR) {
            alert(xHR.status);
        }
    });

Val1,2,3 are vars which I need to know because the model data are changing and I need to know this changed values. If you knew better solution how to return back values than json, let me know. But I need to return response html as well to update part of page. Thank you for helping me.

moribvndvs · Accepted Answer · 2012-04-19 09:54:08Z

1

PartialView returns an ActionResult and not the HTML of the partial view as a string as you are hoping. What you need to do is execute the ActionResult to get the HTML it would render.

There are a few ways to do this, but one quick and dirty way is to follow this article.

As far as a better way to do what you're doing, it depends on what val1-3 are. Are they DOM elements, locally or globally scoped variables? You could have your PartialView emit javascript that calls some function to set the values of val1-3. Something like:

public ActionResult Search()
{
    // ... 
    return PartialView("_SearchResult", Model);
}

The _SearchResult partial view:

<!-- your html here -->
<script type="text/javascript">
   UpdateVals(@Model.val1, @Model.val2, @Model.val3);
</script>

Where UpdateVals is some function sitting in the page that makes the AJAX call.

answered Apr 19, 2012 at 9:54

moribvndvs

42.5k12 gold badges138 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Muff Over a year ago

So, I should call another ActionResult when using UpdateVals() function to update these model properties? The reason I am asking this whole question is that the model is not updating it's values on the client side, because it's not probably an object any more. And I need to update it's values somehow. Are you sure that I can update models values on the client side as you suggesting?

moribvndvs Over a year ago

I think I'll need to see the original views and the the relevant parts of the action(s) to understand and give you a clearer answer. I'm basically seeing it like this: You have an index page or something similar, with your search form. This has a bunch of JS which includes your AJAX call. This hits your Search action, returning your search results HTML as well as these Model.val1-3. I don't know what val1-3 is so it's hard to see what you're trying to do.

Muff Over a year ago

Basicaly I'am returning partial view with model. And I need a way to access changed values of the model after I return it by ajax. My problem is that I still see the old values of the model when I accessing them by jquery until I reload whole page(not using ajax). Is this normal behavior?

moribvndvs Over a year ago

how/where are you storing the the model in the view? do you have a JSON copy of the model on the client or something?

Muff Over a year ago

In the view I just use @Model I don't store the whole model with json at the moment(). Now I know that json is good way to get data from response but I can't realize how can I return html and updated model values(in json for example) at one time.

|

Collectives™ on Stack Overflow

MVC return both json and html response

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related