【Asp.net MVC】AJAXHelperとjQueryAjax

9051 ワード

ASP.NET MVCでは、AJAXHelperがAJAX関連のものを作ってくれた公式提供があります.私は伝統的なjQuery AJAX技術とAJAXHelperでそれぞれ同じdemoを実現していますので、ここで記録します.
MVCであるため、Homeコントローラが作成され、中には2つのActionがあり、Login()は通常のページに使用され、GetInfo()はjson文字列を返すために使用され、以下のように定義されている.

public class HomeController : Controller
    {
        public ActionResult Login()
        {
            return View();
        }
        public JsonResult GetInfo()
        {
            return Json(new
            {
                time = DateTime.Now.ToString(),
                flag=new Info[] { new Info { Name="  ",Age=18 },new Info { Name="  ",Age=19 } }
            },JsonRequestBehavior.AllowGet);
        }
    }
    public class Info
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }

Infoクラスはエンティティモデルで、主に返されるjson文字列を複雑にします.へへ.
はい、バックグラウンドが終わりました.次はそれぞれ2つの異なる処理方法を示します.
一:jQuery AJAX:
　　

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Login</title>
    <script src="~/scripts/jquery-2.1.4.js"></script>
    <script src="~/scripts/jquery.unobtrusive-ajax.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#get").click(function () {
                $.ajax({
                    cache:false,
                    type: "get",
                    dataType:"json",
                    url: "getinfo",
                    success: function (data, textStatus) {
                        $("#main").html(data.time);
                        var bodyTag=$("body");
                        bodyTag.append("<table>");
                        $.each(data.flag, function () {
                            $("body").append("<tr><td>"+this.Name+"</td><td>"+this.Age+"</td></tr>");
                        })
                        bodyTag.append("</table>");
                    }
                });
            })
        })
</script>
</head>
<body><input type="button" id="get" value="    " /><div id="main"></div>
</body>
</html>

上のjQueryコードでは、domがロードを完了した後、idが「get」のボタンにクリックイベントを登録し、このボタンをクリックするとajaxリクエストが開始され、リクエストの仕方はget、戻りデータ型はjsonフォーマット、そして成功successをリクエストするコールバック関数では、いくつかのjqueryの方法でdomを操作し、戻ったデータを表示します.
以上、jQuery AJAXを直接呼び出す方法ですが、ajaxのリクエストパラメータについては、任意に変更して、参考URLを残しておくことができます.http://www.jquery123.com/jQuery.ajax/
二:AJAXHelperを利用する

@model WebApplication1.Models.UserViewModel
@{ 
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Login</title>
    <script src="~/scripts/jquery-2.1.4.min.js"></script>
    <script src="~/scripts/jquery.unobtrusive-ajax.js"></script>
    <script type="text/javascript">
        function OnSuccess(data) {
            var main = document.getElementById("main");
            var table = document.createElement("table");
            for (var i = 0; i < data.flag.length; i++) {
                var tr = document.createElement("tr");
                tr.innerHTML = "<td>" + data.flag[i].Name + "</td>" + "<td>" + data.flag[i].Age + "</td>";
                table.appendChild(tr);
            }
            main.appendChild(table);
        }
    </script>
</head>
<body>
    @using (Ajax.BeginForm("getinfo",new AjaxOptions {OnSuccess= "OnSuccess", HttpMethod="Get", AllowCache=false}))
    {
        <input type="submit" id="get" value="    " />
    }
   <div id="main">
    </div>
</body>
</html>

USingの目的はフォームラベルを閉じることであり、AJAXHelperがajaxリクエストを開始するのも簡単であることがわかります.jQuery AJAXの直接操作と変わらないが、vsのスマートヒントは悪くない.これはAJAXHelperでしか体験できません.

まとめ:どちらもAJAXリクエストを完了できますが、AJAXHelperとjQuery AJAXには違いがあります.具体的な違いは私が研究してから記録します.へへへ

demoの過程で出会ったいくつかの問題をします.
1.アクションがJsonResultタイプを返す場合、Json()メソッドはJsonRequestBehaviorを追加しない.AllowGetパラメータは、getメソッドで要求されると500エラーが発生します.
2.domでjson文字列を操作するときは、大文字と小文字に注意します.

Poj 2418 Hardwood Species(二分)

JQueryクイックラーニング