ASP.NET MVC 3技術(五)JSONデータの伝達

今日マイクロソフトはASPを発表しました.NET MVC 3公式版、ASP.NET MVC 3のほとんどの知識点は当駅で説明しました.ASP.NET MVC 3ではJSONデータの受信がデフォルトでサポートされていますが、今日はJSONデータのバインドを見てみましょう.jQueryの知識を少し使いますが、当駅を頻繁に訪れている友人にとっては理解しにくいものではないと思います.
ASP.NET MVC 3にはJSONへのバインドサポートが内蔵されており、クライアントから渡されたJSON形式のデータを受信することが非常に簡単になる.本編では、Androidブログプロジェクトにおけるコメント機能で、具体的な使い方を簡単に説明します.まずRazorビューエンジンの下のHTMLコードを見てみましょう.この主にメッセージを表示するためのデータリストは次のとおりです.

    <span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"userTemplate"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/html"</span><span class="tag">></span><span class="pln">
    </span><span class="pun"><</span><span class="pln">div</span><span class="pun">><</span><span class="pln">a href</span><span class="pun">=</span><span class="str">"${Website}"</span><span class="pun">></span><span class="pln">$</span><span class="pun">{</span><span class="typ">UserName</span><span class="pun">}</</span><span class="pln">a</span><span class="pun">></span><span class="pln"> </span><span class="typ">Says</span><span class="pun">:</span><span class="pln"> $</span><span class="pun">{</span><span class="typ">Content</span><span class="pun">}</</span><span class="pln">div</span><span class="pun">></span><span class="pln">
    </span><span class="tag">
    
 id="Contact">
     type="button" id="create" value="Create" />

Createボタンをクリックすると、メッセージを提出し(ここでは簡単のため、メッセージの内容が固定されている)、jQuery Ajaxを実行してJSON形式のデータを伝達し、以下のようにします.

$("#create").click(function () {
    var contact = {
        UserName: "I love jQuery",
        Website: "http://www.google.com",
        Content: "Nice to meet you."
    };

    $.ajax({
        url: "/Contact",
        type: "POST",
        data: contact,
        dataType: "json",
        success: function (req) {
            $("#userTemplate").render(req).appendTo("#Contact");
        }
    });
});

純粋なASPならNET開発者は、jQueryに触れたことがないので、早くjQueryを勉強することを強くお勧めします.jQueryはASP.にあります.NET MVC 3は非常に重要な役割を果たし、ますます流行していきます.ここで、jQuery学習大総括(五)jQuery Ajaxを参考にすることができます.このようにメッセージ内容をJSON構造でPOST方式でバックグラウンドに提出する、ASP.NET MVC 3 Controllerで受信したコードは以下の通りです.

[HttpPost]
public ActionResult Index(Contact contact)
{
    if (ModelState.IsValid)
    {
        android.Contact.AddObject(contact);
        android.SaveChanges();
    }
    var contacts = from c in android.Contact
                    where c.IsValid == 1
                    select c;
    return Json(contacts);
}

ここには新しい知識はありません.前のASPを見たことがなければ.NET MVC 3での追加、修正、削除操作は、ASP.を参照してください.NET MVC 3例(六)増加、修正、削除操作(一)、受信JSON結果を下図に示す:
Index()メソッドでは、強いタイプのContactオブジェクトをパラメータとして受信、ASP.NET MVC 3は、サーバ側でJSON形式のデータを自動的にバインドすることができる.NET Contactタイプ,ASP.NET MVC 3の追加操作では,この自動バインドについて説明した.ASP.NET MVC 3では実体データの付与が非常に簡単になり、Contactオブジェクトができた後に保存操作を行ったが、ここではこれ以上言わない.NET MVC 3でJSONを受信するのに便利になりました.プログラムは最後にJson()メソッドを使用し、JSON構造のオブジェクトを返します.Google Chromeでは次のように結果が得られます.
Google Chromeでjsをデバッグするのに慣れていない場合は、Google Chromeでjsをデバッグするのを参考にして、もちろんFireFoxのFirebugを使ってデバッグすることもできます.最後にjQueryプログラムではマイクロソフトのjQuery Templatesプラグインを使用してJSON形式のメッセージデータを表示するので、戻り結果の遍歴表示を行う必要はありません.jQuery Templatesについては、マイクロソフトjQuery Templatesプラグインの使用、jQueryプラグイン-マイクロソフトjQuery Templatesを参照してください.最後の結果は次のとおりです.
これで明らかになったのはASP.ですNET MVC 3ではJSONデータの受信が非常にスマートになり、jQuery Templatesプラグインを使用することでJSONデータのバインドが非常に簡単になります.また、このサイトのjQueryプラグイン-マイクロソフトjQuery Data Linkingを見たことがある場合は、プロジェクトのコードを簡潔に維持しやすくすることができます.もちろん本編で挙げた例はとても簡単で、ASPを使うことができると信じています.NET MVC 3は、本当に実用的なプロジェクトを効率的に作成します.