Calling ASP.NET MVC metodi di azione da JavaScript

Question

Ho codice di esempio in questo modo:

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

Come posso scrivere codice JavaScript per chiamare il metodo azione di controllo?

Answer 1

utilizzare jQuery Ajax:

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

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

Answer 2

Se si desidera chiamare un'azione dalla JavaScript, un modo è quello di incorporare il codice JavaScript, all'interno della vostra vista (.cshtml di file, ad esempio), quindi, utilizzare Razor per creare un URL di tale azione:

$(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

Si sta chiamando il metodo addToCart e si passa l'id del prodotto. Ora puoi usare jQuery ajax per passare quei dati al tuo metodo di azione sul lato server.d

jQuery post è la versione breve di jQuery ajax.

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

Se volete più opzioni come callback di successo e la gestione degli errori, utilizzare 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); 

       }  
    }); 
} 

Quando si effettuano chiamate ajax, vi consiglio vivamente di utilizzare il metodo di supporto HTML come Url.Action per generare il percorso ai tuoi metodi di azione.

Questo funzionerà se il codice è in una vista del rasoio perché Url.Action verrà eseguito dal rasoio sul lato server e quell'espressione C# verrà sostituita con il percorso relativo corretto. Ma se stai usando il tuo codice jQuery nel tuo file js esterno, puoi considerare l'approccio menzionato in questo answer.

Answer 4

Se non avete bisogno di molta personalizzazione e cercate la semplicità, potete farlo con il modo integrato - AjaxExtensions.ActionLink method.

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

Che MSDN collegamento viene lettura obbligata per tutti gli eventuali sovraccarichi di questo metodo e parametri di AjaxOptions class. In realtà, è possibile utilizzare la conferma, il metodo di cambiamento http, impostare onSuccess e onfailure clienti script e così via

Answer 5

È possibile impostare il element con

value="@model.productId"

e

onclick= addToWishList(this.value);

Answer 6

È possibile chiamare semplicemente un metodo di azione utilizzando Javascript come illustrato di seguito:

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

Spero che questo aiuti ...

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

Si può semplicemente aggiungere questo quando si utilizza lo stesso controller per reindirizzare

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