Loading an ASP.NET MVC Page Using AJAX

Question

I have this situation:

A page with an accordion with 2 tabs, one has a list of payment methods, and the second has a summary of order with ordinal lines, amounts and totals (displayed as a partial view). The choice of payment method leads to a recount of the results of orders, adding additional costs, etc.

What is the recommended way to display a new set of orders after choosing a payment method using AJAX?

Making an AJAX call and getting all new amounts, sequence numbers, etc. and setting these values ​​using JS seems inefficient to me. The ideal situation would be if I could make an AJAX call with the selected payment method, and this call will return HTML, which I can use to replace the old summary report.

Is it wrong to display a partial HTML view on the server and return it using JSON? What is best for this situation?

Answer 1

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

Then you can do it with jquery:

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

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

First you can do $('targetelement').html(''); before adding a response to the target element.

Update

Or better yet, use .load response.

Answer 2

I have an example:

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); }