使用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>

然后，創建一個View Model:

namespace MvcApplication1.Models
{
    public class Sample
    {
        public string Name { get; set; }
    }
}

接着，控制器方法把強類型model傳遞到對應的視圖中：

using System.Web.Mvc;
using MvcApplication1.Models;

namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View(new Sample());
        }

    }
}

 

最后，在強類型視圖頁，把需要給文本框加上的屬性封裝成匿名對象，作為路由數據傳遞給模版頁。

@model MvcApplication1.Models.Sample

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

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

 

□ 結果

由於有了placeholder，顯示水印：

由於有了maxlength，最多只能輸入5個字符：

在html代碼中的input有了maxlength和placeholder屬性：

□ 總結

Html.EditorFor()本身沒有給input附加上屬性的重載方法，只好把需要給input附加上的屬性封裝成匿名對象，作為路由數據交給模版視圖頁，在模版視圖頁Html.TextBox()把接收到的路由數據作為它的屬性參數，最終顯示出來。