KatsuYuzuのブログ

.NET の開発をメインとした日記です。

カスタムモデルバインダーのすゝめ #aspnetjp

ASP.NET .NET

この記事はASP.NET Advent Calendar 2015 - Qiitaに参加しています。17日の担当です。前日は id:minato128 さんでした。

カスタムモデルバインダーのすゝめ

f:id:KatsuYuzu:20151217023340p:plain
ASP.NET MVCではモデルバインダーという仕組みで、リクエストの値をモデルに紐づけてくれます。自分でFormの中身やクエリーストリングを見たり、パースしたりしなくてもいい素晴らしい仕組みです。お手軽さ、直感さ、大好き。
そして、もちろんカスタマイズできます。和暦 "H27/12/17" を DateTime 型にしたいなんて闇もモデルバインダーで済ませられれば捗ります。

_________________________ 
　　　　＜○√ 
　　　　　∥　 　　←モデルバインダー
 　　　　 くく

作成方法

  1. DefaultModelBinder を継承
  2. BindModel をオーバーライド
  3. カスタムモデルバインダーの登録

DefaultModelBinder を継承 ～ BindModel をオーバーライド

DefaultModelBinder を継承して BindModel をオーバーライドするだけです。その中でモデルステート用の設定を呼び出す等の多少のお作法がある程度。
今回は "1,000" というカンマ区切りの数値文字列を数値型で受け取れるようにしてみます。*1

DefaultModelBinder を継承

数値型の部分をジェネリックにして、型制約を適当に。*2

/// <summary>
/// 1000 の桁で区切られた数字のブラウザー要求を数値型に対応付けます。
/// </summary>
/// <typeparam name="T">対応付ける数値型。</typeparam>
public class ThousandsSeparatorNumberBinder<T>
    : DefaultModelBinder
    where T : struct, IConvertible
{}
BindModel をオーバーライド

多少のお作法を守りながら変換するだけ。唐突に登場している Parser は後述。

public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
{
    var valueProviderResult = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);

    if (valueProviderResult == null)
    {
        return base.BindModel(controllerContext, bindingContext);
    }

    // モデルステートの設定
    bindingContext.ModelState.SetModelValue(bindingContext.ModelName, valueProviderResult);

    // 値の文字列
    var valueString = valueProviderResult.AttemptedValue;

    // 以下、変換処理

    if (string.IsNullOrWhiteSpace(valueString))
    {
        return null;
    }

    try
    {
        return Parser(valueString);
    }
    catch (Exception ex)
    {
        bindingContext.ModelState.AddModelError(bindingContext.ModelName, ex);
        return null;
    }
}
カンマ区切りの数値文字列を数値型に変換

int.Parse に NumberStyles フラグを渡すことで簡単に実現できます。ただ、数値型は複数あるのでそこは頑張ります。パース時のオーバーフロー例外を期待するとか考慮するとそれぞれきっちり。

/// <summary>
/// 送信された文字列の変換に使うパーサー。
/// </summary>
private static readonly Func<string, object> Parser;

/// <summary>
/// パーサーを初期化します。
/// </summary>
static ThousandsSeparatorNumberBinder()
{
    // short, long は int と同様、float, double は decimal と同様なので割愛
    var parsers = new Dictionary<Type, Func<string, object>>
    {
        {
            typeof(int), 
            (string value) => int.Parse(value, NumberStyles.Integer | NumberStyles.AllowThousands)
        },
        {
            typeof(decimal), 
            (string value) => decimal.Parse(value, NumberStyles.Number)
        }
    };

    Parser = parsers[typeof(T)];
}

カスタムモデルバインダーの登録

アプリケーション全体、または、コントローラーのアクションで登録します。今回はプリミティブな型向けなのでアプリケーション全体で登録するのが良いかと思います。

// モデルバインダーの登録
// グローバルで一括登録するならキー型は nullable も忘れずに！
// カスタムバインダー側は nullable でなくておｋ。
// コントローラーやアクションでの個別利用なら適宜どうぞ。
ModelBinders.Binders.Add(typeof(int), new ThousandsSeparatorNumberBinder<int>());
ModelBinders.Binders.Add(typeof(int?), new ThousandsSeparatorNumberBinder<int>());

結果

やったね！
f:id:KatsuYuzu:20151217023340p:plain

サンプル

ASP.NET MVC カスタムモデルバインダー - Gist

バトンタッチ

qiita.com

*1:和暦の話は面倒なのでいつか。

*2:いつも思うんですが数値型制約とか欲しいよ！

Microsoft Azureで描く未来！ in 札幌 CLR/H & Windows女子部 #clrh96 を開催しました。

Community

Microsoft Azureで描く未来！ in 札幌 CLR/H & Windows女子部を開催しました。

Microsoft Azureで描く未来！ in 札幌 CLR/H & Windows女子部

  • AzureでMinecraftサーバー JAZUG札幌 松田さん
  • AzureでIoT CLR/H 吾郷さん
  • スペシャルセッション ジニアス平井の世界
  • ハイパーおやつタイム
  • 私がAWSから学んだこと JAWSUG札幌 佐藤さん
  • スペシャルセッション デプロイ王子
  • LT

togetter.com
去年も来ていただいたWindows女子部の方々と今年も前夜祭～勉強会～富良野ツアーを行いました。僕は今年も富良野ツアーに参加出来ず；－；
今回はクラウドがテーマでしたのでJAWSUG札幌の佐藤さんをお誘いしてお話してもらいました。佐藤さんとは会社の先輩に連れてってもらった飲み会で知り合ってから、OSCや技術系のカンファレンスでご挨拶してもらうなどしていた不思議な縁で、いつかコミュニティでご一緒できたらなーと思っていたので今回叶いました＼(^o^)／
結果的に4?コミュニティの発表があって、これは個人的に嬉しかったです。
内容は今回女子部の活動記録にかなり細かく書いてくださっていました。

angularjsで画面表示時に実行前の式が表示されないようにするng-cloak

TypeScript AngularJS ASP.NET

angularjsで画面表示時に実行前の式が表示されないようにするng-cloak。何も対策せずに実行すると画面表示時に一瞬だけ{{hoge.piyo}}と見えたりします。それの対策。

環境

  • TypeScript 1.4
  • AngularJS 1.4.1

ng-cloak

HTMLで隠したい領域にng-cloakという属性を付けて、CSSの属性セレクターで非表示にするだけです。

<div ng-cloak>
    {{hoge.piyo}}
</div>

[ng-cloak] {
  display: none !important;
}

ng-cloak属性はangularjsのコンパイル時に削除されます。つまり、CSSで非表示にしていた属性が削除され、表示されるようになるということです。

document.titleをangularjsで制御する

似たような事象でdocument.titleで{{hoge.title}}とすると一瞬だけブラウザのタイトルに式が見えてしまいます。これはng-bindを使うことで解決します。

<!--
    angularjs の初期化前に expression が表示されないように初期値と ng-bind の両対応
-->
<title ng-bind="hoge.title">CLR/H ～Cafe～</title>

ソース

github.com

勉強会で紹介しました

clrh.connpass.com

参考