Ответ 1
Использовать jQuery ajax:
function AddToCart(id)
{
$.ajax({
url: 'urlToController',
data: { id: id }
}).done(function() {
alert('Added');
});
}
У меня есть пример кода:
<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 для вызова метода действия контроллера?
Использовать jQuery ajax:
function AddToCart(id)
{
$.ajax({
url: 'urlToController',
data: { id: id }
}).done(function() {
alert('Added');
});
}
Вы вызываете метод 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 будет выполняться бритвой на стороне сервера и что выражение С# будет заменено правильным относительным путем. Но если вы используете код jQuery в своем внешнем js файле, вы можете рассмотреть подход, упомянутый в этом .
Если вам не нужна большая настройка и вы ищете простоту, вы можете сделать это со встроенным способом - AjaxExtensions.ActionLink method.
<div class="cart">
@Ajax.ActionLink("Add To Cart", "AddToCart", new { productId = Model.productId }, new AjaxOptions() { HttpMethod = "Post" });
</div>
Эта ссылка MSDN обязательна для всех возможных перегрузок этого метода и параметров класса AjaxOptions. На самом деле вы можете использовать подтверждение, изменить метод http, установить сценарии клиентов OnSuccess и OnFailure и т.д.
Вы можете просто вызвать Action Method через Javascript следующим образом:
var id = model.Id; //if you want to pass an Id parameter
window.location.href = '@Url.Action("Action", "Controller")/' + id;
Надеюсь, что это поможет...
Если вы хотите вызвать действие из своего JavaScript, одним из способов является встраивание вашего кода JavaScript, внутри вашего представления (например, файл .cshtml
), а затем используйте Razor для создания URL-адреса этого действия:
$(function(){
$('#sampleDiv').click(function(){
/*
While this code is JavaScript, but because it 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")';
});
});
Вы можете просто добавить это, когда используете тот же контроллер для перенаправления
var url = "YourActionName?parameterName=" + parameterValue;
window.location.href = url;
Вы можете настроить element
с помощью
value="@model.productId"
и
onclick= addToWishList(this.value);
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);
}