web-dev-qa-db-ja.com

DisplayFor（）のMVC Razorテンプレートを作成する方法

ビューモデルに表示専用のプロパティがいくつかありますが、ページで計算を実行するにはjQueryを使用してそれらの値を取得する必要があります。標準のHtml.DisplayFor（）メソッドは、その値をページに書き込むだけです。各要素を次のようにレンダリングできるかみそりテンプレートを作成したいと思います。

<span id="ElementsId">Element's value</span>

Html.DisplayFor（）でテンプレートを指定してプロパティをレンダリングするために特定のテンプレートを使用できることはわかっていますが、そのテンプレート内でid属性を特定して書き込む方法を教えてくださいspanタグ？

@Html.DisplayFor(model => model.Element, "MyTemplate");
asp.net-mvcasp.net-mvc-3razorasp.net-mvc-4
30
David Clarke

わかりました。実際、とても簡単です。私のViews\Shared\DisplayTemplatesフォルダーには、次の内容を含むReading.cshtmlがあります。

@model System.Int32
<span id="@ViewData.ModelMetadata.PropertyName">@Model</span>

これにより、プロパティの名前をid属性として使用し、プロパティの値をコンテンツとして使用して、正しいタグがレンダリングされます。

<span id="Reading">1234</span>

ビューファイルでは、これは以下を使用して呼び出すことができます：

@Html.DisplayFor(model => model.Reading, "Reading")

または、モデルプロパティがIHint（ "Reading"）で装飾されている場合、テンプレート名をDisplayFor（）への呼び出しから除外しても、引き続きテンプレート：

@Html.DisplayFor(model => model.Reading)

これは、カスタムエディターテンプレートでも同様に機能します。

51
David Clarke

これをidをビューモデルの一部にして、表示テンプレートで使用できます。

<span id="@Model.Id">@Html.DisplayFor(x => x.Value)</span>
7
Darin Dimitrov

ブールプロパティの_@Html.DisplayFor_のテンプレートの定義に関する多くのSO投稿を読みましたが、それらを明確に理解できませんでした。あなたの質問はこれに近く、それを理解した後、追加することにしました新しい答えには、それを実装するためのすべての手順が含まれています。

1。テンプレートの作成

最初に、以下のパスに_Partial View_を追加する必要があります（パスは非常に重要です）。

_Views/Shared/DisplayTemplates/
_

たとえば、_Partial View_という名前の__ElementTemplate_を作成し、次のように入力します。

_<span>
    @(@Model ? "Yes" : "No")
</span>
_

2。モデルに IHint を追加する

propertyとtemplateを接続するには、モデルクラスに以下のようなUIHint属性を追加する必要があります。

_[UIHint("_YesOrNoTemplate")]
public bool MyProperty { get; set; }
_

3。 Viewで@ Html.DisplayNameForを使用する

このプロパティが必要なすべてのビューで、以下のコードを使用できます。

_<div>
    @Html.DisplayFor(modelItem => item.MyProperty)
</div>
_

出力

上記のコードは、私の例では以下のコードにレンダリングされます（if (MyProperty == true)）：

_<div>
    <span>
        Yes
    </span>
</div>
_

設定属性

idまたは他のhtml属性を設定するには、次のように ModelMetadata を使用できます。

_<span id="@ViewData.ModelMetadata.PropertyName">
    @(@Model ? "Yes" : "No")
</span>
_

属性付きの出力

_<div id="MyProperty">
    <span>
        Yes
    </span>
</div>
_
4
Ali Soltani

RazorのTemplates（ディスプレイ+エディター）とUIHint属性を説明する 記事 があります。

2
Yang C

以下を出力する表示テンプレートを作成する最良の方法：

_<span id="ElementsId">Element's value</span>
_

これになります：

_<span id="@Html.IdForModel()">@Html.DisplayTextFor(m => m)</span>
_

この質問が最初に投稿されたとき、これらのヘルパーは存在しなかった可能性がありますが、これは2つの方法でDavidの回答に基づいています。

  1. _@Model_の代わりに@Html.DisplayTextFor(m => m)を使用すると、値に対して基本的にToString()を実行するのではなく、データアノテーションを利用できます。
  2. _@ViewData.ModelMetadata.PropertyName_の代わりに@Html.IdForModel()を使用することは、モデルがネストまたは繰り返され、IDが単なるプロパティ名ではない場合に適しています。
1
Loren Paulsen

元の投稿とまったく同じ問題がありました。

最後のコメントが有効かどうかわからない。 HTML id属性が実行時の値になるため、設計時の名前で参照することはできません。

新しいオブジェクトをデータディクショナリ（ViewBag）に追加できるDisplayForのオーバーロードを使用しました

私のモデルは、さまざまなプロパティを持つProjectというC＃オブジェクトです。私の見解では、これがあります：

@Html.DisplayFor(model => model.ProjectName, "StringDisplaySetHtmlID", new { HtmlID = "project-name" })

これはStringDisplaySetHtmlIDと呼ばれるカスタムテンプレートを使用しており、最後のパラメーターはキー値のペアをViewbagに追加します。

テンプレートファイルは次のようになります。

@model string
<span class = "display-field" id = "@(ViewBag.HtmlID)">@Model</span>

ここでは、スタイリングのためにクラスも設定しています。潜在的な一般的な名前の衝突を回避するために、IDではなくキー名HtmlIDを使用しました。

これで、JavaScriptで次のjqueryを使用してスパンのコンテンツを取得できます。

var projectName = $('#project-name').text()
1
Phillip Smith