web-dev-qa-db-ja.com

JavaScriptからASP.NET MVCアクションメソッドを呼び出す

次のようなサンプルコードがあります。

 <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コードを作成するにはどうすればよいですか？

javascriptasp.net-mvcasp.net-mvc-3razor
60
Milan Mendpara

JQuery ajaxを使用します。

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

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

65
KMan

以下に示すように、Javascriptを使用してAction Methodを呼び出すだけです。

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

お役に立てれば...

17
Murat Yıldız

AddToCartメソッドを呼び出し、製品IDを渡します。これで、jQuery ajaxを使用してそのデータをサーバー側のアクションmethod.dに渡すことができます。

jQueryポストは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呼び出しを行うときは、Url.ActionなどのHtmlヘルパーメソッドを使用して、アクションメソッドへのパスを生成することを強くお勧めします。

Url.Actionはサーバー側のカミソリによって実行され、そのc＃式は正しい相対パスに置き換えられるため、コードがカミソリビューにある場合、これは機能します。ただし、外部jsファイルでjQueryコードを使用している場合は、この answer に記載されているアプローチを検討できます。

13
Shyju

あまりカスタマイズする必要がなく、シンプルさを追求する場合は、組み込みの方法- 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クライアントスクリプトの設定などができます。

10
archil

JavaScriptからアクションを呼び出す場合、1つの方法は、ビュー内に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")';
    });
});
9
Saeed Neamati

リダイレクトに同じコントローラを使用している場合、これを単純に追加できます

var url = "YourActionName?parameterName=" + parameterValue;
window.location.href = url;
4
Deshani Tharaka
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);
  }
2
Jabulani Vilakazi

elementを設定するには

value="@model.productId"

そして

onclick= addToWishList(this.value);

1
Ammar