web-dev-qa-db-ja.com

ASP.NET MVCでJQueryを使用してコントローラーアクションを呼び出す方法

私はこれをしばらく読んでいて、次を使用してコントローラーアクションを呼び出すことができることがわかりました：

$.ajax("MyController/MyAction", function(data) {
    alert(data);
});

これは、MicrosoftMvcAjax.jsまたはMicrosoftAjax.jsをJqueryライブラリとともに追加する必要があるということですか？

また、2番目のパラメーターには$ .ajax（）関数に何を含める必要がありますか？

最後に、asp.net mvc w/ajaxとjqueryで役立つ可能性のあるstackoverflowまたはサイト外の他のリンクはありますか？

ありがとう。

jqueryasp.net-mvcajax
23
Erick Garcia

ここから読み始めることができます jQuery.ajax（）

実際には、コントローラーアクションはUrlを介してアクセスできるパブリックメソッドです。そのため、MicrosoftMvcAjaxまたはjQueryのいずれかのAjax呼び出しからActionを呼び出すことができます。私にとって、jQueryは最も単純なものです。上記のリンクには多くの例があります。 ajax呼び出しの典型的な例は次のとおりです。

$.ajax({
    // edit to add steve's suggestion.
    //url: "/ControllerName/ActionName",
    url: '<%= Url.Action("ActionName", "ControllerName") %>',
    success: function(data) {
         // your data could be a View or Json or what ever you returned in your action method 
         // parse your data here
         alert(data);
    }
});

より多くの例は here にあります。

40
rob waminal

前の応答はASP.NETのみです

jqueryへの参照が必要です（おそらくCDNから）： http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js

そして、同様のコードブロックですが、よりシンプルな...

$.ajax({ url: '/Controller/Action/Id',
         success: function(data) { alert(data); }, 
         statusCode : {
             404: function(content) { alert('cannot find resource'); },
             500: function(content) { alert('internal server error'); }
         }, 
         error: function(req, status, errorObj) {
               // handle status === "timeout"
               // handle other errors
         }
});

必要なハンドラーをいくつか追加しました。コードをデバッグしている場合は常に404と500が発生します。また、タイムアウトなどのその他の多くのエラーは、エラーハンドラーで除外されます。

ASP.NET MVCコントローラーは要求を処理するため、正しいURLを要求するだけで、コントローラーがそれを取得します。 ASP.NET以外の環境で動作するこのコードサンプル

30
Glenn Ferrie

次のようなjQuery AJAXメソッドを使用して、任意のコントローラーのアクションを簡単に呼び出すことができます。

この例では、コントローラー名はStudentです

コントローラーアクション

 public ActionResult Test()
 {
     return View();
 }

このコントローラーのAny Viewでは、次のようにTest（）アクションを呼び出すことができます。

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<script>
    $(document).ready(function () {
        $.ajax({
            url: "@Url.Action("Test", "Student")",
            success: function (result, status, xhr) {
                alert("Result: " + status + " " + xhr.status + " " + xhr.statusText)
            },
            error: function (xhr, status, error) {
                alert("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
            }
        });
    });
</script>
2
yogihosting

次のように、Javascript/Jqueryを使用して非常に簡単にControllerメソッドを呼び出すことができます。

以下は、いくつかのクラスオブジェクトの配列を返すために呼び出されるControllerメソッドであるとします。クラスを「A」にします

public JsonResult SubMenu_Click(string param1, string param2)

    {
       A[] arr = null;
        try
        {
            Processing...
           Get Result and fill arr.

        }
        catch { }


        return Json(arr , JsonRequestBehavior.AllowGet);

    }

以下は複合型（クラス）です

 public class A
 {

  public string property1 {get ; set ;}

  public string property2 {get ; set ;}

 }

ここで、JQUERYによって上記のコントローラーメソッドを呼び出すことになりました。以下は、コントローラーメソッドを呼び出すJquery関数です。

function callControllerMethod(value1 , value2) {
    var strMethodUrl = '@Url.Action("SubMenu_Click", "Home")?param1=value1 &param2=value2'
    $.getJSON(strMethodUrl, receieveResponse);
}


function receieveResponse(response) {

    if (response != null) {
        for (var i = 0; i < response.length; i++) {
           alert(response[i].property1);
        }
    }
}

上記のJquery関数「callControllerMethod」では、コントローラーメソッドurlを開発し、それを「strMehodUrl」という名前の変数に入れて、Jquery APIのgetJSONメソッドを呼び出します。

receieveResponseは、controllersメソッドの応答または戻り値を受け取るコールバック関数です。

ここでは、C＃クラスオブジェクトを使用できないため、JSONを使用しました

次のように、コントローラーメソッドの結果（arr）をJSONオブジェクトに変換しました。

Json(arr , JsonRequestBehavior.AllowGet);

そのJsonオブジェクトを返しました。

これで、Javascript/JQueryのコールバック関数で、この結果のJSONオブジェクトを使用して、それに応じてUIに応答データを表示することができます。

詳細については ここをクリック

1
Abhishek Gahlout

上記の投稿に応えて、あなたの行の代わりにこの行が必要だと思います：

var strMethodUrl = '@Url.Action("SubMenu_Click", "Logging")?param1='+value1+' &param2='+value2

または、実際の文字列value1とvalue2をコントローラーに送信します。

ただし、私にとっては、コントローラーを1回だけ呼び出します。毎回 'receieveResponse'をヒットするようですが、コントローラーメソッドのブレークポイントは、ページが更新されるまで1回しかヒットしないことを示しています。

これが実用的なソリューションです。 cshtmlページの場合：-

   <button type="button" onclick="ButtonClick();"> Call &raquo;</button>

<script>
    function ButtonClick()
    {
        callControllerMethod2("1", "2");
    }
    function callControllerMethod2(value1, value2)
    {
        var response = null;
        $.ajax({
            async: true,
            url: "Logging/SubMenu_Click?param1=" + value1 + " &param2=" + value2,
            cache: false,
            dataType: "json",
            success: function (data) { receiveResponse(data); }
        });
    }
    function receiveResponse(response)
    {
        if (response != null)
        {
            for (var i = 0; i < response.length; i++)
            {
                alert(response[i].Data);
            }
        }
    }
</script>

そして、コントローラーの場合：-

public class A
{
    public string Id { get; set; }
    public string Data { get; set; }

}
public JsonResult SubMenu_Click(string param1, string param2)
{
    A[] arr = new A[] {new A(){ Id = "1", Data = DateTime.Now.Millisecond.ToString() } };
    return Json(arr , JsonRequestBehavior.AllowGet);
}

呼び出されるたびに時間が変わるので、値のキャッシュはありません...

1
user2284063