asp.net mvcでコントローラーへの単純なAjax呼び出しを行う

109

ASP.NET MVC Ajax呼び出しを開始しようとしています。

コントローラ：

public class AjaxTestController : Controller
{
    //
    // GET: /AjaxTest/
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult FirstAjax()
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }   
}

見る：

<head runat="server">
    <title>FirstAjax</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var serviceURL = '/AjaxTest/FirstAjax';

            $.ajax({
                type: "POST",
                url: serviceURL,
                data: param = "",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: successFunc,
                error: errorFunc
            });

            function successFunc(data, status) {     
                alert(data);
            }

            function errorFunc() {
                alert('error');
            }
        });
    </script>
</head>

データを返すコントローラーメソッドでアラートを出力するだけです。上記のコードは、私のビューに「chamara」を印刷するだけです。アラートは発生していません。

更新

コントローラを以下のように変更すると、動作し始めます。それがなぜ今機能しているのか、私には明確な考えがありません。誰か説明してください。パラメータ「a」は関連していません。同じメソッド名とパラメータを持つ2つのメソッドを追加できないためです。これは解決策ではないかもしれませんが、機能します

public class AjaxTestController : Controller
    {
        //
        // GET: /AjaxTest/
        [HttpGet]
        public ActionResult FirstAjax()
        {
            return View();
        }

        [HttpPost]
        public ActionResult FirstAjax(string a)
        {
            return Json("chamara", JsonRequestBehavior.AllowGet);
        }
    }

— チャマラ
ソース

json形式の文字列を返します{"name":"chamara"}。次に、次のように読みますdata['name']

— Raab

1

ビューから2番目のjQueryライブラリを削除します。コードはそのまま動作します。スクリプトエラーが発生し、アラートが表示されない可能性があります。

— Terence

23

更新後、

最初の呼び出しは、デフォルトのHttpGetリクエストでFirstAjaxアクションを呼び出し、空のHTMLビューをレンダリングします。（以前はそれを持っていなかった）
その後、そのビューのDOM要素をロードすると、Ajax呼び出しが発生し、アラートが表示されます。

以前は、HTMLをレンダリングせずにブラウザにJSONを返すだけでした。これで、JSONデータを取得できるHTMLビューがレンダリングされました。

JSONをHTMLではなくプレーンデータとして直接レンダリングすることはできません。

— asb
ソース

52

しないようにデータ属性を削除します POSTINGサーバーに何も関係ます（コントローラーはパラメーターを想定していません）。

また、AJAXメソッドでは、静的文字列ではなく、使用Razorおよび使用でき@Url.Actionます。

$.ajax({
    url: '@Url.Action("FirstAjax", "AjaxTest")',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: successFunc,
    error: errorFunc
});

更新から：

$.ajax({
    type: "POST",
    url: '@Url.Action("FirstAjax", "AjaxTest")',
    contentType: "application/json; charset=utf-8",
    data: { a: "testing" },
    dataType: "json",
    success: function() { alert('Success'); },
    error: errorFunc
});

— ダレン
ソース

3

@chamara-申し訳ありませんが、HttpPostを削除し（サーバーに何も投稿していないため、冗長な属性になります）、コントローラーはヒットしません。また、AJAX関数の「type：POST」も削除しました。

— Darren

18

Razorを使用して、次のようなアクションを呼び出し、URLを動的に変更します。

$.ajax({
    type: "POST",
    url: '@Url.Action("ActionName", "ControllerName")',
    contentType: "application/json; charset=utf-8",
    data: { data: "yourdata" },
    dataType: "json",
    success: function(recData) { alert('Success'); },
    error: function() { alert('A error'); }
});

— gdmanandamohon
ソース

Url.Actionのためのパラメータがこの回答に後ろ向きになり、それがUrl.Action（actionNameの、コントローラ名）だ

— xd6_

1

これのファンではなく、それはビューとJavaScriptの結合を奨励しますが、ええと、ユーザー名はチェックアウトしますか？

— Halter、2017年

すべてのアクションでユーザーにリダイレクトを強制しない場合、@ Halter UXは大幅に向上します。そして、クライアント側では、サーバー側では気にする必要のないことがたくさんあります。

— Kolobキャニオン2018

@KolobCanyon 100％正解です。私のコメントは、JavaScriptでかみそりを使用してURLをレンダリングすることについて言及しています。これは、JavaScriptとビュー（cshtml）を密接に結合します。これは良い答えですが、密結合を修正するには、URLをchstmlのデータ属性にダンプし、JavaScriptで読み取ることができます。混乱させて申し訳ありません！

— Halter、2018年

5

まず、1つのページに2つの異なるバージョンのjqueryライブラリを含める必要はありません。 "1.9.1"または "2.0.0"で、ajax呼び出しを機能させることができます。

これがあなたのコントローラーコードです：

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

    public ActionResult FirstAjax(string a)
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }

ビューは次のようになります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    var a = "Test";
    $.ajax({
        url: "../../Home/FirstAjax",
        type: "GET",
        data: { a : a },
        success: function (response) {
            alert(response);
        },
        error: function (response) {
            alert(response);
        }
    });
});
</script>

— Lokesh_Ram
ソース

5

Ajax呼び出しでC＃メソッドをヒットするだけの場合は、2つの案件タイプとURLを渡すだけで、リクエストが取得されれば、URLのみを指定する必要があります。正常に動作している以下のコードに従ってください。

C＃コード：

    [HttpGet]
    public ActionResult FirstAjax()
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }

Getリクエストの場合のJavaスクリプトコード

    $.ajax({
        url: 'home/FirstAjax',
        success: function(responce){ alert(responce.data)},
        error: function(responce){ alert(responce.data)}
    });

PostリクエストのJavaスクリプトコードと[HttpGet]から[HttpPost]

        $.ajax({
            url: 'home/FirstAjax',
            type:'POST',
            success: function(responce){ alert(responce)},
            error: function(responce){ alert(responce)}
        });

注：ViewAjaxをView Controllerと同じコントローラーで使用している場合、urlにコントローラー名は必要ありません。お気に入りurl: 'FirstAjax',

— ムハンマドアサド
ソース

4

それはあなたの更新の質問です。

同じ名前とシグネチャを持つ2つのメソッドは使用できないため、ActionName属性を使用する必要があります。

更新：

[HttpGet]
public ActionResult FirstAjax()
{
    Some Code--Some Code---Some Code
    return View();
}

[HttpPost]
[ActionName("FirstAjax")]
public ActionResult FirstAjaxPost()
{
    Some Code--Some Code---Some Code
    return View();
}

また、メソッドがアクションになる方法の詳細については、このリンクを参照してください。非常に良いリファレンスです。

— RGR
ソース

1

見る;

 $.ajax({
        type: 'GET',
        cache: false,
        url: '/Login/Method',
        dataType: 'json',
        data: {  },
        error: function () {
        },
        success: function (result) {
            alert("success")
        }
    });

コントローラーメソッド;

 public JsonResult Method()
 {
   return Json(new JsonResult()
      {
         Data = "Result"
      }, JsonRequestBehavior.AllowGet);
 }

— オイエニガン
ソース

0

url: serviceURL, 使用する代わりに

url: '<%= serviceURL%>',

そして、あなたはsuccessFuncに2つのパラメータを渡していますか？

function successFunc(data)
 {
   alert(data);
 }

— スワップニール
ソース

0

global.asaxに「JsonValueProviderFactory」を追加します。

protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();
    ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());
}

— うん
ソース

JsonValueProviderFactoryとは何ですか？

— Kiquenet