MVC with Razor: how to refresh partial page on click?

Question

This project uses MVC3 and Razor. We have a busy page, and the data is coming from a mainframe database via WCF services, so we want to limit what gets loaded at one time. Basic data is loaded on page load, but then there will be a few divs for additional data. We use @Html.Partial(pagename) to render a partial page in the div. This part of the ViewModel will initially be empty, so no data will display.

We want a user click to go to a Controller method, call another service, and fill in a section of the ViewModel with more data. Then refresh this section of the page with the data.

How do I refresh HTML.Partial(pagename) on a user click? I've tried an Ajax call to the appropriate URL, but it doesn't refresh the display.

Edit: here is my code, trying to use the suggestions from Darin Dimitrov below.

My ViewModel:

namespace Project.ViewModel
{
    public class AllData
    {
        public string Id { get; set; }
        public BasicData Basics { get; set; }
        public ContactInfo ContactPoints { get; set; } //mainframe data
    }
}

The Main page:

@model Project.ViewModel.AllData

 <script type="text/javascript">
    $(function () {
        $('#loadFromMainFrame').click(function (e) {
            var url = $(this).data(url);
            $('#MainframeContents').load(url);
        });
    });
</script>

<div id="basics">
    <div>
       @Html.DisplayFor(model => model.Basics.FirstName)
    </div>

    <div>
         @Html.DisplayFor(model => model.Basics.LastName)
    </div>     
</div>

<button id="loadFromMainFrame" data-url="@Url.Action("GetFromMainFrame")">Load from mainframe</button>
<div id="MainframeContents">
    <p>Contact Info will go here</p>
</div>

The Controller:

    public ActionResult Details(string id)
    {
        BasicData basicdata = new BasicData();
        basicdata.FirstName = "Arya";
        basicdata.LastName = "Stark";
        AllData allData = new AllData();
        allData.Basics = basicdata;
        return View(allData);
    }

    public ActionResult GetFromMainframe()
    {
        AllData allData = new AllData();
        allData.ContactPoints = …getting data from mainframe
        return PartialView("ContactsSection", allData);
    }

The Details page renders. Clicking the button executes the script, but the controller is not hit. What am I doing wrong?

I’ll also post some other attempts I’ve made…

Answer 1

I've tried an Ajax call to the appropriate URL, but it doesn't refresh the display.

That's exactly what you should have to use. Let's suppose that you have the following view:

<div id="mainframeContents"></div>

<button id="loadFromMainFrame" data-url="@Url.Action("GetFromMainFrame")">Load from mainframe</button>

and then you could write the following script which will send an AJAX request to the corresponding controller action when the button is clicked and load the content in the div:

$(function() {
    $('#loadFromMainFrame').click(function(e) {
        e.preventdefault();
        var url = $(this).data("url");
        $('#mainframeContents').load(url);
    });
});

and now all that's left of course is to have the corresponding controller action that will load the data from the mainframe and render a partial view:

public ActionResult GetFromMainFrame()
{
    SomeModel model = ... go hit the mainframe to retrieve the model using a webservice or whatever you are using to hit it
    return PartialView("_SomePartial", model);
}