Displaying partial view after loading it via Ajax in MVC

Question

I want to load data in the background while the user is on the page. After the data is loaded, I want to display it by using a partial View. So I wrote this:

var serviceURL = '/Vm/GetInformation';
$.ajax({
    type: "POST",
    url: serviceURL,
    data: param = "",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: { "id": id },
    //success: resetPartial()
});

In my controller:

public ActionResult GetInformation()
{
    myCode...
    return PartialView("_List", Costumer);
}

So what is the final step to display that _List partial View in my main view which is now filled with data about costumers (where my ajax function is)

Thank you

@Brian Mains answer should help you, but the way I load partial view is with the load() method from jquery. What you could use is your url as string as you are using it, and then specify a div to load your partial view $("#divToLoad").load(url); where url is your url string to the server — Jorge F
– Jorge F, Commented Dec 8, 2014 at 16:29

Brian Mains · Accepted Answer · 2014-12-08 13:26:41Z

1

All you need to do is replace the old content:

success: function(d) {
 //d should be a string that's the HTML markup
 $("#someparentelementthatsurroundsinnercontent").html(d);
}

Or you can use any of the methods to append content if you want to append to the end of the list. JQuery gives quite a few options to do this.

answered Dec 8, 2014 at 13:26

Brian Mains

50.8k35 gold badges155 silver badges260 bronze badges

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

2 Comments

user2877820 Over a year ago

So how should the HTML markup exactly look? I wrote something like var d = 'Html.RenderPartial("~/Views/Shared/_List.cshtml", Model);';

Brian Mains Over a year ago

Ummm where is d involved? You don't need to manually create d, it's the return parameter from the success callback... Plus, that statement can only evaluate on initial rendering, which is not what you want.

user3263194 · Accepted Answer · 2014-12-09 09:27:43Z

0

Your controller action expects no parameter. So you can remove the below lines from your ajax call.

data: param = "",
data: { "id": id },

If you really have any parameter id in your controller action, use it like

data: { id:id }

Have a div in the html to hold the content of the partial view. In the success, use like below:

success : function(result) {
  $("#partialViewHolder").html(result);
}

answered Dec 9, 2014 at 9:27

user3263194

4537 silver badges20 bronze badges

Collectives™ on Stack Overflow

Displaying partial view after loading it via Ajax in MVC

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related