CSS 样式化 HTML 助手 ASP.NET MVC
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40816/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling HTML helpers ASP.NET MVC
提问by Dan
If I have an HTML helper like so:
如果我有一个像这样的 HTML 助手：
Name:<br />
<%=Html.TextBox("txtName",20) %><br />
How do I apply a CSS class to it? Do I have to wrap it in a span? Or do I need to somehow utilize the HtmlAttributes property of the helper?
如何将 CSS 类应用于它？我必须将它包裹在一个跨度中吗？或者我是否需要以某种方式利用助手的 HtmlAttributes 属性？
回答by Dale Ragan
You can pass it into the TextBox call as a parameter.
您可以将其作为参数传递到 TextBox 调用中。
Name:<br/>
<%= Html.TextBox("txtName", "20", new { @class = "hello" }) %>
This line will create a text box with the value 20 and assign the class attribute with the value hello. I put the @ character in front of the class, because class is a reserved keyword. If you want to add other attributes, just separate the key/value pairs with commas.
此行将创建一个值为 20 的文本框，并为 class 属性分配值 hello。我把 @ 字符放在 class 前面，因为 class 是一个保留关键字。如果要添加其他属性，只需用逗号分隔键/值对。
回答by JGilmartin
This is how to add a class and a style on the same element...
这是如何在同一个元素上添加一个类和一个样式...
"x" being the model passed to the view with a property of TextBoxID
“x”是传递给具有 TextBoxID 属性的视图的模型
@Html.TextBoxFor(x => x.TextBoxID, new { @class = "SearchBarSelect", style = "width: 20px; background-color: green;" })
回答by David Negron
I did some research and came across this article that seems to have a solution to your question.
我做了一些研究，发现这篇文章似乎可以解决您的问题。
Ajax Control Toolkit with ASP.NET MVC#
带有 ASP.NET MVC 的 Ajax 控制工具包#
source: jimzimmerman
资料来源：吉姆齐默曼
ARTICLE LINK
文章链接
http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=330
http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=330
QUOTE
引用
So basically if you put the class name TextboxWatermark on any textbox input with the title you like to show as the watermark like this:
<input type="text" class"TextboxWatermark" name="username" id="username" title="Must be at least 6 chars" />or
<%= Html.TextBox("username", new { @class = "TextboxWatermark", @title = "Must be at least 6 chars" }) %>What is nice about the second option is that you get the added benefit of getting the View Engine to fill out the value of the textbox if there is an item in ViewData of the ViewData.Model that has a var named 'username'.
因此，基本上，如果您将类名 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" }) %>第二个选项的好处是，如果 ViewData.Model 的 ViewData 中有一个名为“用户名”的变量，您可以获得让视图引擎填写文本框值的额外好处。
回答by Matt Hinze
Use the htmlAttributesparameter with an anonymous type, like tihs:
使用htmlAttributes匿名类型的参数，如 tihs：
<%=Html.TextBox("txtName","20", new { @class = "test"}) %>
回答by Hamid Jolany
the helper implementation
辅助实现
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));
}
}
the usage in view section
视图部分的用法
@Html.Alarm("Title", "please unsure your card no is invisible in your authorized information")
the result
结果
回答by Nelson Martins
Theres no need to use span, because its not dynamic.
没有必要使用跨度，因为它不是动态的。
Css:
css：
.testClass {
color: #1600d3;
}
View (Index):
查看（索引）：
@Html.TextBox("expression", "Text to show.", new { @class = "testClass" })
if you need dynamic options you can use for example:
如果您需要动态选项，您可以使用例如：
CSS:
CSS：
.test class{
background: #ffffff;
}
Controller (Index for test):
控制器（测试索引）：
[HttpGet]
public ActionResult Index()
{
ViewBag.vbColor = "#000000";
return View();
}
View (Index):
查看（索引）：
<div>
<span>
@Html.TextBox("expression", "Text to show.", new
{ @class = "testClass", @style="color: " +
@ViewBag.vbColor })
</span>
</div>
Hope it helps.
希望能帮助到你。
回答by Nelson Martins
Is it that much more work?
有那么多工作吗？
