文書の過去の版を表示しています。
目次
Web開発(ASP.NET系)
HTMLカラーコード
画面レイアウト(Bootstrap)
Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。
- Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。
- ライセンスは MIT License で、商用利用も可能です。
※ASP.NETのBoostrap 3.3.7は、jQuery 1.19.1に依存している。
参照
jQuery
2017/03/21現在の最新版は「jQuery 3.1.1」となる。
1.1x系 | Internet Explorer 8(IE8)の下位バージョンに対応 |
---|---|
2.x系 | IE9以上、Google Chrome、Firefox、Safariをはじめとしたモダンブラウザ用 |
3.x系 | 軽量化、高速化をコンセプトにして開発。 |
開始ページを指定する
Visual Studioのプロジェクトを選んで右クリック、「プロパティ」。
「Web」の「開始動作」の「ページを設定する」で、URLにあたる箇所(localhost:57210/以降)を設定する。
参照:スタートさせる最初のページ(URL)の指定
設定ファイルを読む
XML形式の設定ファイルを読み込み、DataTable型にセットする。
- ReadCofig
private DataTable ReadConfig() { DataSet ds = new DataSet(); string path = HttpContext.Current.Server.MapPath("~/App_Data/config.xml"); ; using (System.IO.StreamReader xml = new System.IO.StreamReader(path)) { ds.ReadXml(xml); } return ds.Tables[0]; }
- config.xml
<?xml version="1.0" encoding="utf-8" ?> <config> <data SystemType="HT" SystemName="部材受入れシステム" TableID="RESH003040" TableName="部材受入れ実績" Column="EC,ED" /> <data SystemType="HT" SystemName="部材払出しシステム" TableID="RESH003050" TableName="部材受入れ実績" Column="EC,ED" /> </config>
Viewが表示される基本的な流れ
HomeControllerのIndex Actionが呼ばれたとき下記のような流れで処理されます。
- /Views/_ViewStart.chtmlが読み込まれる
- /Views/Shared/_Layout.chtmlが読み込まれる(1.で指定しているから)
- 2.の_Layout.chtml中の@RenderBody()が呼ばれる(2. に記述されているから)
- /Views/Home/Index.chtmlが呼ばれる
- 必要に応じて@RenderSection()が呼ばれる
- @RenderBody()はテンプレートに1箇所のみ
- @RenderSection()は複数箇所でも可
参照
データ受け渡し
ViewBag、ViewData、TempDataを使用する。
ASP.NET MVC の ViewData、ViewBag および TempData
ViewBag、ViewData
ViewBagとViewDataの違い
違いは型の安全性です。ViewData はキャストか型変換が必要となります。
ViewBagはMVC3からサポートされているものでMVC2以前のものはViewDataのみしか選択肢がなかった。
ViewData vs ViewBag vs TempData
TempData
TempData の正体
TempDataは、「セッション状態(Session)」のラッパーライブラリです。
TempData の正体
アイドル状態のワーカープロセスのスワップアウト
IISのアプリケーションプールのアイドル状態のタイムアウトは20分になっている。
この状態では、一定時間アイドル状態(アクセスのない状態)になったワーカープロセスは、タイムアウトされプロセスが停止していた。これにより、頻繁にアクセスのないWebサイトに関してはメモリの消費を抑えられるというメリットがあった。しかし、その分、タイムアウトされた後に来た最初のリクエストに関してはワーカープロセスを起動し直す分、応答に時間がかかっていた。
Windows Server 2012 R2とIIS 8.5の新機能
20分放置後だと初回のページ呼び出しに時間がかかる。対応としてアイドル状態のタイムアウトは 0分 にして回避する。
また、IISリセット後の初回のページ呼び出しに時間がかかるのは、後述の「ASP.NETアプリの起動を高速化(ウォームアップ)」で解消できる。
ASP.NETアプリの起動を高速化(ウォームアップ)
ASP.NETアプリケーションは初回のページ呼び出しがあった時に、アプリケーションの初期処理(ビルドなど)が実施されます。そのため、ファーストユーザーがページにアクセスした時に遅いと感じることがあります。
IISのApplication Initialization機能を有効にしておくと、起動時にIISがアプリケーションを呼び出しておいてくれます。そのため最初のユーザーがアクセスした時の体感速度を向上させることができます。
設定
参照
リソースのメッセージ使用
リソース用フォルダ(例 Resources)を作成する。
リソースファイル(例 Messages.resx)を作成して、アクセス修飾子を「Public」とする。
先頭に@usingでこのページで使用するリソースフォルダを指定する。
文字列を取得したい部分で、「@ResourceFile.name」と記述する。
@using mvctest.Resources; <input type="button" value=@Messages.cstButton1 > <!-- 行追加 --> <input type="button" value=@Messages.cstButton2 > <!-- 確定 --> <input type="button" value=@Messages.cstButton3 > <!-- 行削除 -->
リソースの多言語化
BINフォルダに頻繁な更新ファイルを置かない
ASP.NETは仕組み上、BINフォルダ内のファイルの更新を検知すると、アプリケーションを再起動するようになりセッション切れが発生する。
BINフォルダにはDLLなど滅多に更新されないファイルのみを配置する。
※頻繁に更新される出力ファイル(PDF)やログは、BINフォルダ以外の別フォルダに作成すること。
アプリケーションが再起動すると、初期状態になりASP.NETの呼出しに時間がかかってしまう。
VSデバッグ時の「これ以上ファイルがありません。」
Visual Studio上のWeb開発で「Internet Exploler」を使用してデバッグしようとすると、「これ以上ファイルがありません。」のメッセージ画面が表示されて、デバッグが出来なくなってしまう。
別のブラウザ(例 Chrome)にするとデバッグは出来る。
対応
タスクマネージャーで「iexplore.exe」を全て削除する。コマンドでは「taskkill.exe /F /IM iexplore.exe」
これで駄目なら、プロジェクトの右クリックメニューで「クリーン」を実行する。
これでも駄目なら、PC再起動
there are no more files error using express 2012 for web
これでも駄目なら、IIS Expressをコマンドラインで動作確認してみる
開発用 Web サーバー IIS Express をコマンドラインから使用する方法
これでも駄目なら、ソリューションファイルとプロジェクトを一から作り直す。
Tips
Index.d.tsにてRecordが見つかりません
TypeScriptのバージョンが古いとのことで、NuGetで最新版2.9.2を入れたがエラーが解消されなかった。
Cannot find name 'Record' in index.d.ts build error
Build error “Cannot find name 'Record'” with bootstrap 4
TypeScript for Visual Studio 2015 をインストールしたらエラーが解消された。
https://www.microsoft.com/ja-JP/download/details.aspx?id=48593
ふわっと表示して徐々に消えるメッセージ
<div id="alert" class="alert alert-danger mt-2" role="alert"><span class="fa fa-exclamation-circle pr-2"></span>@ViewBag.MsgError</div> <script type="text/javascript"> $('#alert').fadeIn(1000).delay(3000).fadeOut(2000); </script>
textarea の横幅が指定したサイズにならない
- 例
<textarea style="width:1015px" rows="5" class="ml-3">
原因は site.css を読み込んでいるため 280pxで横幅が固定されていた。
site.cssはASP.NETプロジェクト固有のスタイルシートです。
AJaxで複数のJSONデータをPOSTする
POST用に専用のViewModelを作成すればいい。
[ASP.NET MVC] JSONを受け取る、JSONを返す
AJaxでローディング画像の表示
非同期通信の開始/終了/成功/失敗のタイミングで処理を実行するには?(ajaxXxxxx)
<form> <div id="spinner" style="display:none;"><img src="ajax-loader.gif" /></div> <ul id="result"></ul> </form> <script> $(document) .ajaxStart(function() { $('#spinner').show(); }) .ajaxStop(function() { $('#spinner').hide(); }); </script>
フォントのwoff2ファイルのMIME登録
IIS上でbootstrapのwoff2ファイルを使う際には注意が必要。デバッグ時にはエラーにならない。
MIMEにフォントの「woff2」の拡張子が登録されていないため取得できない旨の404エラーが出る。
IISでMIMEの追加をすればよいが、設定忘れも考慮してWeb.configに設定を追加する方法がある。
MVCの場合、Viewにあるweb.configに下記の設定を追加する。
- web.config
<system.webServer> <staticContent> <remove fileExtension=".woff2" /> <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" /> </staticContent> </system.webServer>