ASP.NET MVC página de carga con AJAX

Question

Tengo esta situación:

Una página con un acordeón con 2 pestañas, uno tiene una lista de PaymentMethods, el segundo tiene un resumen de la orden con OrderLines, cantidades y totales (representado como vista parcial). Al seleccionar un método de pago, se pueden volver a calcular los totales de los pedidos, pueden aplicarse costos adicionales, etc.

¿Cuál es la forma recomendada de mostrar el nuevo resumen de pedidos después de seleccionar un método de pago, utilizando AJAX?

Hacer una llamada AJAX y obtener todos los nuevos importes, líneas de pedido, etc. y establecer estos valores usando JS me parece ineficaz. La situación ideal sería si pudiera hacer una llamada AJAX con el método de pago seleccionado y esta llamada devolvería el HTML que puedo usar para reemplazar el viejo resumen.

¿Es malo hacer una vista parcial a HTML en el servidor y devolverlo usando JSON? ¿Cuál es la mejor práctica para esta situación?

Answer 1

En su método de acción devuelve un PartialView([view name]).

A continuación, puede hacer esto con jQuery:

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

Dónde 'targetelement' es un selector para el elemento en el que desea inyectar el contenido.

Es posible que desee hacer $('targetelement').html(''); primero antes de agregar la respuesta al elemento de destino.

actualización

O, mejor aún, utilizar .load de la respuesta de Rick.

Answer 2

Tengo un ejemplo aquí:

Javascript

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

Acción controlador

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

    return PartialView("AwesomePartialView",dto); 
}