標籤: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 自訂編輯模版