前篇文章裡我們已做到新增Player的功能,資料維護介面沒有查詢/清單功能成何體統? 所以接著就來做List吧!

上回是先在Controller裡寫好Action再Add View,這次我們先產生View再來寫Action(硬是要換個姿勢玩一次 XD)。在Solution Explorer的Views/Home資料夾上按右鍵選Add/View,一樣可以帶出新增View的精靈,這回選取Scaffold templates為List

自動產生的List.cshtml有幾處值得說說。第一列@model指定了傳入的Model是IEnumerable<PlayerModel>,意味著我們要return View(List<PlayerModel>)才能跟它搭配,由於PlayerModel只模擬了GetPlayerNames()傳回List<string>,稍後要做些調整以便串供前後一致。Html.ActionLink可以產生連到不同Action的HTML連結,畫面上包含了新增(Create)、顯示(Details)、編輯(Edit)、刪除(Delete)等操作。

@foreach (var item in Model)的迴圈,算是展現Razor的犀利面,有沒有注意到,不用<% ... %>,憑直覺在HTML中要呼叫後端程式的地方用@...就開始寫Code,在程式中一寫<...>就切回去寫HTML標籤。說來神奇,不用想太多憑著直覺寫,Razor就是知道你何時想寫HTML標籤,何時想寫C#程式,比起之前需要不斷用<% %>包夾Server端程式碼的ASPX格式,Razor真是無比簡潔(尤是我最受不了義大利麵式ASPX的,是if, for的結尾非得套一個<% } %>不行)。

沒有明確的前後端區塊分界,一開始會覺得無所適從,但等到抓對節奏感,會漸漸有種"依直覺寫就對了"的暢快,跟jQuery追求簡潔的精神很有異曲同工之妙,難怪深得我心~~~
(註: ScottGu有篇Razor的語法介紹,值得一看!)

另外,我想用這個List View將原本的Index View換掉,於是將原本的Index.cshtml刪除,將List.cshtml更名為Index.cshtml,並修改ActionLink文字為中文,移去Score只顯示Name,修改後內容如下:

排版顯示純文字
@model IEnumerable<string>
 
@{
    ViewBag.Title = "List";
}
 
<h2>List</h2>
 
<p>
    @Html.ActionLink("新增", "Create")
</p>
<table>
    <tr>
        <th></th>
        <th>
            Name
        </th>
    </tr>
 
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.ActionLink("編輯", "Edit", new { name = item }) |
            @Html.ActionLink("顯示", "Details", new { name = item }) |
            @Html.ActionLink("刪除", "Delete", new { name = item })
        </td>
        <td>
            @item
        </td>
    </tr>
}
 
</table>

Index.cshtml改成清單顯示後,還有一道手續要補,原本只有reture new View(),現在要改成return new View(PlayerModel.GetPlayerNames());傳入List<string>才能跟Index.cshtml的第一列相呼應。

排版顯示純文字
        public ActionResult Index()
        {
            //Index內含清單介面,故傳入List<string>顯示
            return View(PlayerModel.GetPlayerNames());
        }
 
        public ActionResult About()
        {
            return View();
        }

試執行網站,清單功能完成!

豬又走累了,下回再來看修改、刪除。


Comments

# by 阿多

由發文時間來看,豬腳按摩得不夠久,難怪馬上又腳酸了~XD

Post a comment