ASP.NET MVC métodos de acción de JavaScript

Question

tengo código de ejemplo así:

<div class="cart"> 
     <a onclick="addToCart('@Model.productId');" class="button"><span>Add to Cart</span></a> 
</div> 
<div class="wishlist"> 
     <a onclick="addToWishList('@Model.productId');">Add to Wish List</a> 
</div> 
<div class="compare"> 
     <a onclick="addToCompare('@Model.productId');">Add to Compare</a> 
</div>  

¿Cómo puedo escribir código JavaScript para llamar al método de acción del controlador?

Answer 1

Uso jQuery Ajax:

function AddToCart(id) 
{ 
    $.ajax({ 
     url: 'urlToController', 
     data: { id: id } 
    }).done(function() { 
     alert('Added'); 
    }); 
} 

http://api.jquery.com/jQuery.ajax/

Answer 2

Si desea llamar a una acción de JavaScript, una forma es la de insertar el código JavaScript, dentro de la vista (.cshtml archivo por ejemplo), y luego, utilizar la maquinilla de afeitar, para crear una dirección URL de esa acción:

$(function(){ 
    $('#sampleDiv').click(function(){ 
     /* 
     While this code is JavaScript, but because it's embedded inside 
     a cshtml file, we can use Razor, and create the URL of the action 

     Don't forget to add '' around the url because it has to become a  
     valid string in the final webpage 
     */ 

     var url = '@Url.Action("ActionName", "Controller")'; 
    }); 
}); 

Answer 3

Usted está llamando el método addToCart y pasando la identificación del producto. Ahora puede usar jQuery ajax para pasar esos datos a su método de acción del lado del servidor.d

jQuery post es la versión corta de jQuery ajax.

function addToCart(id) 
{ 
    $.post('@Url.Action("Add","Cart")',{id:id } function(data) { 
    //do whatever with the result. 
    }); 
} 

Si desea más opciones como las devoluciones de llamada de éxito y gestión de errores, usar jQuery Ajax,

function addToCart(id) 
{ 
    $.ajax({ 
    url: '@Url.Action("Add","Cart")', 
    data: { id: id }, 
    success: function(data){ 
    //call is successfully completed and we got result in data 
    }, 
    error:function (xhr, ajaxOptions, thrownError){ 
        //some errror, some show err msg to user and log the error 
        alert(xhr.responseText); 

       }  
    }); 
} 

Al realizar llamadas ajax, recomiendo encarecidamente el uso del método de ayuda HTML, como Url.Action para generar la trayectoria a tus métodos de acción.

Esto funcionará si su código está en una vista razor porque Url.Action se ejecutará por razor en el lado del servidor y esa expresión C# se reemplazará con la ruta relativa correcta. Pero si está utilizando su código jQuery en su archivo js externo, puede considerar el enfoque mencionado en este answer.

Answer 4

Si no necesita mucha personalización y busca la sencillez, puede hacerlo con la función incorporada - AjaxExtensions.ActionLink method.

<div class="cart"> 
     @Ajax.ActionLink("Add To Cart", "AddToCart", new { productId = Model.productId }, new AjaxOptions() { HttpMethod = "Post" }); 
</div> 

Ese vínculo MSDN es lectura obligada para todos los posibles sobrecargas de este método y los parámetros de AjaxOptions class. En realidad, se puede utilizar la confirmación, el método de cambio de http, establecer onSuccess y onFailure clientes guiones y así sucesivamente

Answer 5

Puede configurar su element con

value="@model.productId"

y

onclick= addToWishList(this.value);

Answer 6

Puede simplemente llamar a Método de acción mediante el uso de Javascript como se muestra a continuación:

var id = model.Id; //if you want to pass an Id parameter 
window.location.href = '@Url.Action("Action", "Controller")/' + id; 

Espero que esto ayude ...

Answer 7

Javascript Function 

function AddToCart(id) { 
$.ajax({ 
    url: '@Url.Action("AddToCart", "ControllerName")', 
    type: 'GET', 
    dataType: 'json', 
    cache: false, 
    data: { 'id': id }, 
    success: function (results) { 
     alert(results) 
    }, 
    error: function() { 
    alert('Error occured'); 
    } 
    }); 
    } 

Controller Method to call 

[HttpGet] 
    public JsonResult AddToCart(string id) 
    { 
    string newId = id; 
    return Json(newId, JsonRequestBehavior.AllowGet); 
    } 

Answer 8

simplemente puede añadir esto cuando se está utilizando mismo controlador para redirigir

var url = "YourActionName?parameterName=" + parameterValue; 
window.location.href = url;