程式隨筆
0%

【MVC】EditorTemplate (一)

Posted on Edited on Disqus:

Git範例檔下載位置 : https://github.com/toyo0103/Demo_EditTemplate_1

MVC在View的部分要呈現資料，通常是用ViewModel的方式來傳遞。當碰到List或是Array這種重複多筆的情況時，常常就會用迴圈的方式去跑

例如:

假設有個類別CategoryViewModel

1
2
3
4
5
6
7
8
9
10
11
12
13
public class CategoryViewModel
{
 public Guid id { get; set; }
 public string name { get; set; }
 public List<product> productList {get;set;}
}

public class product 
{
 public Guid id { get; set; }
 public string name {get;set;}
}

在View上要呈現CategoryViewModel.productList就可能用跑回圈的方式去組成

1
2
3
4
5
6
7
8
9
10
@model CategoryViewModel
@Html.TextBoxFor(x => x.id)
@Html.TextBoxFor(x => x.name)
//ProductList
@for(int i = 0; i < Model.productList.Count; i++)
{
    @Html.TextBoxFor(x => Model.productList[i].id)
    @Html.TextBoxFor(x => Model.productList[i].name)
}

這樣寫起View來有種又臭又長的感覺，所以可以使用MVC提供的EditorTemplate來解決，使用方法如下:

  • 在Views > Shared > 新增一個EditorTemplates資料*注意 這邊資料夾名稱一定要對
    [![](http://2.bp.blogspot.com/-rtO8iQJhVEE/VlUQCtIp2YI/AAAAAAAAHo8/kz86QML4Yn8/s1600/1.png)](http://2.bp.blogspot.com/-rtO8iQJhVEE/VlUQCtIp2YI/AAAAAAAAHo8/kz86QML4Yn8/s1600/1.png)
  • 接著在裡面新增一個product.cshtml，這邊一樣檔案名稱必須跟Class名稱相符才行
  • 然後開始編輯product.cshtml
    1
    2
    3
    4
    @model  product
    @Html.TextBoxFor(x => x.id)
    @Html.TextBoxFor(x => x.name)

  • 接著回到CategoryViewModel那邊迴圈的地方，把迴圈改成這一行即可 ```csharp
    @Html.EditorFor(x=>x.productList)