ASP.NET MVC Framework體驗（2）：顯示列表資料

概述

ASP.NET WebForm下，顯示列表資料，經常會使用伺服器控制項GridView、DataList等。在ASP.NET MVC Framework中，我們有兩種方式進行顯示資料，一是使用行內代碼，即通過迴圈視圖資料使用<%=%>標記進行呈現；二是使用伺服器控制項，同樣可以把視圖資料繫結在伺服器控制項，如ASP.NET 3.5中的新控制項ListView。

準備資料訪問

這裡我們顯示一個Post的列表DataContext和實體定義如下：

[Database(Name="Blog")]public class BlogDataContext : DataContext{    public BlogDataContext()        : base(@"Server=.\Sql2005;User Id=sa;Password=;Database=Blog")    {             }    public Table<Post> Posts    {        get        {            return this.GetTable<Post>();        }    }}

Post實體：

[Table(Name="Posts")]public class Post{    [Column(IsPrimaryKey=true,IsDbGenerated = true)]    public int Id    {        get; set;    }    [Column]    public string Title    {        get; set;    }    [Column]    public string Author    {        get; set;    }    [Column]    public DateTime PubDate    {        get; set;    }    [Column]    public string Description    {        get; set;    }}

同時，我們定義一個BlogRepository類，用於讀取Post資料，這樣可以使得Controller中代碼更加優雅，不再涉及資料訪問：

public class BlogRepository{    public List<Post> GetAll()    {        BlogDataContext db = new BlogDataContext();        IEnumerable<Post> posts = from p in db.Posts                    orderby p.PubDate                    select p;        return posts.ToList<Post>();    }}

定義Controller

這裡的Controller定義就非常簡單了，擷取所有Post資料，然後把資料傳給視圖

public class BlogController : Controller{    [ControllerAction]    public void Index()    {        // 擷取所有post資料        BlogRepository repository = new BlogRepository();        List<Post> posts = repository.GetAll();        // 轉向視圖Index，顯示Post列表        RenderView("Index", posts);    }}

定義View

添加一個Index視圖，並使其繼承於ViewPage<List<Post>>。

1.使用行內代碼顯示，進行資料的迴圈並使用ViewPage提供的HtmlHelper方法。

<h3>1.使用行內代碼</h3>    <%=Html.ActionLink("Home", new { action="Index"})%> |    <div>        <%foreach (Post post in ViewData)          { %>        <div class="postitem">            <strong>Title</strong>：<%=Html.Encode(post.Title) %></br>            <strong>Author</strong>：<%=Html.Encode(post.Author) %></br>            <strong>PubDate</strong>：<%=Html.Encode(post.PubDate.ToShortDateString()) %></br>            <strong>Content</strong>：<%=Html.Encode(post.Description) %></br>        </div><br />        <% } %>    </div>

在HTML代碼中編寫時VS2008同樣提供了很好的智能提示功能：

 

2.使用伺服器控制項ListView，編寫代碼如下：

<h3>使用ListView控制項</h3>    <asp:ListView ID="ListView1" runat="server">        <LayoutTemplate>              <div>                     <asp:PlaceHolder ID="itemPlaceHolder" Runat="server"/>             </div>        </LayoutTemplate>        <ItemTemplate>            <div class="postitem">            <strong>Title</strong>：<%# Eval("Title") %></</br>            <strong>Author</strong>：<%# Eval("Author")%></br>            <strong>PubDate</strong>：<%# Eval("PubDate")%></br>            <strong>Content</strong>：<%# Eval("Description") %></br>        </div><br />        </ItemTemplate>    </asp:ListView>

在後台代碼中進行ListView的資料繫結，這裡僅僅是對把視圖資料繫結到了ListView上面，從資料庫中擷取資料交給Controller去做。

public partial class Views_Blog_Index : ViewPage<List<Post>>{    protected void Page_Load(object sender, EventArgs e)    {        this.ListView1.DataSource = ViewData;        this.ListView1.DataBind();    }}

設定直接選取

同樣我們需要進行直接選取的設定

void Application_Start(object sender, EventArgs e) {    // Code that runs on application startup    RouteTable.Routes.Add(                new Route                {                    Url = "[controller]/[action].mvc",                    Defaults = new { action = "Index" },                    RouteHandler = typeof(MvcRouteHandler)                });}

完成後，運行可以看到，使用行內代碼和ListView控制項的效果是一樣的

結束語

在文章結束時，順便說一下，好多朋友都問為什麼有了WebForm，還要再出一個ASP.NET MVC Framework，對於這個問題，建議大家閱讀一下這篇文章What's Ailing ASP.NET Web Forms。

範例程式碼下載：/Files/Terrylee/MVCDemo02.rar