HTML ヘルパーのスタイル設定 ASP.NET MVC

StackOverflow https://stackoverflow.com/questions/40816

  •  09-06-2019
  •  | 
  •  

質問

次のような HTML ヘルパーがある場合:

Name:<br />
<%=Html.TextBox("txtName",20) %><br />

CSS クラスを適用するにはどうすればよいですか?スパンで囲む必要がありますか?それともヘルパーの HtmlAttributes プロパティを何らかの方法で利用する必要があるのでしょうか?

役に立ちましたか？

解決

これを TextBox 呼び出しにパラメータとして渡すことができます。

Name:<br/>    
<%= Html.TextBox("txtName", "20", new { @class = "hello" }) %>

この行は、値 20 のテキスト ボックスを作成し、値 hello のクラス属性を割り当てます。class は予約されたキーワードであるため、クラスの前に @ 文字を置きます。他の属性を追加する場合は、キーと値のペアをカンマで区切ってください。

他のヒント

これは、同じ要素にクラスとスタイルを追加する方法です。

「x」は、TextBoxID のプロパティを持つビューに渡されるモデルです。

@Html.TextBoxFor(x => x.TextBoxID, new { @class = "SearchBarSelect", style = "width: 20px; background-color: green;" })

いくつか調べたところ、あなたの質問に対する解決策があると思われるこの記事を見つけました。

ASP.NET MVC# を使用した Ajax 制御ツールキット

ソース：ジムジマーマン

記事リンク

http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=330

引用

したがって、基本的には、クラス名TextBoxWatermarkをテキストボックス入力に配置した場合、このような透かしとして表示したいタイトルを使用してください。

<input type="text" class"TextboxWatermark" name="username" id="username" title="Must be at least 6 chars" />

または

<%= Html.TextBox("username", new { @class = "TextboxWatermark", @title = "Must be at least 6 chars" }) %>

2番目のオプションの良い点は、「username」という名前のVARがあるVARDATA.MODELのviewdataにアイテムがある場合、ビューエンジンにテキストボックスの値に記入することの追加の利点を取得することです。

使用 htmlAttributes 次のような匿名型のパラメータ:

<%=Html.TextBox("txtName","20", new { @class = "test"}) %>

ヘルパーの実装 

public static class LabelExtensioncs
{
    public static MvcHtmlString Alarm(this HtmlHelper helper, string target, string text)
    {
        return MvcHtmlString.Create(string.Format("<p class='alert' style='background-color: #b8f89d;border-radius: 5px;width: 100%;'><b>{0}</b><br /><i>{1}</i></p>", target, text));
    }    
}

ビューセクションでの使用法

@Html.Alarm("Title", "please unsure your card no is invisible in your authorized information")

結果enter image description here

スパンは動的ではないため、使用する必要はありません。

CSS:

.testClass {
color: #1600d3;
}

ビュー (インデックス):

@Html.TextBox("expression", "Text to show.", new { @class = "testClass" })

動的オプションが必要な場合は、たとえば次のように使用できます。

CSS:

.test class{
background: #ffffff;
}

コントローラー (テスト用インデックス):

[HttpGet]
public ActionResult Index()
{
ViewBag.vbColor = "#000000";
return View();
}

ビュー (インデックス):

<div>
<span>
@Html.TextBox("expression", "Text to show.", new 
{ @class = "testClass", @style="color: " + 
@ViewBag.vbColor })
</span>
</div>

それが役に立てば幸い。

それはさらに多くの仕事ですか？

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top