ASP.NET MVC Load page with AJAX

Question

I have this situation:

A page with an accordion with 2 tabs, one has a list of paymentmethods, the second has a summary of the order with orderlines, amounts and totals (rendered as partialview). Selecting a paymentmethod causes the order totals to be recalculated, extra costs etc might apply.

What is the recommended way to display the new ordersummary after a paymentmethod is selected, using AJAX?

Doing an AJAX call and getting all the new amounts, orderlines, etc and setting these values using JS seems inefficient to me. Ideal situation would be if I could make an AJAX call with the selected payement method and this call would return the HTML which I can use to replace the old summary.

Is it bad to render a partialview to HTML on the server and return it using JSON? What is best practice for this situation?

Stephan Bauer · Accepted Answer · 2016-11-04 07:10:10Z

10

I have an example here:

Javascript

$("#divForPartialView").load("/HelloWorld/GetAwesomePartialView",
   { param1: "hello", param2: 22}, function () {
   //do other cool client side stuff
});

Controller Action

public ActionResult GetAwesomePartialView(string param1, int param2)
{
    //do some database magic
    CustomDTO dto = DAL.GetData(param1, param2);

    return PartialView("AwesomePartialView",dto);
}

edited Nov 4, 2016 at 7:10

Stephan Bauer

9,2665 gold badges39 silver badges61 bronze badges

answered Oct 5, 2011 at 13:37

rick schott

21.1k5 gold badges54 silver badges81 bronze badges

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

2 Comments

Mr.X Over a year ago

Is your link for sale?

Omid.Hanjani Over a year ago

also you can use '@Url.Action("GetAwesomePartialView", "HelloWorld")' instead of "/HelloWorld/GetAwesomePartialView"

Andras Zoltan · Accepted Answer · 2011-10-06 11:06:56Z

2

In your action method return a PartialView([view name]).

Then you can do this with jquery:

var req = $.ajax({
  type:"GET",//or "POST" or whatever
  url:"[action method url]"
  }).success(function(responseData){
    $('targetelement').append($(responseData));});

Where 'targetelement' is a selector for the element into which you want to inject the content.

You might want to do $('targetelement').html(''); first before appending the response to the target element.

Update

Or, better yet, use .load from Rick's answer.

edited Oct 6, 2011 at 11:06

answered Oct 5, 2011 at 13:40

Andras Zoltan

42.4k13 gold badges109 silver badges160 bronze badges

3 Comments

jaap Over a year ago

Doh I never realized you could just return a partialview! Thanks (to both)!

kubal5003 Over a year ago

Instead of using append you can use replaceWith or simply $("#element").load(...)

Andras Zoltan Over a year ago

yeah I noticed that from @rick's answer :) You learn something new every day.

Collectives™ on Stack Overflow

ASP.NET MVC Load page with AJAX

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related