読者です 読者をやめる 読者になる 読者になる

dai-mac64's blog

50代からのWEBアプリ開発とその他もろもろ

Web Application その1

APT.NET MVC SPA Web アプリ
サンプルを作ってみる
  • 空のプロジェクトを作成
  • ControllersフォルダにMVC 5コントローラを追加(Home)
  • 自動定義されたIndexアクションメソッドに対応するIndexビューを(Views\Homeフォルダーに)追加
  • HTMLのbody の div に適当な文言を記述し、実行

適当な文言がブラウザに表示されてめでたしめでたしとなると思ったら…

‘/’ アプリケーションでサーバー エラーが発生しました。

<customErrors> タグで “mode” 属性を “off” に設定する」ともっと具体的なエラーメッセージが表示されるそうな。 web.config に以下を追加する

<configuration>
 <system.web>
  <customErrors mode="Off"/>
 </system.web>
</configuration>`

ビュー ‘Index’ またはそのマスターが見つからなかったか…

追加したビューの名前が間違っていました。

次にTypeScript(JavaScript)を追加する
  • jQueryをインストール
    jQuetyってなんだ? JavaScriptのライブラリなんだって。
  • jquery.TypeScript.DifinitelyTypedをインストール
    TypeScriptで使用するためのjQueryの型定義ファイル 標準のTypeScirptではJQuery型に対応していないので。
  • TypeScriptファイルを記述
    <div>要素に文字列を追加するスクリプト
  • jquery-x.x.x.min.js をビューのhtmlのhead要素にdropして参照スクリプトを挿入
  • 先ほど記述したTypeScriptも同様に挿入

TypeScriptが実行されます。

Web APIコントローラも追加してみる
  • ControllersフォルダにWeb API 2コントローラを追加(Hello)
  • HelloControllerにGetHelloメソッドを追加
    ⇒WebAPIのルーティングルールによりURLは、
    /api/Hello/Hello
    ということになる。
    メソッド内でC#のオブジェクトを返すとJSONで返却される。

前出のTypeScriptを、WebAPIを呼び出した結果(JSON)を<div>要素に文字列を追加するスクリプトに変更する。 この呼び出しをAjax通信と呼ぶそうな。方法の名前ね。

ブラウザの開発者向けツール(F12)

DOMを見ることができたり、ブラウザからのリクエストとその応答などを確認できる。 これは、デバッグの強い見方になりそうだ。

デプロイ

とりあえず、インターネット上で動いている。最低限の骨組みが動いた。HTML+CSS+TypeScript(JavaScript)でUIを装飾して、WebAPI経由で取得したデータを表示するということになりそうだ。なんか作れそうな気がしてきた。
参考にした以下の書籍では、無料のAzure App Serviceに公開している。 WebサーバーでWebDeployを用いている。本当はもっと一般的な公開方法を知りたいが、それはもう少し先の話かな。

はじめてのASP.NET SPA開発入門 (マイクロソフト関連書)

はじめてのASP.NET SPA開発入門 (マイクロソフト関連書)