VS 2010:ASP.NET、HTML、Javascriptスニペットのサポート

画像

この記事では、VS 2010のもう1つの興味深い革新について説明します。HTML/ ASP.NET / JavaScript スニペット (フラグメント)のサポートです。 スニペットを使用すると、コードをより効率的に操作し、最小限の文字を入力しながら、アプリケーションで再利用するためのコードを作成できます。



Visual Studioは、以前のバージョンのVBおよびC#のスニペットの概念をサポートしていましたが、HTML、ASP.NETマークアップ、およびJavaScriptのスニペットの概念はサポートしていませんでした。



ASP.NETスニペットの使用



スニペットを使用して簡単なセキュリティスクリプトをすばやく実行する方法を見てみましょう。 特に、承認ステータスに応じて、サイトの右上隅に「[Login] link」または「[Welcome、User]」メッセージを表示するために必要な機能を実装します。



画像



このページは、MS 2010でASP.NET Project Starter Templateプロジェクトを作成すると自動的に表示されます。このレビューでは、クリーンなマスターページを使用して、すべてをゼロから構築します。



まず、標準の<div>要素をマスターページに追加し、その中にコードを記述します。



画像



<asp:loginview>組み込みコントロールを使用して、スクリプトを実装します。 <asp:loginview>コントロールは、ASP.NET 2.0で最初に導入されたテンプレートコントロールです。これにより、「匿名」テンプレートと「承認されたユーザー」テンプレートを簡単に切り替えることができます。 <asp:loginview>を手動で入力する代わりに、新しいスニペットを使用します。



エディターで「<log」と入力すると、IntelliSenseはこれらの文字で始まる利用可能な要素、コントロール、スニペットを表示します。



画像



リストから組み込みの「ログインビュー」スニペットを選択し、Tabキーを押して完了します。



画像



目的のスニペットを選択したので、もう一度Tabキーを押して起動する必要があります。これにより、スニペットがすぐに次のマークアップに置き換えられます。 スニペットは新しい<asp:loginview>コントロールを追加し、その中で最も一般的に使用される2つのテンプレートを自動的に宣言していることに注意してください。 その結果、「<log」と入力してからTabキーを2回押すために、6つのキー(4つ)を押すだけでした。



画像



「AnonymousTemplate」に入力してみましょう。



エディターで「<a」と入力すると、intellisenseは使用可能な要素とスニペットを表示します。



画像



リストから組み込みスニペット「a」を選択し、Tabを押します。 Tabをもう一度押した後、スニペットを起動します。スニペットは次のマークアップに置き換えられます。



画像



「href」属性の値と<a>要素の内部コンテンツが緑色で強調表示されます。 これは、これらの値が交換可能なパラメーターであり、矢印またはマウスを使用せずに、Tabを使用して値を切り替えることができることを意味します。



矢印キーまたはマウスを使用する必要なく、ユーザーが許可されていない場合に送信するページのURLログインページの入力を開始できます。



画像



URLの入力が完了したら、Tabキーを押すと、VSがエディターで2番目のパラメーターを自動的に強調表示します(カーソルやマウスの移動は不要です)。



画像



これで、表示するテキストを入力できます(ここでも、マウスカーソルを移動せず、矢印キーを押しませんでした)。



画像



「<AnonymousTemplate>」を見つけたら、「<LoggedInTemplate>」に移動できます。 エディターで「<log」と入力し、リストから「loginname」スニペットを選択します。



画像



Tabキーを押すと、スニペットは次のマークアップを生成します。



画像



「FormatString」プロパティの値は、デフォルトのウェルカムテキストを使用して自動的に生成されました。 値は、変更する場合に自動的に強調表示されます。 この例では、デフォルトのテキストのままにします。



最終的なマークアップは次のようになります。



画像



アプリケーションを起動すると、承認されていない場合、上記のマークアップに「[Login]」リンクが表示されます。



画像



ログインすると、ウェルカムラインは次のようになります。



画像



上記のシナリオを実装するためのキーストロークの総数は、以前に行っていた作業の15%未満です。 より速く入力すると、上記のシナリオを15秒未満で実装できることがわかりました:-)



ASP.NET MVCスニペット



組み込みのスニペットは、すべてのASP.NETコントロールとHTMLマークアップ要素で使用できます。



組み込みのスニペットは、単純なASP.NET MVCビュースクリプトおよび組み込みのASP.NET MVC HTMLヘルパー(ヘルパー)でも使用できます。



たとえば、ASP.NET MVCの形式で「<act」と入力し、「actionlink」スニペットを選択できます。



画像



スニペットを実行した結果、次のコードが取得されます。



画像



「linktext」および「actionname」の値はスニペットパラメーターとして強調表示されていることに注意してください。これは、マウスまたは矢印を使用せずに変更できることを意味します。 最初のパラメーター「linktext」がデフォルトで選択されています。すぐに値を設定し、Tabキーを押して「actionname」パラメーターの値を設定できます。



画像



カスタムスニペット



Visual Studio 2010には、プログラムのインストール後すぐに使用できる200以上の組み込みスニペットが含まれています。



ただし、最も重要なことは、組み込みスニペットの使用に制限がないことです。 独自のスニペット(交換可能なパラメーターをサポート)を作成し、VS 2010にインポートして、スニペットを他の開発者と共有できます。 これにより、独自のタスクを簡単に自動化できます。



この記事では、VS 2008で既に実装されているスニペットのサポートについて説明し、独自のスニペットを作成および管理する方法についてもう少し情報を提供します。



おわりに



スニペット-エディターでのキーストロークの数を減らし、さまざまなアクションやタスクの実装速度を上げることができる非常に便利な機能。 また、VBとC#だけでなく、HTML、ASP.NET、およびJavaScriptファイルにもスニペットを追加すると、この機能がさらに便利になり、生産性がさらに向上します。



All Articles