ASP.NET MVC 2 強類型視圖與模型繫結實作 CRUD 完整範例

核心觀念：拒絕 ViewData，擁抱強類型視圖

許多 MVC 初學者習慣使用 ViewData 或 ViewBag 傳遞資料，失去編譯期型別檢查與 IntelliSense 優勢。本文示範強類型視圖搭配模型繫結，實作乾淨、可維護的 CRUD 操作。

一、列表頁 - 分頁顯示與強類型綁定

分頁實體類別

/// <summary> 分頁查詢記錄集類 </summary>
public class PageData<T>
{
    public List<T> GetDate { get; set; } = new List<T>(); // 當頁資料
    public int Count { get; set; }        // 總筆數
    public int PageSize { get; set; } = 5; // 每頁筆數
    public int PageIndex { get; set; }    // 當前頁碼
}

視圖宣告強類型

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Web.Models.PageData<Web.Models.Users>>" %>

控制器回傳分頁資料

public ActionResult List(int page = 1)
{
    var pageData = new PageData<Users> { PageIndex = page, PageSize = 5 };
    pageData.GetDate = _userService.GetPagedList(page, pageData.PageSize, out pageData.Count);
    return View(pageData);
}

視圖中直接存取 Model

<% foreach (var user in Model.GetDate) { %>
    <tr>
        <td><%: user.UName %></td>
        <td><%: user.UPassWord %></td>
        <td><a href="/Demo/Edit/<%: user.UID %>">編輯</a></td>
        <td><a href="/Demo/Delete/<%: user.UID %>">刪除</a></td>
    </tr>
<% } %>

jQuery Pagination 分頁外掛整合

$(function () {
    $("#Pagination").pagination(<%= Model.Count %>, {
        callback: pageselectCallback,
        prev_text: "« 上一頁",
        next_text: "下一頁 »",
        items_per_page: <%= Model.PageSize %>,
        num_display_entries: 5,
        current_page: <%= Model.PageIndex - 1 %>, // 外掛從 0 起算
        num_edge_entries: 1,
        link_to: "?page=__id__"
    });
});

function pageselectCallback(page_id, jq) {
    window.location.href = "?page=" + (page_id + 1);
}

二、新增操作 - 模型繫結自動映射

實體類別

public class Users
{
    public int UID { get; set; }
    public string UName { get; set; }
    public string UPassWord { get; set; }
}

強類型新增視圖

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Web.Models.Users>" %>
<form action="/Demo/Add/" method="post">
<table>
    <tr><td>登錄帳號：</td><td><input type="text" name="UName" /></td></tr>
    <tr><td>登錄密碼：</td><td><input type="password" name="UPassWord" /></td></tr>
    <tr><td colspan="2" align="center"><input type="submit" value="提交" /></td></tr>
</table>
</form>

控制器動作 - 直接接收實體

[HttpPost]
public ActionResult Add(Users model)
{
    // model.UName、model.UPassWord 已自動填入，無需 Request.Form[""]
    _userService.Add(model);
    return RedirectToAction("List");
}

關鍵點：name 屬性必須與實體屬性名完全一致（區分大小寫），MVC 模型繫結器才能自動映射。

三、修改與刪除 - 同樣受惠於模型繫結

編輯視圖（攜帶既有資料）

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Web.Models.Users>" %>
<form action="/Demo/Edit/" method="post">
    <input type="hidden" name="UID" value="<%: Model.UID %>" />
    <tr><td>登錄帳號：</td><td><input type="text" name="UName" value="<%: Model.UName %>" /></td></tr>
    <tr><td>登錄密碼：</td><td><input type="password" name="UPassWord" value="<%: Model.UPassWord %>" /></td></tr>
    <tr><td colspan="2"><input type="submit" value="更新" /></td></tr>
</form>

控制器編輯動作

[HttpPost]
public ActionResult Edit(Users model)
{
    _userService.Update(model);
    return RedirectToAction("List");
}

public ActionResult Delete(int id)
{
    _userService.Delete(id);
    return RedirectToAction("List");
}

總結：強類型 + 模型繫結的優勢

完整 Demo 下載

文章末尾提供完整原始碼下載連結，包含 Controller、View、Model、Service 層與資料庫腳本，可直接執行體驗。