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 调用操作方法，如下所示：

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

希望这会有所帮助......

Answer 3

您正在调用addToCart方法并传递产品ID。现在，您可以使用jQuery ajax将该数据传递给服务器端操作方法。

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将由服务器端的razor执行，并且c＃表达式将替换为正确的相对路径。但是如果你在外部js文件中使用jQuery代码，你可以考虑这个answer中提到的方法。

Answer 4

如果您不需要太多自定义并寻求简单性，则可以使用内置方式执行此操作 - AjaxExtensions.ActionLink method。

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

对于此方法的所有可能重载和AjaxOptions class的参数，必须读取该MSDN链接。实际上，您可以使用确认，更改http方法，设置OnSuccess和OnFailure客户端脚本等等

Answer 5

如果您想通过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 6

当您使用相同的控制器重定向

时，您可以简单地添加它

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

Answer 7

您可以使用

设置element

value="@model.productId"

和

onclick= addToWishList(this.value);

Answer 8

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

从JavaScript调用ASP.NET MVC操作方法

8 个答案: