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

来源：互联网发布：手机精美时钟软件编辑：程序博客网时间：2024/06/05 23:56

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

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %><asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">    创建相册asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">    <div class="widget">        <div class="title">            <div class="icon">            div>            <h3>                创建新相册            h3>        div>        <div class="details">            <%using (Html.BeginForm())              {            %>            <fieldset>                <legend>基本信息legend>                <p>                    <label for="title">                        标题:label>                    <%= Html.TextBox("title")%>                    <%= Html.ValidationMessage("title") %>                p>                <p>                    <label for="desc">                        描述:label>                    <%= Html.TextArea("desc")%>                    <%= Html.ValidationMessage("desc") %>                p>                <p>                    <label for="public">                        是否公开:label>                    <%= Html.CheckBox("public") %>                p>                <p>                    <input type="submit" value="提交" />                p>            fieldset>            <%                } %>        div>    div>asp:Content><asp:Content ID="Content3" ContentPlaceHolderID="head" runat="server">asp:Content>

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

<div class="details">            <form action="/Gallery/Create" method="post">            <fieldset>                <legend>基本信息legend>                <p>                    <label for="title">                        标题:label>                    <input id="title" name="title" type="text" value="" />                                    p>                <p>                    <label for="desc">                        描述:label>                    <textarea cols="20" id="desc" name="desc" rows="2">textarea>                                    p>                <p>                    <label for="public">                        是否公开:label>                    <input id="public" name="public" type="checkbox" value="true" /><input name="public" type="hidden" value="false" />                p>                 <p>                    <input type="submit" value="提交" />                p>            fieldset>            form>        div>

.csharpcode, .csharpcode pre{font-size: small;color: black;font-family: consolas, "Courier New", courier, monospace;background-color: #ffffff;/*white-space: pre;*/}.csharpcode pre { 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起作用的地方。请注意下面粗体的部分

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %><asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">    创建相册asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">    <div class="widget">        <div class="title">            <div class="icon">            div>            <h3>                创建新相册            h3>        div>        <div class="details">            <%using (Html.BeginForm())              {            %>            <fieldset>                <legend>基本信息legend>                <p>                    <label for="title">                        标题:label><%= Html.TextBox("title", "初始值", new { width = "400px", style = "background-color:red" })%>                    <%= Html.ValidationMessage("title") %>                p>                <p>                    <label for="desc">                        描述:label>                    <%= Html.TextArea("desc")%>                    <%= Html.ValidationMessage("desc") %>                p>                <p>                    <label for="public">                        是否公开:label>                    <%= Html.CheckBox("public") %>                p>                <p>                    <input type="submit" value="提交" />                p>            fieldset>            <%                } %>        div>    div>asp:Content><asp:Content ID="Content3" ContentPlaceHolderID="head" runat="server">asp:Content>

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

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

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

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