ASP.NET MVC 2 整合第三方控件：MvcContrib Grid 與 SlickUpload 實戰

ASP.NET MVC 內建 HTML Helper 雖具彈性，但手寫表格、上傳等重複 UI 代碼耗時且易出錯。本文介紹兩個成熟第三方控件：MvcContrib Grid（資料表格渲染）與 SlickUpload（檔案上傳），大幅提升開發效率。

MvcContrib Grid：宣告式表格渲染

傳統手寫表格痛點

<table>
<tr><th>Username</th><th>First name</th><th>Last name</th><th>Email</th></tr>
<% foreach (var profile in Model) { %>
<tr>
    <td><%= Html.Encode(profile.Username) %></td>
    <td><%= Html.Encode(profile.FirstName) %></td>
    <td><%= Html.Encode(profile.LastName) %></td>
    <td><%= Html.Encode(profile.Email) %></td>
    <td><%= Html.ActionLink("View", "Show", new { username = profile.Username }) %></td>
</tr>
<% } %>
</table>

MvcContrib Grid 一行代碼產生表格

<%= Html.Grid(Model).AutoGenerateColumns() %>

自動反射模型屬性產生欄位，適合快速原型。

進階：自訂欄位、格式化、動作連結

<h2>產品列表</h2>
<%= Html.Grid(Model).Columns(column => {
    column.For(x => x.ProductID).Named("產品編號");
    column.For(x => x.ProductName).Named("產品名稱");
    column.For(x => x.QuantityPerUnit).Named("單位數量");
    column.For(x => x.UnitPrice).Named("單價").Format("{0:N2}");
    column.For(x => Html.ActionLink("檢視", "Detail", new { id = x.ProductID }))
          .Named("操作").DoNotEncode();
}) %>

核心功能

• 排序：.Sortable() + Controller 處理 sort、sortDir 參數
• 分頁：.Paginate() + IPagination 模型
• 篩選：.Filterable() 自動產生欄位篩選 UI
• 匯出：支援 CSV、Excel、XML 格式匯出
• 主題：內建 CSS 類別，易於客製化樣式

Controller 配合分頁排序範例

public ActionResult Index(int? page, string sort, string sortDir)
{
    var query = _productService.GetAll();
    
    // 排序
    if (!string.IsNullOrEmpty(sort))
        query = sortDir == "DESC" ? query.OrderByDescending(sort) : query.OrderBy(sort);
    
    // 分頁
    var pagedList = query.AsPagination(page ?? 1, 20);
    return View(pagedList);
}

SlickUpload：非同步大檔案上傳

特色

• Flash/HTML5 雙模式，支援大檔案斷點續傳
• 即時進度條、速度顯示、剩餘時間估算
• 伺服端串流處理，不佔用 IIS 要求緩衝區
• 支援多檔案佇列、拖放上傳、客戶端驗證

整合步驟

1. NuGet 安裝：Install-Package SlickUpload
2. web.config 註冊 HttpModule：

<system.webServer>
  <modules>
    <add name="SlickUpload" type="SlickUpload.HttpModule, SlickUpload" />
  </modules>
</system.webServer>

3. 設定上傳處理器：

<slickUpload>
  <uploadHandler type="SlickUpload.DatabaseUploadHandler, SlickUpload" 
                 connectionStringName="DefaultConnection" 
                 tableName="Uploads" />
</slickUpload>

4. 檢視頁面引用：

<%= Html.SlickUpload().Multiple(true).ProgressBar(true).Queue(true) %>

自訂上傳邏輯（繼承 UploadHandler）

public class CustomUploadHandler : UploadHandler
{
    protected override void ProcessFile(UploadFile file)
    {
        // 儲存至雲端儲存、資料庫、觸發工作流等
        var blob = _blobContainer.GetBlockBlobReference(file.FileName);
        blob.UploadFromStream(file.InputStream);
        
        // 記錄元資料
        _db.UploadRecords.Add(new UploadRecord 
        { 
            FileName = file.FileName, 
            Size = file.Size, 
            ContentType = file.ContentType,
            BlobUrl = blob.Uri.ToString()
        });
        _db.SaveChanges();
    }
}

兩大控件比較總覽

最佳實務建議

1. Grid：定義 GridModel<T> 檢視模型，分離領域模型與顯示邏輯
2. Grid：搭配 Bootstrap CSS 類別（.table .table-striped）獲得現代化外觀
3. SlickUpload：生產環境必須設定 maxRequestLength、maxAllowedContentLength、請求逾時
4. SlickUpload：實作病毒掃描、檔案型別驗證（魔數檢查）於 ProcessFile 初期
5. 兩者皆支援單元測試：Grid 測試 Helper 輸出字串，SlickUpload 測試 Handler 邏輯

總結

善用 MvcContrib Grid 消除表格渲染樣板代碼，採用 SlickUpload 解決大檔案上傳痛點，能讓 MVC 開發團隊專注於核心業務邏輯，而非重複造 UI 輪子。兩者成熟度高、文件完善，是企業級 MVC 專案的優質選擇。