VS2010のWebプロジェクトの例

私にとってのVS 2010の出力は、まず第一に、.Net 4、Entity Framework 4、ASP.NET MVC 2で動作する能力です。
私の意見では、得られたすべての理論的知識は実際の経験で表現されるべきです。 そのため、機会が与えられたらすぐに、VS 2010を使用してプロジェクトを実装しました。これで、新しい機能の印象を共有する準備が整いました。
この記事は、高度な開発者向けに設計されています）



少し前のインタビューの1つで、VS 2010を使用して行うことにしたタスクが提供されました。 条件ではそうでなければ同意されませんでした。 私にとってこの仕事は、まず第一に、提供された機会に慣れる良い機会でした。
条件について簡単に説明します。MSSQL Server NorthWindデータベースの Customersテーブルのデータを検索および表示するためのWebアプリケーションを作成します 。 検索は、国（国）、市（市）、会社名（会社名）の基準に従って実行する必要があります。 検索語は部分的に指定できることに注意してください。

何よりも、ユーザーフレンドリーなソリューションを作成するのが好きです。 私の意見では、Web上のユーザーにとって最適なソリューションはajaxです。 つまり、ページをリロードすることなく、サイトの仕事。 作成する目標として設定したのは、このインターフェイスです。

部品の選択

私は、常に仕事をしているツールから自分が一番好きなものを選ぶことにしました。
1つ目はjQueryです。 多くの場合、リッチなインターフェイスを開発する必要があり、このフレームワークが大好きだからです。 彼がVSに入る前の長い間、そして彼の大衆化。 彼の柔軟性のおかげで、あなたはジェダイのように感じます）
第二に、それはEntity Framework 4です。私は、バージョン3.5からそれほど前ではないことに慣れています。 MSは開発者向けにEFを推奨しています。EF開発者のブログを読むと、EF 4が期待されているものであると確信しました。 最後に、アダプターを日付オブジェクトから分離する組み込み機能があります。 これについては後で説明します。Pocoはt4テンプレートに基づいてオブジェクトを生成することを意味します。 そして、Linq to Entityの存在は、このフレームワークに同じ軽さの感覚を追加します。 私にライトセーバー！ ）
第三に、ASP.NET MVC 2はアプリケーションの基盤です。 彼女がそこにいなかったとき、私は即興のツール（書き換えパス、クライアントビュー、Webサービス形式のコントローラーなど）の助けを借りて非常に似たようなことを行い、MSからの解決策が出てきたときに喜びを捨てました。 リリース以来、mvcを使用できたのは幸運でした。 これもまた私の愛です）
最後に、ajaxについては、Webサービスを使用することにしました。 実際のところ、私はウェブがシステムの一部にすぎない異種アプリケーションの開発に忙しく、まだ他のソフトウェアがたくさんあります。 はい、WCFをほのめかしています） WebサービスはDTOを交換するため、それらにデータ属性を追加し、それらからサービスコントラクトを作成できます。他のユーザーはアプリケーションを使用できます。 まあ、かわいいでしょ？ ）

ジグソーパズル

アーキテクチャに関しては、一般に受け入れられている標準を順守しています。 この点に関してMSが明確にその見解を表明したことを非常に嬉しく思います。 私たちのプロジェクトで覚えておくべきこと：

• つながりの少ない原則
• 各層は前のものについてのみ知っている

レイヤーとは

• ビュー（xHtml + js）
• （Web）アプリケーション（asp.net vew、Webサービス）
• データアクセス層（Entity Framework）
• データベース（SQL Server）

データ転送オブジェクト（DTO）を使用して互いに通信します
習慣があります-常に表示から始めます）

ビューを作成する

Index.aspxを変更しました

< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .

1. < form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .
3. < form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .
4. < form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .
5. < form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .
7. < form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .
8. < form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .
10. < form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .
11. < form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .
12. < form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .
13. < form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .
14. < form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .
15. < form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .
16. < form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .
17. < form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .
18. < form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .
19. < form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .
20. < form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .
21. < form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .
22. < form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .
23. < form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .
24. < form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .
25. < form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .

< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .

ここではおそらくすべてが明らかです。 thではクラスの名前のみを説明します。 これらは、選択を表示するためのタグとして使用されます。 プロジェクトでは、jQueryにいくつかのプラグインを追加することにしました。

• DataTableは 、グリッド、page'nator、並べ替えを表示するために必要です。
• フォームの検索オプションを便利に選択するためのオートコンプリート 。
• 要求をWebサービスに正しく送信するためのJson 。

Site.Masterの接続済みプラグインへのリンクを追加し、jsファイルを追加します。これをcustomer-list.jsと呼びます

Javascript

私はクロージャーが何であるかを知っているので、最初と最後に追加してください：

( function (){

$( function (){

//.... ...

});

})();

* This source code was highlighted with Source Code Highlighter .

同時にダウンロードコードの開始を追加します。 なぜなら 1つのビューがあり、jQueryプラグインを実行しませんでした
Webサービスに接続するようにAjaxを構成します。

$.ajaxSetup({
type: 'post' ,
contentType: 'application/json; charset=utf-8' ,
dataType: "json"
});

* This source code was highlighted with Source Code Highlighter .

使用するものを見つけます。

var $result = $( '#customer-search-result' );
var $form = $( '#customer-search-form' );

* This source code was highlighted with Source Code Highlighter .

質問は、おそらく、変数の先頭に$を引き起こします）PHPはそれとは何の関係もありません）jQueryでラップされた変数を呼び出して、すぐに見えるようにします。 そして、彼らに何を期待するかは明らかです。
次に、 オートコンプリートを構成します。 なぜなら 3つのフィールドと3つの対応するサービスがあります。設定を1つのオブジェクトに結合してから、次を使用する方が簡単です。

var paramsAutocomplete = {
name: '' ,
queryParams: function (info){
var res = {};

res[ this .name] = info.q;

return $.toJSON(res);
},
formatItem: function (row, i, max, term) {
return row.replace( new RegExp( "(" + term + ")" , "gi" ), '$1' );
},
parse: function (data) {
var parsed = [];

$.each(data.d, function (){
parsed.push({data: this , value: this , result: this });
});

return parsed;
}
};

* This source code was highlighted with Source Code Highlighter .

標準の配信ではqueryParams関数に注意する価値がありますが、 オートコンプリートではこのようなパラメーターの変更は許可されていません。 このコードが機能するために、このプラグインをわずかに変更しました。もちろん、デフォルトで機能するオプションを残しました。

data: options.queryParams ? options.queryParams({
q: lastWord(term),
limit: options.max
}) : $.extend({
q: lastWord(term),
limit: options.max
}, extraParams),

* This source code was highlighted with Source Code Highlighter .

Ajaxリクエストが発生する348行のように見えます。 これは、Webサービスとの互換性のために行われます。

オートコンプリートを接続します：

var $name = $form.find( '[name=name]' )
.autocomplete(
'Services/Customers.asmx/CompanyNames' ,
$.extend(paramsAutocomplete, {name: 'name' }));

var $city = $form.find( '[name=city]' )
.autocomplete(
'Services/Customers.asmx/Cities' ,
$.extend(paramsAutocomplete, {name: 'city' }));

var $country = $form.find( '[name=country]' )
.autocomplete(
'Services/Customers.asmx/Countries' ,
$.extend(paramsAutocomplete, {name: 'country' }));

* This source code was highlighted with Source Code Highlighter .

表示するフィールドを収集します。

var $table = $result.find( 'table' );

var labels = ( function (){
var res = [];
$table.find( 'thead th' ).each( function ()
{
res.push($( this ).attr( 'class' ));
});
return res;
})();

* This source code was highlighted with Source Code Highlighter .

次に、データソースであるWebサービスと連携するようにDataTableを構成する必要があります。

var lastLength = 10;

var dataTable = $table.dataTable({
bProcessing: true ,
bServerSide: true ,
sPaginationType: 'full_numbers' ,
sAjaxSource: 'Services/Customers.asmx/Search' ,
fnServerData: function ( sSource, aoData, fnCallback ) {

// aoData
var findByLabel = function (o, name)
{
var res = null , find = false ;
$(o).each( function (){
if (!find && this .name === name)
{
find = true ;
res = this .value;
}
});
return res;
};

// dataTable'
var convert = function (list)
{
var res = [];

$(list).each( function (){
var item = [];
var row = this ;

$(labels).each( function ()
{
item.push(row[ this ]);
});

res.push(item);
});
return res;
};

var onPage = aoData ? findByLabel(aoData, 'iDisplayLength' ) : lastLength;
var start = aoData ? findByLabel(aoData, 'iDisplayStart' ) : 0;
var sortField = aoData ? findByLabel(aoData, 'iSortCol_0' ) : 0;
var sortIsAsc = aoData ? findByLabel(aoData, 'sSortDir_0' ) === 'asc' : true ;

lastLength = onPage;

//
//
$.ajax( {
url: sSource,
data: $.toJSON({
name: $name.val(),
city: $city.val(),
country: $country.val(),
order: {
Field: labels[sortField],
Dir: sortIsAsc ? 'Ascending' : 'Descending'
},
start: start,
onPage: onPage
}),
success: function (data){

fnCallback({
iTotalRecords: data.d.Count,
iTotalDisplayRecords: data.d.Count,
aaData: convert(data.d.List)
});
}
} );
}
});

* This source code was highlighted with Source Code Highlighter .

私の意志であれば、このDataTableをまったく別の方法で記述していました 。 彼は彼と一緒に働くためにあまりにも多くの動きを必要とし、それは重いです。 私はこのコードが一番好きではなく、とてもかさばっています。 DataTableを使用すると、内部メカニズムを使用して同じ機能を実装できますが、コードの快適性はさらに低下すると思います。
送信処理をフォームに追加します

$form.submit( function (){

dataTable.fnDraw( true );

return false ;
});

* This source code was highlighted with Source Code Highlighter .

JSで完了です。 VSで最初に注目できることは、JSコードで作業することが便利になったことです。 理解できないインデントによるジャンプ、コード検証によるブレーキはもうありません。 jQueryヒントの存在と追加されたLint JSにより、VSは最高のJavaScriptコードエディターの1つになります。

Webサービス

WebサービスCustomers.asmxを作成し、[ScriptService]のコメントを外し、System.Web.Script.Servicesを使用して追加します。
メソッドを作成します。

• 文字列[] CompanyNames（文字列名）
• 文字列[]都市（文字列都市）
• 文字列[]国（文字列の国）
• 結果<VS2010.Customers>検索（文字列名、文字列都市、文字列国、ソート順、int start、int onPage）

必要な属性を追加します。

[WebMethod]
[ScriptMethod（ResponseFormat = ResponseFormat.Json）]

JSON形式での作業に必要です。テキストデータをウェブに転送するのに適しています。多くの理由があります。より簡潔、読みやすく、解析が高速です。
最初の3つのメソッドは同じ方法で入力されますが、そのうちの1つだけの例を示します。

using ( var context = new NorthwindEntities())
{
return context.Customers
.Where(c => c.CompanyName.Contains(name))
.Select(c => c.CompanyName)
.Distinct()
.OrderBy(n => n)
.ToArray();
}

* This source code was highlighted with Source Code Highlighter .

コンテキストを開き、見つけて、私たちに期待されることを返します。 Linq to Entitiesはこれをselectに変換し、ToArrayを呼び出したときにのみ実体化します。 ところで、なぜToArrayを特別に使用しているのですか。 その理由は、このサービスをWCFで動作させるのが簡単になるからです。 なぜなら 配列はコントラクトで記述できます。

より難しい検索：

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public Result<VS2010Lab.Customers> Search( string name, string city, string country, Sort order, int start, int onPage)
{
//
if (order == null || ! typeof (VS2010Lab.Customers).GetProperties().Any(f => f.Name == order.Field))
order = new Sort {Field = "CompanyName" , Dir = SortDirection.Ascending};

using ( var context = new NorthwindEntities())
{
//
var res = context.Customers
.Where(c => string .IsNullOrEmpty(name) || c.CompanyName.Contains(name))
.Where(c => string .IsNullOrEmpty(city) || c.City == city)
.Where(c => string .IsNullOrEmpty(country) || c.Country == country)
//
.Order(order);

// , DTO
return new Result<VS2010Lab.Customers>
{
// pagenator'
Count = res.Count(),
List = res.Paginate(
new ListFilter
{
Start = start,
Count = onPage
}
).ToArray()
};
}
}

* This source code was highlighted with Source Code Highlighter .

注意すべきこと：注文、ページネーション。 IQueryableの拡張機能として説明しました。

public static IQueryable Order( this IQueryable query, Sort sort)
{
return sort.Dir == SortDirection.Ascending ?
query.Order(sort.Field) :
query.OrderDescending(sort.Field);
}

public static IQueryable Order( this IQueryable query, string name)
{
return query.ApplyOrder(name, "OrderBy" );
}

public static IQueryable OrderDescending( this IQueryable query, string name)
{
return query.ApplyOrder(name, "OrderByDescending" );
}

public static IQueryable Paginate( this IQueryable query, IListFilter filter)
{
return filter.Count > 0 ? query.Skip(filter.Start).Take(filter.Count) : query;
}

* This source code was highlighted with Source Code Highlighter .

Entity Framework 4

ADO.NET Entity Data Model （edmx）を作成し、そこにCustomersプレートを追加します。

モデルの画面の白い領域でマウスの右ボタンで「突く」と「 コード生成項目の追加」を選択します



ここでは、VS 2010の別の機能であるオンラインテンプレートをダウンロードします。 開いて、 ADO.NET C＃POCO Entity Generatorを選択し、Northwind.ttなどの名前を入力して、[ 追加 ] をクリックします）

モデルプロパティ（F4）に移動し、次を選択します。

• コード生成戦略 なし
• DDL生成テンプレート Northwind.tt

これで、一連のデータオブジェクト（DO）とそれらを操作するコンテキストができました。 EF3.5のように、彼らは一緒に嘘をつきません）



出来上がり！ ）

結論

記事が大量にありましたが、VS2010だけでなく、このプロジェクトはまったく異なりますが、VS2010だけでなく、多くの懸念を取り上げませんでした。
私はまだ学生でしたが、VSのバージョン5で作業を開始しました。 それ以来、スタジオは大きく変わりました）そして、プログラマーの品質と使いやすさを改善するための注意が適切なレベルにとどまっていることを嬉しく思います。 また、MSが最終的にWeb開発者に直面したことを願っています。 IE5はHTML5のサポートを宣言しましたが、それはまったく別の話です）。
レビューから意図的に逃したものは、ささいなことを混乱させないために、プロジェクト自体で見ることができます。

ps：記事が気に入ったら、投票してください。 コンテストに参加します ）