FineUIMvc隨筆（1）動態建立表格列

三生石上(FineUI控制元件)發表於2017-03-01
UIMVC

宣告：FineUIMvc（基礎版）是免費軟體，本系列文章適用於基礎版。

 

《FineUIMvc隨筆》目錄

FineUIMvc隨筆（1）動態建立表格列

FineUIMvc隨筆（2）怎樣在控制元件中巢狀 HTML

FineUIMvc隨筆（3）不能忘卻的回發（__doPostBack）

FineUIMvc隨筆（4）自定義回發引數與自定義回發

FineUIMvc隨筆（5）UIHelper是個什麼梗？

FineUIMvc隨筆（6）對比WebForms和MVC中表格的資料庫分頁

FineUIMvc隨筆（7）擴充套件通知對話方塊（顯示多個不重疊）

...

 

 

 

 

 

使用者需求

 

使用者希望實現動態建立表格列，在 WebForms 中，我們透過在 Page_Init 中建立列來實現：

 

但是在 MVC 中，如果還想著 WebForms 的那一套，想著怎麼才能在 Controller 中訪問 View 中的表格控制元件，這是行不通的。

 

我曾寫過一個系列文章《ASP.NET MVC快速入門（MVC5+EF6）》，開篇就講到了 MVC 中的頁面的生成流程：

這個頁面之所以能夠呈現在我們眼前，經歷了三個主要流程：

  1. MVC的路由引擎根據URL查詢相應的控制器（HomeController.cs）。
  2. 控制器的操作方法About準備資料，然後傳入檢視Home/About.cshtml。
  3. 檢視準備HTML片段，放入佈局頁面並返回瀏覽器。

 

控制器準備資料，傳入檢視，然後檢視才開始渲染頁面。也就是說控制器執行時，對檢視的內容一無所知。理解這一點很重要。

 

動態建立表格列

當然在 MVC 中實現動態建立表格列也不難，我們需要將表格列資料（GridColumn[]）像表格資料來源一樣傳遞給檢視即可。

 

控制器：

// GET: Grid/DynamicColumns
public ActionResult Index()
{
    InitGridColumns();

    return View(DataSourceUtil.GetDataTable());
}

private void InitGridColumns()
{
    List<GridColumn> columns = new List<GridColumn>();

    RenderField field = null;

    columns.Add(new RowNumberField());

    field = new RenderField();
    field.HeaderText = "性別";
    field.DataField = "Gender";
    field.FieldType = FieldType.Int;
    field.RendererFunction = "renderGender";
    field.Width = 80;
    columns.Add(field);

    field = new RenderField();
    field.HeaderText = "入學年份";
    field.DataField = "EntranceYear";
    field.FieldType = FieldType.Int;
    field.Width = 100;
    columns.Add(field);

    RenderCheckField checkfield = new RenderCheckField();
    checkfield.HeaderText = "是否在校";
    checkfield.DataField = "AtSchool";
    checkfield.RenderAsStaticField = true;
    checkfield.Width = 100;
    columns.Add(checkfield);

    // ...

    ViewBag.Grid1Columns = columns.ToArray();
}

 

在控制器中，動態建立 List<GridColumn> 物件，並儲存到 ViewBag.Grid1Columns。

實際專案中，這一步可能需要和資料庫互動，來獲取需要動態建立的表格列。

 

檢視：

@{
    ViewBag.Title = "Grid/Grid";
    var F = @Html.F();
}

@model System.Data.DataTable

@section body {

    @(F.Grid()
        .EnableCollapse(true)
        .Width(850)
        .Title("表格（動態建立列）")
        .ShowHeader(true)
        .ShowBorder(true)
        .ID("Grid1")
        .DataIDField("Id")
        .DataTextField("Name")
        .Columns(ViewBag.Grid1Columns)
        .DataSource(Model)
    )
    <br>
    <br>

    @(F.Button()
        .Text("選中了哪些行")
        .ID("Button1")
        .Listener("click", "notifySelectedRows('Grid1');")
    )

}

 

頁面效果：

 

小結

本篇文章介紹了 WebForms 和 MVC 中動態建立表格列的方法。透過對比，也希望大家能充分了解兩種框架的重要區別。

 

如果你剛開始接觸 MVC，建議先從三石的系列教程開始：http://www.cnblogs.com/sanshi/p/6210695.html

 

相關文章