web-dev-qa-db-ja.com

カミソリビュー内でHtml.DisplayForを使用してcssクラスを適用する

かみそりビューの内部では、ラベルのレンダリングにモデルを使用しました

 @Html.LabelFor(model => model.MyName, htmlAttributes: new { @class = "control-label col-md-6" })

そして今、私はデータ注釈属性の代わりにその値を使用したい。値なので、DisplayForなどで試しました

@Html.DisplayFor(model => model.MyName, new { @class = "control-label col-md-6" })

このcssクラスcontrol-label col-md-6は適用されません。どうして？

c#.netasp.net-mvcrazor
13
user1765862

DisplayForは、他の*Forヘルパーとは異なります。 EditorForと同様に、「テンプレート化されたヘルパー」と呼ばれるものです。つまり、レンダリングするものは、変更可能なテンプレートによって制御されます。重要なのは、これらのメソッドの両方について、MSDNでドキュメントを検索すると、通常は他のヘルパーのhtmlAttributesに対応するパラメーターが、代わりにadditionalViewDataを参照することがわかりますこの二つ。これは、繰り返しますが、出力はViewDataを取る基本的にビューによって制御されるためです。

さらに、特にDisplayForを使用すると、デフォルトのテンプレートはHTMLなしで値を出力するだけです。たとえば、文字列プロパティを渡すと、出力はその文字列の値になり、それ以外の値はなくなります。したがって、たとえHTML属性を渡すことができたとしても、HTML属性を結び付けるものは何もありません。

あなたがしようとしていることをしたい場合は、カスタム表示テンプレートを作成する必要があります。これは、 types （例：String、Boolean、Byteなど）または DataType enum （CreditCard、EmailAddressなど）、Views\Shared\DisplayTemplatesに。たとえば、Views\Shared\DisplayTemplates\String.cshtmlでビューを作成した場合、DisplayFor型のプロパティを使用してstringを呼び出すと、そのビューがレンダリングに使用されます。次に、選択したHTMLに直接出力される値をラップし、ViewDataを使用して適切なHTML属性を適用できます。例えば：

<span class="@ViewData["class"]">@ViewData.TemplateInfo.FormattedModelValue</span>
13
Chris Pratt

違いは、@Html.LabelForヘルパー関数は<label></label>タグ、および@Html.DisplayForヘルパー関数はhtmlタグをレンダリングせず、代わりにプレーンテキストをレンダリングします。たとえば、次のコード：

@Html.DisplayFor(model => model.MyName, new { @class = "control-label col-md-6" })

生のテキストを返します：

Martin

myNameの値が「Martin」であることを考慮してください。そしてコード：

@Html.LabelFor(model => model.MyName, htmlAttributes: new { @class = "control-label col-md-6" })

戻ります：

<label class="control-label col-md-6">Martin</label>

違いを考慮してください。

次を使用します（@ Html.DisplayForを使用する場合）。

<span class"control-label col-md-6">@Html.DisplayFor(model => model.MyName)</span>
31
Numan Ijaz

.NET Core 2.2 Razor Pages Resize Checkboxes

ここでのゲームに遅れましたが、Razor Templateがそれらを表示する方法と比較して、チェックボックスを巨大にする必要がありました。ユーザーにチェックされているかどうかを確認してほしかったからです。

私は上記のものを試してみましたが、うまくいきませんでした。そこで、Chrome Developer Toolを使用してページのレンダリング内容を確認し、チェックボックスに次のように表示しました。

input[type="radio"], input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0;
}

そして、すべてのチェックボックスを大きくすることができるので、CSSファイルでそれを見つけに行きました。しかし、それはここにあると言いました：

reboot.scss：373

今、私は開発者で最初に開いたときに別のscssファイルを参照していることを誓います。しかし、私にはギリシャ語のように見えたので、コードがずさんなので、これを（上記のスタイルで試した後）Razorページの一番上に置くことにしました。上記の非表示スタイルを複製し、幅と高さを追加したことに注意してください。

<style>
    input[type="radio"],
    input[type="checkbox"] {
        box-sizing: border-box;
        width: 40px;
        height:40px;
    }
</style>

さて、ここに私が表示していたRazorコントロールがあります。最後にhtmlのチェックボックスとして表示されますが、Razor Pageは、それがTrue/Falseフィールドであり、テキストボックスとして表示されることを知るのに十分賢いと思います。だが。 。 。追加したサイジングを適用する前ではありません!!これが誰かを助けることを願っています。

<td>
    @Html.DisplayFor(modelItem => item.Moderated)

</td>
0
JustJohn