Extracting data from a partial view on demand after jQuery

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

  • The view is rendered with raw data from a controller filled with a partial view
  • When something is clicked I am using fetching partial view from ActionResult from controller and replacing existing data with jQuery
  • I need a string from the controller for the main view, so I make another controller call and retrieve the string.

I want to know if there is a way to get the desired partial view string instead of making a separate call to the controller.

Initial data:

<!-- This needs to change when the partial is replaced, but it 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 (partial view update):

    $.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 all.

Basically I only want to dispatch the controller once per call. Including a div in a partial view is not ideal.

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

So, besides the inclusion <div class="Location">

in my partial view, there is a way to send the additional information I need for the partial view and get 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 am very grateful for the help!

+3


source to share


1 answer


You can change your partial view _MyPartial

and it will include something hidden inside it that you could extract with 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 (partial view update)

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

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

});

      

+4


source







All Articles