Calling ASP.NET MVC phương pháp hành động từ JavaScript

Question

tôi có mẫu mã như thế này:

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

Làm thế nào tôi có thể viết mã JavaScript để gọi phương thức hành động điều khiển?

Answer 1

Sử dụng jQuery ajax:

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

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

Answer 2

Nếu bạn muốn gọi một hành động từ JavaScript, một cách là để nhúng mã JavaScript của bạn, bên trong cái nhìn của bạn (.cshtml tập tin ví dụ), và sau đó, sử dụng Dao cạo để tạo URL của hành động đó:

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

Bạn đang gọi phương thức addToCart và chuyển id sản phẩm. Bây giờ bạn có thể sử dụng jQuery ajax để chuyển dữ liệu đó đến phương thức hành động phía máy chủ của bạn.d

Bài đăng jQuery là phiên bản ngắn của jQuery ajax.

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

Nếu bạn muốn tùy chọn khác như callbacks thành công và xử lý lỗi, sử dụng 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); 

       }  
    }); 
} 

Khi thực hiện cuộc gọi ajax, tôi khuyên các bạn nên sử dụng Html phương pháp helper như Url.Action để tạo ra con đường với các phương pháp hành động của bạn.

Điều này sẽ hoạt động nếu mã của bạn ở chế độ xem dao cạo vì Url.Action sẽ được thực thi bởi dao cạo ở phía máy chủ và biểu thức C# sẽ được thay thế bằng đường dẫn tương đối chính xác. Nhưng nếu bạn đang sử dụng mã jQuery của mình trong tệp js bên ngoài, bạn có thể xem xét cách tiếp cận được đề cập trong số này answer.

Answer 4

Nếu bạn không cần nhiều tùy biến và tìm kiếm sự đơn giản, bạn có thể làm điều đó bằng cách tích hợp sẵn - AjaxExtensions.ActionLink method.

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

Đó MSDN liên kết được phải đọc cho tất cả các quá tải có thể có của phương pháp này và các thông số của AjaxOptions class. Trên thực tế, bạn có thể sử dụng xác nhận, thay đổi phương thức http, thiết onSuccess và onFailure khách hàng kịch bản và vân vân

Answer 5

Bạn có thể thiết lập element của bạn với

value="@model.productId"

và

onclick= addToWishList(this.value);

Answer 6

Bạn chỉ cần gọi Phương thức hành động bằng cách sử dụng Javascript như hình dưới đây:

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

Hope this helps ...

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

Bạn chỉ có thể thêm điều này khi bạn đang sử dụng cùng một bộ điều khiển để chuyển hướng

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