使用Html.EditorFor()为文本框加上maxlength,placeholder等属性

当想通过Html.EditorFor()给文本框加上maxlength,placeholder等属性的时候，发现Html.EditorFor()没有提供可直接加上这些属性的重载方法，如何做到呢？

□ 思路

1、Html.EditorFor()有一个重载方法如下：

 

也许，可以把需要给文本框加上的属性(maxlength, placeholder,etc),封装成一个匿名对象，作为路由数据传递给一个模版。

 

2、Html.TextBox()正好有一个重载可以把路由数据作为它的htmlAttributes参数：

 

首先，在Views/Shared/下创建EditorTemplates文件夹，并在EditorTemplates文件夹下创建部分视图string.cshtml

@model string

<span>

    @Html.TextBox("", @ViewData.TemplateInfo.FormattedModelValue, @ViewData) 

</span>   

.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; }

然后，创建一个View Model:

namespace MvcApplication1.Models

{

    public class Sample

    {

        public string Name { get; set; }

    }

}

.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; }

接着，控制器方法把强类型model传递到对应的视图中：

using System.Web.Mvc;

using MvcApplication1.Models;

namespace MvcApplication1.Controllers

{

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            return View(new Sample());

        }

    }

}

.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; }

 

最后，在强类型视图页，把需要给文本框加上的属性封装成匿名对象，作为路由数据传递给模版页。

@model MvcApplication1.Models.Sample

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

@Html.EditorFor(s => s.Name,"string",new {maxlength=5,placeholder="用户名"})

.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; }

 

□ 结果

由于有了placeholder，显示水印：

由于有了maxlength，最多只能输入5个字符：

在html代码中的input有了maxlength和placeholder属性：

□ 总结

Html.EditorFor()本身没有给input附加上属性的重载方法，只好把需要给input附加上的属性封装成匿名对象，作为路由数据交给模版视图页，在模版视图页Html.TextBox()把接收到的路由数据作为它的属性参数，最终显示出来。