Retrieve data from partial view on post request via jQuery

Question

I have a view that dynamically updates depending on user input - here's how it works:

View is rendered with initial data from controller populated with a partial view
When something is clicked, I use retrieve a partial view from an ActionResult from the controller and replace existing data with jQuery
I need a string from the controller for the main view, so I make another call to the controller and retrieve a string.

I want to know if there's a way to get the string I need with the partial view instead of making a separate controller call.

Initial Data:

<!-- This needs to change when the partial is replaced, but it's heavier html
     and I don't want to include it in the partial to minimize server calls/data -->
<div class="Location">&nbsp;</div>
<div class="myContainingDiv">
    <!-- This content gets updated -->
    @Html.Partial("_MyPartial");
</div>

Partial View:

<div class="something">Model.something</div>

Controller Method (Partial View):

[HttpGet]
public ActionResult _MyPartial(string param1)
{
    MyModel model = new MyModel();
    // This is dynamic and what I need to get in my main view from the partial view
    model.something = "Hi";
    return PartialView(model);
}

Controller Method (Return desired string):

public string GetHiString(string param1)
{
    return "Hi";
}

JavaScript (Update partial view):

    $.post('/Home/_MyPartial', { 'param1': 'Hi' }, function (result) {
        $('.something').replaceWith(result);

        getOtherThing('Hi');
    });

JavaScript (getOtherThing):

    $.post('/Home/_GetHiString', { 'param1': 'Hi' }, function (result) {
        $('.Location').replaceWith(result);
    });

OK, i think that's everything.

Basically I only want to hit the controller once per call. Including the div in the partial view is not an ideal option.

I hit the controller the second time from my main view to get data that can easily be created from an object within the first method and sent down to the partial view.

So, besides including <div class="Location"> in my partial view, is there a way to send the extra information I need to the partial view and retrieve it dynamically from my main view (via JavaScript). Or is there a way to return additional data when I call _MyPartial from my JavaScript?

This is really the last simplification I want to make and i'd really appreciate the help!

CAbbott CAbbott · Accepted Answer · 2012-03-29T18:09:04

You could modify your partial view _MyPartial and it's model to include something hidden within it that you could extract using jQuery:

Partial View

<div class="something">Model.something
    <input class="somethingElse" type="hidden" value="@(Model.somethingElse)" />
</div>

Controller Method (Partial View):

[HttpGet]
public ActionResult _MyPartial(string param1)
{
    MyModel model = new MyModel();
    // This is dynamic and what I need to get in my main view from the partial view
    model.something = "Hi";
    model.somethingElse = GetHiString(param1);
    return PartialView(model);
}

JavaScript (Update partial view)

$.post('/Home/_MyPartial', { 'param1': 'Hi' }, function (result) {
    $('.something').replaceWith(result);

    $('.Location').html($('.somethingElse').val());

});

Retrieve data from partial view on post request via jQuery

1 Answers