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