Вызов ASP.NET MVC методы действий из JavaScript

Question

У меня есть пример кода, как это:

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

Как я могу писать код JavaScript, чтобы вызвать метод действия контроллера?

Answer 1

Использование JQuery Ajax:

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

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

Answer 2

Если вы хотите, чтобы вызвать действие из вашего JavaScript, один способ встроить код JavaScript, внутри вашей точки зрения (.cshtml файл, например), и затем используйте Razor для создания URL-адреса этого действия:

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

Вы вызываете метод addToCart и передаете идентификатор продукта. Теперь вы можете использовать jQuery ajax для передачи этих данных на ваш метод действия на стороне сервера. D

jQuery post - это короткая версия jQuery ajax.

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

Если вы хотите больше вариантов, как успех обратного вызова и обработки ошибок, использовать 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); 

       }  
    }); 
} 

При выполнении Ajax звонки, я настоятельно рекомендую использовать вспомогательный метод Html, такие как Url.Action генерировать путь к вашим методам действий.

Это будет работать, если ваш код находится в режиме бритвы, потому что Url.Action будет выполняться бритвой на стороне сервера и что выражение C# будет заменено правильным относительным путем. Но если вы используете код jQuery в своем внешнем js-файле, вы можете рассмотреть подход, упомянутый в этом answer.

Answer 4

Если вам не нужна большая настройка и вы ищете простоту, вы можете сделать это со встроенным способом - AjaxExtensions.ActionLink method.

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

Что MSDN ссылка должна прочитать для всех возможных перегрузок этого метода и параметров AjaxOptions class. На самом деле, вы можете использовать подтверждение, метод изменения HTTP, установите OnSuccess и OnFailure клиентов скрипты и так далее

Answer 5

Вы можете настроить свой element с

value="@model.productId"

и

onclick= addToWishList(this.value);

Answer 6

Вы можете просто позвонить по методу , используя Javascript, как показано ниже:

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

Надеется, что это помогает ...

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

Вы можете просто добавить это, когда вы используете тот же контроллер для перенаправления

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