MVC C# Html.TextBox等Html控件设置样式

来源：互联网发布：jc js jk 编辑：程序博客网时间：2024/05/17 04:35

第一个参数为我们为他们取一个名字，对应id和name，第二个参数则为值，第三个参数则为属性

例如

<%=Html.TextBox("Remark", "", new { style = "width:200px;" })%>

这个产生的html元素就是

<input id="Remark" name="Remark" style="width:200px;" type="text" value="" />

我们就可以参照这个例子来生产其他元素的例子，或者我们只是用一个参数，两个参数等。

例子1：

<tr>        <td><span>备注：</span></td>        <td colspan="3">@Html.TextBox("comment", null, new { @class = "errorCodeMark", maxlength = "49" })            <span class="help-inline">@Html.ValidationMessageFor(m => m.comment)</span>        </td>    </tr>

这个产生的html元素就是

<tr>        <td><span>备注：</span></td>        <td colspan="3"><input class="errorCodeMark" data-val="true" data-val-length="字段 comment 必须是最大长度为 50 的字符串。" data-val-length-max="50" id="comment" maxlength="49" name="comment" type="text" value="">            <span class="help-inline"><span class="field-validation-valid" data-valmsg-for="comment" data-valmsg-replace="true"></span></span>        </td>    </tr>

例子2：(最好用@Html.TextBoxFor)

<tr>        <td><span>禁止期间：</span></td>        <td colspan="3">            @Html.TextBox("startDate", string.Format("{0:yyyy-MM-dd}", Model.startDate == null ? @DateTime.Now : @DateTime.Now))            -- @Html.TextBox("endDate", string.Format("{0:yyyy-MM-dd}", Model.endDate == null ? @DateTime.Now.AddDays(1) : @DateTime.Now.AddDays(1)))            <span class="help-inline">@Html.ValidationMessageFor(m => m.dateError)</span>        </td>    </tr>

这个产生的html元素就是

<tr>        <td><span>禁止期间：</span></td>        <td colspan="3">            <input data-val="true" data-val-date="字段 startDate 必须是日期。" data-val-required="startDate 字段是必需的。" id="startDate" name="startDate" type="text" value="2016-06-24">            -- <input data-val="true" data-val-date="字段 endDate 必须是日期。" data-val-required="endDate 字段是必需的。" id="endDate" name="endDate" type="text" value="2016-06-25">            <span class="help-inline"><span class="field-validation-valid" data-valmsg-for="dateError" data-valmsg-replace="true"></span></span>        </td>    </tr>

例子3：

<pre name="code" class="html"><tr>            <td><span>错误代码：</span></td>            <td>                @Html.DropDownList("errorCode", ViewData["errorCode"] as SelectList, new { @class = "m-wrap small" })            </td>            <td><span>代码区分：</span></td>            <td>@Html.DropDownList("codeList")</td>        </tr>        <tr>            <td><span>分配范围：</span></td>            <td>                @Html.DropDownList("nameList", ViewData["nameList"] as SelectList, new { @onchange = "getValue()" })        </td>        <td><span> </span></td>        <td></td>    </tr>

这个产生的html元素就是

      <tr>            <td><span>错误代码：</span></td>            <td>                <select class="m-wrap small" id="errorCode" name="errorCode"><option value="6" selected="selected">D1</option>                  <option value="5">C2</option>                  <option value="4">C1</option>                  <option value="3">B1</option>                  <option value="2">A2</option>                  <option value="1">A1</option>                </select>            </td>            <td><span>代码区分：</span></td>            <td><select id="codeList" name="codeList"><option selected="selected" value="0">错误码</option>                </select></td>        </tr>        <tr>            <td><span>分配范围：</span></td>            <td>                <select id="nameList" name="nameList" onchange="getValue()"><option selected="selected" value="0">全体用户</option>                <option value="1">个人用户</option>                </select>        </td>        <td><span> </span></td>        <td></td>    </tr>

(最好用@Html.DropDownListFor，数据验证需要)

<div class="control-group">                <label class="control-label"><span class="required">*</span>省：</label>                <div class="controls">                    @Html.DropDownListFor(m => m.province, ViewData["Province"] as List<SelectListItem>, "请选择", new { @class = "m-wrap small" })                    <span class="help-inline">@Html.ValidationMessageFor(m => m.province)</span>                </div>            </div>            <div class="control-group">                <label class="control-label"><span class="required">*</span>市：</label>                <div class="controls">                    @Html.DropDownListFor(m => m.city, ViewData["City"] as List<SelectListItem>, "请选择", new { @class = "m-wrap small" })                    <span class="help-inline">@Html.ValidationMessageFor(m => m.city)</span>                </div>            </div>            <div class="control-group">                <label class="control-label"><span class="required">*</span>区：</label>                <div class="controls">                   @Html.DropDownListFor(m => m.area, ViewData["Area"] as SelectList, "请选择", new { @class = "m-wrap small" })                    <span class="help-inline">@Html.ValidationMessageFor(m => m.area)</span>                </div>            </div>

Model 类：

using System;using System.Collections.Generic;using System.Linq;using System.Text;using Ppl.Framework.Contract;using System.ComponentModel.DataAnnotations.Schema;using System.ComponentModel.DataAnnotations;using System.Web.Mvc;namespace Ppl.Contract{    [Auditable]    [Table("User")]    public partial class User : ModelBase    {        public User()        {            this.Roles = new List<Role>();            this.IsActive = true;            this.RoleIds = new List<int>();        }        /// <summary>        /// 登录名        /// </summary>        [Required(ErrorMessage = "登录名不能为空")]        [StringLength(20, ErrorMessage = "登录名不能超过20个字符")]        public string LoginName { get; set; }        /// <summary>        /// 密码，使用MD5加密        /// </summary>        [Required(ErrorMessage = "密码不能为空")]        [StringLength(8, MinimumLength = 4, ErrorMessage = "请输入4-8位密码")]        public string Password { get; set; }        /// <summary>        /// 事务所        /// </summary>        [Required(ErrorMessage = "事务所不能为空")]        [StringLength(50, ErrorMessage = "事务所长度不能超过50个字符")]        public string office { get; set; }        /// <summary>        /// 姓名        /// </summary>        [Required(ErrorMessage = "姓名不能为空")]        [StringLength(20, ErrorMessage = "姓名不能超过20个字符")]        public string name { get; set; }        /// <summary>        /// 省        /// </summary>        [Required(ErrorMessage = "省不能为空")]        public string province { get; set; }        /// <summary>        /// 市        /// </summary>        [Required(ErrorMessage = "市不能为空")]        public string city { get; set; }        /// <summary>        /// 区        /// </summary>       [Required(ErrorMessage = "区不能为空")]        public string area { get; set; }        /// <summary>        /// 手机号        /// </summary>        [Required(ErrorMessage = "手机号不能为空")]        [RegularExpression(@"^[1-9]{1}\d{10}$", ErrorMessage = "不是有效的手机号码")]        public string Mobile { get; set; }        /// <summary>        /// 邮箱        /// </summary>        [RegularExpression(@"[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}", ErrorMessage = "电子邮件地址无效")]        public string Email { get; set; }        public bool IsActive { get; set; }        //Model数据验证标志        [NotMapped]        public string baseValue { get; set; }        //权限是否选择判断标志        [NotMapped]        [Compare("baseValue", ErrorMessage = "请为用户添加对应的权限")]        public string checkRules { get; set; }        /// <summary>        /// 权限列表        /// </summary>        public virtual List<Role> Roles { get; set; }        [NotMapped]        public List<int> RoleIds { get; set; }        [NotMapped]        public string NewPassword { get; set; }        [NotMapped]        public List<EnumBusinessPermission> BusinessPermissionList        {            get            {                var permissions = new List<EnumBusinessPermission>();                foreach (var role in Roles)                {                    permissions.AddRange(role.BusinessPermissionList);                }                return permissions.Distinct().ToList();            }        }    }}

画面对于Dictionary<>的遍历方法

Controller :

this.ViewBag.roomList = roomList;//获取房间列表
Dictionary<int, Room> roomList = getRoomList();

画面 xx.cshtml

<ul class="list-group border" style=" margin: 0 0 0 0;  height: 430px; overflow: auto">            @foreach (KeyValuePair<int, Room> m in ViewBag.roomList)            {                <li class="list-group-item roomId @(m.Value.name == ViewBag.roomName ? "active":"")">                    @Html.Hidden("roomID", @m.Value.id)                    <img height="20" width="20" src="@ViewStringHelper.imgUrl(@m.Value.icon+"_min")"/>                    <span class="list-group-item-heading">@ViewStringHelper.Truncate((@m.Value.alias != null ? @m.Value.alias : @m.Value.name), 8)</span>                </li>            }        </ul>

补充。。。。

1 0