技術の選択
今や何らかの理由で、MVCのサイトを書き直すことに消極的です。これは、よりエレガントに見え、高速に動作するためです。これはAjax現象とjQueryの世界的な広がりの結果です。 同じタスク（および非常に厳しい締め切り）に直面して、私もそれを試してみることにしました。 テクノロジーの観点から、私は以下を選択しました。
- Asp.Net MVCおよびデフォルトのViewEngine。 Sparkはちょっとクールですが、事実上「リッチUI」の作成はサーバーサイドジェネレーターの肩にかかっているため、「タグの可愛さ」は、たとえばAjax指向のラベルの代わりに通常のラベルを生成する場合にのみ適切です。
- jQuery もちろん、同じASP.NET AJAXとAjax.LinkAction（）などの興味深いものがありますが、どちらもあまり経験がなく、群衆をフォローすることにしました。 おそらく、Microsoftからオプションを検討する時間があるでしょう。
- jQuery UI かなりきれいなユーザーインターフェイスを作成するjQueryのスーパーライブラリ。 個人的にカレンダーが必要でした。
- テーブルとタブコントロール用のASP.NET MVCのTelerik拡張 。 Telerikを選ぶ理由 シンプルで直感的なAPIと、見栄えの良いインターフェイスが気に入りました。 また、MVPステータスの開発者が無料のライセンスを取得することも奨励されます。3人のチームに2人いるので、かなりの節約になります。
注：オープンソースプロジェクトの場合、これらのコンポーネントは無料で使用できます。
すべてのコンポーネントにアクセスできるようになり、ビルドを開始しました。 以下では、他の開発者に役立つ可能性のある最も重要で有用な側面について説明します。
テーブルを操作する
ページ上の何かがAjaxを介してオブジェクトを取得する場合、これらのオブジェクトのフォーマットは非常に原始的なものでなければなりません。 これは、厳密に型指定された表現を使用した場合とは異なります。 すべてが非常に原始的でなければなりません。
そのようなテーブルから始めましょう。 ビュー（少なくともTelerikアプローチでは）は、ビュー内のunningなC＃構造を使用して作成されます。
<%= Html.Telerik().Grid<PersonRow>().Name( "PersonGrid" ).Columns(cs =><br/>
{<br/>
cs.Add(i => i.Name).Title( "Name" );<br/>
cs.Add(i => i.Gender).Title( "Gender" );<br/>
}).Ajax(ajax => ajax.Enabled( true ).Action( "GetPeople" , "Home" ))<br/>
.Pageable(pager => pager.PageSize(20).Position(GridPagerPosition.Bottom))<br/>
%><br/>
上記のコードは2列のテーブルを定義していますが、プレゼンテーションではPerson （これはデータベースから取得したもの）ではなくPersonRowを使用しています。 Personから必要なものをすべて引き出して保存するmodelka-推測する-ただの行！ 上記のコードにロジックを追加できないためです。
// js, !<br/> cs.Add(i => i.IsMale ? "Male" : "Female" ).Title( "Gender" );<br/>
したがって、プレートはコントローラーメソッドから非同期にデータを取得します。 もちろん、このメソッドはIEnumerable <PersonRow>ではなく、控えめなActionResultを返します。 すべてが明確になるように、ここに小さなコードがあります：
[GridAction]<br/>
public ActionResult GetPeople()<br/>
{<br/>
return View( new GridModel<EventRow> {<br/>
Data = repository.GetPeople().Select(p => new PersonRow(p))<br/>
});<br/>
}<br/>
興味深いのは、これらの2つのコード（ページ上とコントローラー内）が、タブレットを非同期にロードするために必要なものであるということです。 Ajax駆動であるため、タブレットは同じjQueryから更新できます。 これは単純に行われます：
$( '#PersonGrid' ).data( 'tGrid' ).ajaxRequest();<br/>
jQueryを介してajaxメソッドを呼び出す
jQueryを使用することに決めたので、ajaxを使用してページメソッドを呼び出す方法を学ぶ必要がありました。 フォームからデータを送信し、データを受信する必要がありました。 データを取得するために、json形式を使用しました。 私のコントローラー側のメソッドは一連のパラメーター（通常のコントローラーアクションなど）を受け入れ、 JsonResultを返しました 。
public JsonResult FindPersonName( string id)<br/>
{<br/>
try <br/>
{<br/>
string name = repository.FindById( int .Parse(id)).Name;<br/>
return Json( new {Result = Name, Success = true });<br/>
}<br/>
catch (Exception ex)<br/>
{<br/>
return Json( new {Result = "Could not find person. " + ex.Message, Success = false });<br/>
}<br/>
}<br/>
上記のコードは、例外があったかどうかに関係なく結果を返します。 3つの異なる状況を処理する必要があります。
- リクエストは成功しました
- サーバー側で例外が発生し、 成功== false
- サーバーに到達しなかったため、ajax呼び出しがクライアントに落ちました
では、jQueryからこのメソッドを呼び出すことについて話しましょう。 ここでは、ユーザーが特定のハイパーリンクをクリックする処理を示す「かなりの」呼び出しがあります。
$( '#lnkFindName' ).click(function( event ) {<br/>
$.ajax({<br/>
type: "POST" ,<br/>
contentType: "application/x-www-form-urlencoded" ,<br/>
url: "/Home/FindPersonName/" ,<br/>
dataType: "json" ,<br/>
data: {<br/>
id: $( '#personId' ).val()<br/>
},<br/>
success: function(msg, status) {<br/>
if (msg[ 'Success' ] == true ) {<br/>
$( '#personName' ).val(msg[ 'Result' ]);<br/>
}<br/>
else {<br/>
$( '#statusBox' ).html(msg[ 'Result' ]).fadeIn();<br/>
}<br/>
},<br/>
error: function(msg, status) {<br/>
$( '#statusBox' ).html(msg.statusText).fadeIn();<br/>
}<br/>
});<br/>
});<br/>
ご覧のとおり、jsonは双方向に動作し、非常に成功しています。メッセージを受信した後、 msg ['key']を介して情報を引き出します。 上記の例では、リクエストを完了するための3つのオプションすべてが処理されました。
おわりに
jQueryベースのツールキットの使用は非常に簡単だと言わなければなりません。 そして、適切に設計されたコンポーネントを操作するとき、ajaxを介した相互作用は非常に明確です。 奇妙なことに、私の最初のajax-pancakeはゴツゴツしていませんでした。 :)