使用MVC框架中要注意的问题(七):HtmlAttributes

在MVC的View中,我们可以通过HtmlHelper的一些扩展方法插入一些控件，例如通过Html.TextBox插入一个文本框等等，下面是一个简单的范例

<%@PageTitle=""Language="C#"MasterPageFile="~/Views/Shared/Site.Master"Inherits="System.Web.Mvc.ViewPage"%>

<asp:ContentID="Content1"ContentPlaceHolderID="TitleContent"runat="server">
创建相册
</asp:Content>
<asp:ContentID="Content2"ContentPlaceHolderID="MainContent"runat="server">
<divclass="widget">
<divclass="title">
<divclass="icon">
</div>
<h3>
创建新相册
</h3>
</div>
<divclass="details">
<%using(Html.BeginForm())
{
%>
<fieldset>
<legend>基本信息</legend>
<p>
<labelfor="title">
标题:</label>
<%=Html.TextBox("title")%>
<%=Html.ValidationMessage("title")%>
</p>
<p>
<labelfor="desc">
描述:</label>
<%=Html.TextArea("desc")%>
<%=Html.ValidationMessage("desc")%>
</p>
<p>
<labelfor="public">
是否公开:</label>
<%=Html.CheckBox("public")%>
</p>

<p>
<inputtype="submit"value="提交"/>
</p>
</fieldset>
<%
}%>
</div>
</div>
</asp:Content>
<asp:ContentID="Content3"ContentPlaceHolderID="head"runat="server">
</asp:Content>

看起来不错对吧。要注意的是，这并不是控件，而是一个方法。那么，它会生成什么样的代码呢？

<divclass="details">
<formaction="/Gallery/Create"method="post">
<fieldset>
<legend>基本信息</legend>
<p>
<labelfor="title">
标题:</label>
<inputid="title"name="title"type="text"value=""/>

</p>
<p>
<labelfor="desc">
描述:</label>
<textareacols="20"id="desc"name="desc"rows="2">
</textarea>

</p>
<p>
<labelfor="public">
是否公开:</label>
<inputid="public"name="public"type="checkbox"value="true"/><inputname="public"type="hidden"value="false"/>
</p>

<p>
<inputtype="submit"value="提交"/>
</p>
</fieldset>
</form>
</div>

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

我们看到，它是生成标准的HTML控件。

那么如果我们需要对该控件进行定义呢？例如设置宽度，颜色等等，怎么办呢？这就是所谓的htmlAttributes起作用的地方。请注意下面粗体的部分

<%@PageTitle=""Language="C#"MasterPageFile="~/Views/Shared/Site.Master"Inherits="System.Web.Mvc.ViewPage"%>

<asp:ContentID="Content1"ContentPlaceHolderID="TitleContent"runat="server">
创建相册
</asp:Content>
<asp:ContentID="Content2"ContentPlaceHolderID="MainContent"runat="server">
<divclass="widget">
<divclass="title">
<divclass="icon">
</div>
<h3>
创建新相册
</h3>
</div>
<divclass="details">
<%using(Html.BeginForm())
{
%>
<fieldset>
<legend>基本信息</legend>
<p>
<labelfor="title">
标题:</label>
<%=Html.TextBox("title","初始值",new{width="400px",style="background-color:red"})%>
<%=Html.ValidationMessage("title")%>
</p>
<p>
<labelfor="desc">
描述:</label>
<%=Html.TextArea("desc")%>
<%=Html.ValidationMessage("desc")%>
</p>
<p>
<labelfor="public">
是否公开:</label>
<%=Html.CheckBox("public")%>
</p>

<p>
<inputtype="submit"value="提交"/>
</p>
</fieldset>
<%
}%>
</div>
</div>
</asp:Content>
<asp:ContentID="Content3"ContentPlaceHolderID="head"runat="server">
</asp:Content>

也就是说，我们可以通过匿名类型的方式任意构造出来一些属性。当然，这些都是Input标签默认就支持的属性。事实上，哪怕不支持也没有关系，直接写不会出错的。

那么，如果我们希望添加一个css类的绑定呢，要特别注意一下，因为class是一个c#关键字，你可能需要下面这样指定

<%=Html.TextArea("desc","初始值",new{@class="myclass"})%>

也就是说，要通过一个@进行转义。

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}