喜帳面の日記

50歳越えおやじのASP.NET MVC への挑戦日記です。

ASP.Netでいってみる RazorとWeb ページに チャレンジ 1

msdnのASP.NET 開発者向け技術情報からこんなページを発見しました。

『Razor 構文と ASP.NET Web ページ』

http://msdn.microsoft.com/ja-jp/asp.net/gg193039

『Razor構文』の勉強にいってみます。

f:id:SannomiyaNotes:20120822070819g:plain

我が家の環境は、以下の通りです。

・Winodws 7 (64-bit)

・Microsoft .NET Framework Version 4.0.30319 SP1Rel

・Visual Web Developer 2010 Express Edition SP1

WebMatrix  (2.0 RC)7.1.1587.0 

SQL Server 2012 Express Edition (64-bit)

f:id:SannomiyaNotes:20120822070819g:plain

これであなたも Web 開発者の仲間入り 無償で始めるカンタン Web 開発入門 Microsoft WebMatrix 詳しくはこちら

f:id:SannomiyaNotes:20120822070819g:plain

 ■■ はじめてのWebMatrix ■■

はじめに、新しいWebサイトと単純なWebページを作成します。

1. WebMatrixの起動

f:id:SannomiyaNotes:20120821172236g:plain

2. 「テンプレート」をクリックします。

f:id:SannomiyaNotes:20120821172328g:plain

3. 「Empty  Site」を選んで、サイト名に「Hello World」と名前を付けます。

4. [OK] をクリックします。WebMatrixは新しいサイトを作成して、開きます。

f:id:SannomiyaNotes:20120821172617g:plain

 

f:id:SannomiyaNotes:20120822070819g:plain

■■ Webページの作成 ■■ P10

1. WebMatrixで、「ファイル」ワークスペースを選びます。

左下の「ワークスペース セレクター」から「ファイル」を選択

f:id:SannomiyaNotes:20120821173058g:plain

2. リボンで、[新規] をクリックし、さらに [新しいファイル] をクリックします。

WebMatrixは、ファイルの種類の一覧を表示します。

f:id:SannomiyaNotes:20120821173518g:plain

3. [CSHTML] を選び、[名前] 入力ボックスで「default.cshtml」と入力。

4. [OK] をクリックします。WebMatrixは次のようなページを作成し、エディターで開きます。

f:id:SannomiyaNotes:20120821173928g:plain

※1~3行目に

@{ 
}
が追加されてます。

 5. このページに、次のようにタイトル、ヘッダー、パラグラフ コンテンツを追加します。

f:id:SannomiyaNotes:20120821174311g:plain

6. クイック アクセス ツールバーで、[保存] をクリックします。

7. リボンで、[実行] ボタンをクリックします。

f:id:SannomiyaNotes:20120821180911g:plain

※実行ボタンの部分がリストになっていて、各種ブラウザが選択可能になっています。

Windows Phone 7(エミュレータ) も選択可能。選択するとエミュレータがインストールできました。Windows Phone 7で表示すると、小さな「Hello World!」が表示されました。

f:id:SannomiyaNotes:20120821181629g:plain

それじゃ、ついでに

 f:id:SannomiyaNotes:20120822094405g:plain

実行ボタンのリストから[新規追加]を選択。

「ブラウザー拡張機能ギャラリー」が表示された。

f:id:SannomiyaNotes:20120822094716g:plain

iPad Simulator を選択し[インストールする]を押下。

f:id:SannomiyaNotes:20120822095031g:plain

[インストールする]を押下。

ソフトウエアライセンス条項に同意のページで[同意する]を押下

お待ちくださいが表示されて待つこと数分でインストール完了。

尚、リボンのギャラリー拡張機能でもインストールできます。

 

いろんなブラウザーが並びました。

f:id:SannomiyaNotes:20120822100058g:plain

さっそくiPadで表示してみると こんな風です。

f:id:SannomiyaNotes:20120822100448g:plain

検索フィールドをクリックすると

f:id:SannomiyaNotes:20120822100515g:plain

ソフトウエアキーボードが表示されて

(キーボードは押せませんが)それらしくなります。

f:id:SannomiyaNotes:20120822102242g:plain

iPhone iPadのデバイスやオリエンテーションも相互に切り替え可能で、普通にブラウザとして動作しますね。

 いいっすねこれ。

f:id:SannomiyaNotes:20120822070819g:plain

■■ 管理ツールを使ったヘルパーのインストール ■■ P12

1. WebMatrixで、「サイト」ワークスペースをクリック。

2. コンテンツ ペインで、「ASP.NET Web ページの管理」をクリック。

3. パスワードを作成します。

f:id:SannomiyaNotes:20120821200217g:plain

f:id:SannomiyaNotes:20120821200546g:plain

4. ブラウザーでセキュリティ チェック ページを表示したまま、WebMatrixに戻り、「ファイル」ワークスペースをクリック。

5. 「Hello World」フォルダーを右クリックして、[最新の情報に更新] メニューを選びます。

f:id:SannomiyaNotes:20120821210841g:plain

6. ファイル名から先頭のアンダースコア(_)文字を削除して、「Password.config」に変更。

7. ブラウザーのセキュリティ チェック ページに戻り、「ここをクリック」リンクをクリック。

8. 作成したパスワードを使って、管理ページにログイン。

このページは、アドオン パッケージの一覧を含むパッケージ マネージャーを表示します。

f:id:SannomiyaNotes:20120821220129g:plain

9. 「ASP.NET Web Helpers Library 1.1」パッケージを探して、[インストール] ボタンを押し、指示に従ってこのパッケージをインストールしてください。

ASP.NET Web Helpers Libraryは、2.0 になってました。

f:id:SannomiyaNotes:20120821221417g:plain

ところが、インストールはエラーに!

f:id:SannomiyaNotes:20120821221902g:plain

どうやってエラーの原因を探ればいいのか、あまりにもシンプルなページです。

こんなときは取り敢えずもう一回やってみよう。

再度「管理ページ」にログインすると。

f:id:SannomiyaNotes:20120821230506g:plain

あれ、アンインストールが選択できるようになってる。インストールできたってことかも。でも、中途半端は気持ち悪いんで思い切ってアンインストール。

f:id:SannomiyaNotes:20120821230921g:plain

アンインストールは正常に終了したようです。

もう一度、インストールしようとしましたが。これからが大変でした。

なかなか「ASP.NET Web Helpers Library」を見つけられません。

検索かけても、引っかかってんのか検索できてないのか全然わからないです。中国語や韓国語その他いろんな言語のが表示され、次ページに進むのもめちゃめちゃ遅いし、あきらめたくなる気持ちをなんとかなだめつつ、気長にページを送っていくと 17/23 ページでやっと「ASP.NET Web Helpers Library 2.0.20710.0 」を発見。

さあインストールしようと、インストールボタン押下してしばらくしたら、またエラーで終了。

パッケージマネージャーで「インストール済」のフィルタかけて表示すると「ASP.NET Web Helpers Library 2.0.20710.0 」が先頭に表示されてきた。

正常に終了はしなかったんだが、、もういいやエラー表示されたけどきっとうまくインストールされたものとして先に進まないと。かなり疲れました。