样式化HTML助手ASP.NET MVC

Question

如果我有这样的HTML帮助：

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

如何将CSS类应用于它？我是否必须将其包裹在一个范围内？或者我是否需要以某种方式利用帮助程序的HtmlAttributes属性？

Answer 1

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

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

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

Answer 2

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

“x”是传递给具有TextBoxID

属性的视图的模型

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

Answer 3

我做了一些研究并发现了这篇文章似乎解决了你的问题。

使用ASP.NET MVC的Ajax控件工具包＃

来源：jimzimmerman

文章链接

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

<强> QUOTE

  

所以基本上如果你把类名   任何文本框输入上的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" }) %>

     

第二个选项有什么好处   是你获得了额外的好处   让View Engine填写   文本框的值，如果有的话   ViewData中的一个项目   具有var命名的ViewData.Model   '用户名'。

Answer 4

将htmlAttributes参数与匿名类型一起使用，如下所示：

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

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

结果

Answer 6

不需要跨度，因为它不是动态的。

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>

希望有帮助。

Answer 7

还有更多的工作吗？