【ASP.NET MVC5】Bootstrap 拡張の DatePicker を使う手順とポイント

スポンサードリンク


ポイント

  • 標準で日本語対応しているのが嬉しい。
  • DatePicker のフォーマットは yyyy-mm-dd とし、input date で使用するフォーマットに合わせること。これにより、DatePicker も input type date も両方使用できる。
  • Chrome や Edge だと input type date も、DatePicker for Bootstrap も両方有効になり、好きな方で操作できる。input type date の yyyy/MM/dd フォーマットで表示された。
  • Internet Explorer だと DatePicker が効いて yyyy-MM-dd フォーマットで表示される。
  • input date は IE が対応していないため、後数年もすれば input date で DatePicker と同等のことができるようになるであろう。そうすると、DatePicker for Bootstrap は不要となると思う。

導入流れ、使い方まとめ

DatePicker 導入までの流れ

  1. パッケージマネージャーコンソールから DatePicker をインストール
  2. Datepicker 動作用の JavaScript を書く。
  3. BuldleConfig に DatePicker と 動作用の JavaScript を読みこませるよう記述
  4. _Layout.cshtml などのビューに、BuldleConfig で設定したパスを記述

DatePicker を使用するには、の例まとめ

  • モデルのプロパティの DataType を Date に指定
  • モデルのプロパティの DisplayFormat の DateFormatString を yyyy-MM-dd に、ApplyFormatInEditMode を true に設定する。
  • ビューではタグの class に DatePicker 動作用のクラスを追加する。

DatePicker 導入の具体的な手順・コード

“【ASP.NET MVC5】Bootstrap 拡張の DatePicker を使う手順とポイント” の続きを読む

Windwos で ログファイルを tail -f する方法

ポイント

  • PowerShell 3 以上を使用する。
  • コマンド
    Get-Content -Tail 10 -Wait -Path "C:\Path\To\logFile.log"
    
  • Windows のパスは途中で半角スペースが入ることがあるため、ダブルクォーテーション「”」で囲んでおく。

PowerShell のバージョン確認方法とアップグレード方法

“Windwos で ログファイルを tail -f する方法” の続きを読む

【ASP.NET MVC5】ちょっとしたお試しをするときに土台となるアプリの作り方チュートリアル

完成アプリキャプチャ。Children コントローラーの Index アクション

2016年8月16日追記: 本投稿のコードをアップいたしました。

追記: 【ASP.NET】【MVC5】お試しウェブアプリチュートリアルのエラーを解決 – oki2a24 で説明した通り、エラーを回避するために手順を一部変更しております。

サンプルアプリ概要

MVC 関係

  • スキャフォールディングで各テーブルのコントローラー、ビューをぱっと作って済ませる。
  • 認証なし

データベース関係

  • データベース名: ApplicationDb
  • テーブル
    • Parents
    • Children
    • Sexes ← 男、女が入っているだけのマスタテーブル
  • リレーション
    • Parents 1-n Children
    • Parents n-1 Sexes
    • Children n-1 Sexes
  • レコードから見るテーブルのリレーション表現は
    • Parents には Children 関係のカラムは無い。
    • Children は ParentsId カラムを持ち、親を指定する。
    • Parents と Children は SexId を持ち、性別を指定する。
    • Sexes には、他テーブル関係のカラムは無い。

それでは実際に作っていきましょう♪

“【ASP.NET MVC5】ちょっとしたお試しをするときに土台となるアプリの作り方チュートリアル” の続きを読む

【ASP.NET MVC5】log4net の導入手順メモ♪

ロギングのライブラリ、log4net を使う理由

ログのライブラリを使う理由は、次の2つです。

  • ファイルのロック、排他制御をしてくれる
  • 自動的にローテーションをしてくれる

log4netNLog の2種類がメジャーなようです。

  • log4net の方が歴史が長く、インターネット上の知見が多い。
  • log4net の方が「枯れた技術」となっていそう。
  • NLog の方が更新されている。
  • NLog の方がパフォーマンスが優れている、というページがある。

今回は、歴史とノウハウが大きいという理由で log4net を採用いたしました。

では早速導入手順を残してまいります。2種類のやり方を解説いたします。

どちらもASP.NET MVC5 プロジェクトを作成し、アクティブになっている状態からスタートです♪

【log4net を ASP.NET MVC5 プロジェクトに導入する方法1】Web.config にログ設定を書くやり方

“【ASP.NET MVC5】log4net の導入手順メモ♪” の続きを読む

【ASP.NET MVC5】モデルの bool プロパティをビューでラジオボタン表示するサンプル♪

Index や Details、Delete の確認画面での表示の様子
Index や Details、Delete の確認画面での表示の様子

Create と Edit での表示の様子
Create と Edit での表示の様子

本投稿のサンプル内容

  • ソリューション名: Test1
  • プロジェクト名: Test1
  • ASP.NET Web アプリケーション Visual C#
  • ASP.NET 4 の、MVC
  • 認証: なし
  • モデル Person
  • Person のコントローラー PeopleController をスキャフォールディングで作成

モデルのプロパティで、型が bool のもので、次の 3 パターンの例を作成します。

  • Sex: 性別。チェックボックス。チェック有りがどちらで、チェック無しがどちらかは、補足しないと判別が難しそう。
    スキャフォールディング時のデフォルト。
  • IsRightHanded: 利き手。新規作成や編集のフォームはラジオボタンで「右利き」「左利き」を選択する。一覧や詳細では、「右利き」「左利き」を表示する。
    そうするために、コードを書く。本投稿のメイン。
  • IsActive: 有効かどうか。ドロップダウンリスト。自動的にドロップダウンリストが表示されるが、選択肢は「Not Set」「True」「False」であり、変更方法が不明なため使い途が難しい。

“【ASP.NET MVC5】モデルの bool プロパティをビューでラジオボタン表示するサンプル♪” の続きを読む

【ASP.NET MVC5】チュートリアルの Data Source には MSSQLLocalDB を指定すること!【Visual Studio 2015】

Web.config の データベース接続文字列のポイント

  • <connectionStrings> の Data Source
  • (LocalDb)\v11.0; だと繋がらず、エラーとなる。
  • (LocalDb)\MSSQLLocalDB; とする。

“【ASP.NET MVC5】チュートリアルの Data Source には MSSQLLocalDB を指定すること!【Visual Studio 2015】” の続きを読む

【簡単ウマイ】豚の軟骨、パイカの中近東風カレー

豚の軟骨、パイカカレーをいただきます!

ポイント

  • まず肉とカレールー(野菜以外のすべての材料)を鍋に入れて混ぜる。野菜は混ざったあとに入れる。
  • トマト缶が全形、ホールの場合は、握りつぶすとトマトの汁が飛び散る。そこで、親指人差し指中指でまずトマト缶の全形トマトを小さくちぎると飛び散らない。
  • 野菜を鍋に入れるとき、かき混ぜる手のカレーを落としながら入れると、あとで手を洗うのが楽になる。
  • サラダ油は入れない。
  • カレーはまず弱火で 1 時間煮込む。豚パイカの軟骨の柔らかさを確認すると大体固い。そこで弱火でさらに 1 時間ほど煮込む。時間は適当に調整する。

材料

“【簡単ウマイ】豚の軟骨、パイカの中近東風カレー” の続きを読む

【Mac】Safari バージョン 9 の操作メモ

タブ操作

  • ウインドウ > すべてのウインドウを結合 → タブが 1 つだけでタブバーの無いウインドウを別のウインドウに戻すことができる。
  • 間違えてタブ閉じちゃった><。 → command + Z (編集 > 取り消す)
  • タブ閉じてしばらく作業してから、閉じたタブを再度開きたい → 「履歴」から開きたいタブを command + タップ (新規タブで開く)

開発系

  • 「開発」メニューを表示 → command + , (Safari > 環境設定) > 「詳細」タブ > 「メニューバーに”開発”メニューを表示」にチェック
  • HTML や CSS の要素を見る → 調べたい部分を選択し右クリック > 「要素の詳細を表示」

一般

“【Mac】Safari バージョン 9 の操作メモ” の続きを読む

「英数」キーで直接入力モードにする方法【Mac】【Boot Camp】【Google 日本語入力】【Windows 10】

Google 日本語入力の Muhenkan のコマンドを変更

ポイント

  • 直接入力モード状態 = IME 無効状態 ≠ 半角英数
  • [英数] キー = [Muhenkan] キー
  • [英数] キーに割り当てるのは、「半角英数に入力切替」ではなく、「IME を無効化」

環境

  • Macbook Pro
  • Boot Camp 上の Windows 10 Pro
  • Google 日本語入力

「英数」キーで直接入力モードにする手順

  1. 画面下のタスクバーの IME オプションを右クリック > プロパティ
  2. 一般タブ > キー設定の選択で、MS-IME となっているのを確認し、「編集…」
  3. 入力キーでソート、Muhenkan のコマンドを以下のように変更し、「OK」
    モード 入力キー コマンド
    変換前入力中 Muhenkan IME を無効化
    変換中 Muhenkan IME を無効化
    入力文字なし Muhenkan IME を無効化
  4. キー設定の選択が、MS-IME からカスタムへと変更されていることを確認

“「英数」キーで直接入力モードにする方法【Mac】【Boot Camp】【Google 日本語入力】【Windows 10】” の続きを読む