0

この記事は最終更新日から1年以上が経過しています。

@e_a_s_y

Razorで動的に属性適用する時の注意点

はじめに

.NET MVCでビューを作成するときに使用するRazorですが、渡されたデータから動的にclass属性を構築して適用するときに罠にはまりました。

本題

まずは以下のコードを見てください

@{
    var isEdit = true;

    var className = "baseClassName";

    <div class="@className">1</div>

    if (isEdit)
    {
        className += " isEdit";
    }

    <div class="@className">2</div>
}

image.png

このように適用したいクラス名を文字列で構築してあてることができます。

今回は"isEdit"というフラグをローカルで作っちゃいましたが、ほんとはモデルから渡されてくるような値と思ってください。
描画時にこれでいろいろと分岐するような役割です。

@を使うと変数が適用できるのですが、これだけがダブルクォートの中に入っているというのが慣れていないと違和感ありますね。
この時、以下のようにダブルクォートがないとなんと…

@{
    var isEdit = true;

    var className = "baseClassName";

    <div class=@className>1</div>

    if (isEdit)
    {
        className += " isEdit";
    }

    <div class=@className>2</div>
}

image.png

スペース以降がclass属性の値とならなくなり、独立した謎の属性となっています。

Razorは勝手にいい感じにはしてくれません。
属性適用時はダブルクォートを必ずつけましょう。

おわりに

今回はclass属性でしたが、idなどそのほかの属性でも同様です。

このバグで数時間やられてしまいました。
私は普段JavaScriptばっかりなので.NET MVCは本当に動きが掴みにくい…

ユーザー登録して、Qiitaをもっと便利に使ってみませんか。
  1. あなたにマッチした記事をお届けします
    ユーザーやタグをフォローすることで、あなたが興味を持つ技術分野の情報をまとめてキャッチアップできます
  2. 便利な情報をあとで効率的に読み返せます
    気に入った記事を「ストック」することで、あとからすぐに検索できます
e_a_s_y
生物学の分野からITの世界へ…

コメント

この記事にコメントはありません。
あなたもコメントしてみませんか :)
ユーザー登録
すでにアカウントを持っている方はログイン
記事投稿イベント開催中
Docker上のみでシステムを作るときの構成
~
夏の大納涼 Visual Studio / Visual Studio Code / GitHub Codespaces ♥ Azure 祭り
~