ASP.NET MVC3 自訂編輯模版

來源:互聯網
上載者:User

標籤:editor   rip   多行   相同   簡單   檔案   bag   名稱   logs   

 在View中顯示Model中的各欄位,預設是使用htmlhelper的EditorFor方法,在介面上顯示的文字框。而使用EditorTemplates可在View上為特定欄位顯示自訂的介面。比如購物網站中經常有客戶的地址管理功能,客戶在下訂單時可從中選擇。本Demo就簡單示範該功能在ASP.NET MVC3中如何?,重點是練習EditorTemplates的使用。可在Views的share檔案夾,或是控制項器對應View中的檔案夾裡建立""檔案夾,建立一局部視圖的View,以要自己定義顯示編輯介面的類保持同名,MVC架構會自動搜尋到,記得這的“約定”很關鍵, ASP.NET MVC倡導的是約定勝於配置。
   練習環境:Visual Studio 2010 sp1 , ASP.NET MVC 3
   1. 建立ASP.NET MVC3項目。
   使用嚮導來建立一個空的ASP.NET MVC3項目,視圖引擎使用Razor。
   2. 建立Model
   Model共有兩個類:User和Address。User的Addresses屬性是Address執行個體的集合,這即代表使用者與地址的關係是一對多的關係。
   2.1建立Address類
   代碼如下:
    namespace MvcEditorTemplateDemo.Models
{
    public class Address
    {
        //發貨地址
        public string Street { get; set; }
        //郵遞區號
        public string PostalCode { get; set; }
        //城市
        public string City { get; set; }
    }
}
    2.2 建立User類
    代碼如下:
namespace MvcEditorTemplateDemo.Models
{
    public class User
    {
        public string Name { get; set; }
        public List<Address> Addresses { get; set; }
    }
}
     2.3為了方便測試,給User類的建構函式產生一些資料,這些資料在實際應用中可從資料庫中讀取。
public User()
        {
            Name = "張三";
            var a1 = new Address { City = "南寧", PostalCode = "530600", Street = "廣西南寧市興寧區望州南路78號" };
            var a2 = new Address { City = "南寧", PostalCode = "530600", Street = "廣西南寧市青秀區金浦路458號" };
            var a3 = new Address { City = "南寧", PostalCode = "530600", Street = "廣西南寧市西鄉塘區五裡亭38號" };
            Addresses = new List<Address> { a1, a2, a3 };
        }
    3.建立控制器
    代碼:
namespace MvcEditorTemplateDemo.Controllers
{
    public class UserWithAddressController : Controller
    {
        //
        // GET: /UserWithAddress/

        public ActionResult Index()
        {
            return View(new User());
        }

    }
}
    4. 建立視圖
    給UserWithAddress控制器的Index方法添加視圖:
@model MvcEditorTemplateDemo.Models.User
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<p>
@Html.Label("使用者名稱")
@Html.EditorFor(model => model.Name)
</p>

<h2>寄送地址</h2>
@Html.EditorFor(model=>model.Addresses)
     5.測試
     User的Addresses屬性預設的編輯模板只是把Address的Street屬性給編曆了出來。
     


     6.建立自訂模板
     6.1建立模版檔案夾
        在View的share檔案夾下建立“EditorTemplates”檔案夾,一定要命名為“EditorTemplates”。
     6.2建立自訂的視圖
        在view/share/EditorTemplates檔案夾下建立視圖:Address(與類名要保持一致)。Model類為Address,勾選Create as a partial view。

//@Html.EditorFor(model=>model.Addresses)這裡=>model.Addresses為Address類型。所以視圖名稱要叫Address.


     代碼:
@model MvcEditorTemplateDemo.Models.Address

<div style="float:left;margin-right:20px;padding:5px;">
    <h3>
        寄送地址</h3>
    <p>
        @Html.Label("城市")
        @Html.TextBoxFor(x => x.City)
    </p>
    <p>
        @Html.Label("地址")
        @Html.TextBoxFor(x => x.Street)
    </p>
    <p>
        @Html.Label("郵遞區號")
        @Html.TextBoxFor(x => x.PostalCode)
    </p>   
</div>
     7.測試
     MVC架構會自
     



編輯模板(Editor Template)指的是在ASP.NET MVC應用程式中,基於對象屬性的資料類型通過Razor視圖渲染後,自動產生表單Input元素。ASP.NET MVC包含了若干的編輯模板,當然我們也可以實現擴充。編輯模板類似於局部視圖,不同的是,局部視圖通過name來渲染,而編輯模板通過類型來渲染。

舉個栗子,@Html.EditorFor(model => model.Property),如果Property類型為string,那麼@Html.Editor 會建立一個Type=Text的Input元素;如果Property類型為Password,那麼會建立一個Type=Password的Input元素。所以EditorFor helper是基於model 屬性的資料類型來渲染產生HTML。

不過美中不足的是,預設產生的HTML如下所示:

 

可以看到class=”text-box single-line”,但先前提到過,Bootstrap Form元素class必須是 form-control。

所以,為了讓Editor helper產生class為form-control的表單元素,我們需要建立一個自訂的編輯模板來重寫舊的模板。你需要如下操作:

  • 在Shared檔案夾中建立名為EditorTemplates(注意要一樣的名稱)的檔案夾
  • 添加名為string.cshtml(注意要一樣的名稱)檔案,並添加如下代碼://model => model.Property),這裡Property類型為string。所以視圖要命名為string
@model string@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new{    @class = "form-control"})

在上述代碼中,我們調用 @Html.TextBox方法,並且傳遞了一個空的字串作為textbox的name。這將會讓model的屬性名稱作為產生的textbox的name,並且textbox顯示的內容是model的值,最後追加了名為class的attribute,而且其值為”form-control”。

重建項目,發現新產生的input元素它的class已經改為”form-control“了。如下所示:

 

  • 非基元類型

ASP.NET MVC能讓開發人員建立根據自訂DataType的編輯模板,比如自動產生多行文字框並且規定行數為3行,也是同樣的操作:

  • 添加MultilineText. Cshtml(注意名稱相同)檔案到EditorTemplates中
  • 添加如下代碼:
@model string@Html.TextArea("", ViewData.TemplateInfo.FormattedModelValue.ToString(), new { @class = "form-control", rows = 3 })
  • 為了讓我們的Model的屬性在渲染時採用MultilineText.cshtml編輯模板,我們需要為屬性指定DataType attribute為MultilineText:
 [DataType(DataType.MultilineText)]  public string Description { get; set; } 

最終顯示如下所示:

 

ASP.NET MVC3 自訂編輯模版

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.