样式化 HTML 帮助程序 ASP.NET MVC答案

【问题标题】：Styling HTML helpers ASP.NET MVC样式化 HTML 帮助程序 ASP.NET MVC
【发布时间】：2010-09-07 15:16:09
【问题描述】：

如果我有这样的 HTML 助手：

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

如何应用 CSS 类？我必须将它包装在一个跨度中吗？还是我需要以某种方式利用助手的 HtmlAttributes 属性？

【问题讨论】：

标签： css asp.net-mvc html-helper

【解决方案1】：

您可以将它作为参数传递给 TextBox 调用。

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

这一行将创建一个值为 20 的文本框，并为 class 属性分配值 hello。我把@字符放在class前面，因为class是保留关键字。如果要添加其他属性，只需用逗号分隔键/值对即可。

【讨论】：

【解决方案2】：

这是在同一个元素上添加类和样式的方法...

“x”是传递给视图的模型，属性为 TextBoxID

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

【讨论】：

【解决方案3】：

我做了一些研究，发现这篇文章似乎可以解决您的问题。

Ajax Control Toolkit with ASP.NET MVC#

来源：吉姆齐默尔曼

文章链接

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" }) %>
第二个选项有什么好处是你得到了额外的好处让视图引擎填写文本框的值（如果有）的 ViewData 中的一个项目 ViewData.Model 有一个名为 '用户名'。

【讨论】：

【解决方案4】：

将htmlAttributes 参数与匿名类型一起使用，例如tihs：

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

【讨论】：

【解决方案5】：

辅助实现

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")

结果

【讨论】：

【解决方案6】：

不需要使用 span，因为它不是动态的。

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>

希望对你有帮助。

【讨论】：

【解决方案7】：

还有那么多工作吗？

【讨论】：

对于开发者没有，但对于设计师是。