net mvc from asp javascript asp.net-mvc asp.net-mvc-3 razor

from - Llamando a ASP.NET MVC Action Methods desde JavaScript



mvc javascript c# (8)

Tengo un código de ejemplo como este:

<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?


Simplemente puede llamar a un método de acción usando 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...


Está llamando al 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 devolución de llamada exitosa y manejo de errores, use 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 hacer llamadas ajax, recomiendo utilizar el método Html helper, como Url.Action para generar la ruta a sus 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 # será reemplazada por la ruta relativa correcta. Pero si está utilizando su código jQuery en su archivo js externo, puede considerar el enfoque mencionado en esta answer .


Puedes configurar tu element con

value="@model.productId"

y

onclick= addToWishList(this.value);


Si desea invocar una acción desde su JavaScript, una forma es insertar su código JavaScript, dentro de su vista (archivo .cshtml , por ejemplo), y luego, usar Razor, para crear una 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")''; }); });


Si no necesita mucha personalización y busca la simplicidad, puede hacerlo con un método integrado: método AjaxExtensions.ActionLink .

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

Ese enlace de MSDN es obligatorio para todas las posibles sobrecargas de este método y los parámetros de la clase AjaxOptions . En realidad, puede usar la confirmación, cambiar el método http, establecer scripts de clientes OnSuccess y OnFailure, etc.


Simplemente puede agregar esto cuando esté usando el mismo controlador para redirigir

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


Use jQuery ajax:

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

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


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