jQueryでAjaxを簡単実装

著者：Eve Cole 更新時間：2010-08-16 18:28:27

asp.net の MVC アーキテクチャで jQuery を使用するのは非常に簡単で、jQuery を使用して Ajax を実装するのはさらに簡単です。 Asp.Net MVC フレームワークを生成すると、jQuery スクリプトが組み込まれます。関連する環境設定については、他の記事「Asp.Net MVC の例」を参照してください。ここでも、インスタンス内の環境に依存しています。 jQuery スクリプトは、生成されたフレームワークの Scripts フォルダーにすでに表示されています。

TestModel.cs に Json データを取得する関数を作成します。このときも、Id と Name の 2 つのフィールドが含まれる Tets テーブルを使用します。

//JsonDataArray public static Array GetJsonArray(String name) { Array data = null; try { data = (from c in testDb.test where c.name.Contains(name) select new { c.id, c.name })。 ToArray(); }catch(ArgumentNullException ae) {} データを返します。

Json データは、簡単に言えば、Key-Value 配列形式のデータです。次に、デフォルトのオプションに従ってコントローラーを作成します。生成されたコントローラーには Index() メソッドが 1 つだけあります。 jQuery が呼び出す別のメソッドを作成します。完成したコードは次のとおりです: JQueryController.cs。注: MVC2.0 では、jQuery はデフォルトでサーバーデータを呼び出すことが禁止されているため、コード JsonRequestBehavior.AllowGet にアクセス許可を追加する必要があります。

System の使用;System.Collections.Generic の使用;System.Linq の使用;System.Web の使用;System.Web.Mvc の使用;MvcWeb.Models の使用名前空間 MvcWeb.Controllers{ public class JQueryController : Controller { // // GET: / JQuery/ public ActionResult Index() { return View(); } public JsonResult FindByName(string name) { return Json(TestModel.GetJsonArray(name), JsonRequestBehavior.AllowGet); }

次に、Index() を右クリックし、デフォルトのオプションを使用してビューを生成します。生成されたコードは、Views/JQuery: Index.aspx で確認できます。次に、スクリプトコードを挿入して完成させます。以下に続きます:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> <asp:Content ID="Content1" ContentPlaceHolderID= "TitleContent" runat="server"> JQuery </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <script src="../../Scripts/jquery -1.4.1.js" type="text/javascript"></script> <script language="Javascript" type="text/javascript"> $(document).ready(function() { $('#updater ').hide(); $('#dataHead').hide(); $('#linkFind').click(function(event) {event.preventDefault(); $('#dataHead').show( ); $('#updater').show(); $.getJSON('/JQuery/FindByName/', { name: $('#textSearch')[0].value }, function(data) '#testList > div').remove(); $.each(data, function(i, item) { $('#testList').append('<div>' + item.id + ' ' + item. name + '</div>') }); $('#updater').hide() }); </script> <h2>Ajax インスタンスを実装します。 > <div id="query"><%= Html.TextBox("textSearch") %> <a href="#" id="linkFind">検索</a>    class ="update" id="updater"> 読み込み中...   </span></div> <div id="dataHead" >ID 名</div> <div id=" testList "></div> </asp:Content>

プロジェクトを実行し、テキストボックスに「t」を入力して「検索」を押すと、以下に示すように、ページを更新せずにクエリされたデータが表示されます。

また、Ajax 開発では、デバッグ用に Ajax の基本関数 $.ajax を使用して、エラーが発生したときにエラー情報を出力することもできます。たとえば、上記の呼び出しは次のコードでデバッグできます。