共用方式為


逐步解說:將動態資料加入至現有網站

更新: 2008 年 7 月

本逐步解說會示範如何修改現有的 ASP.NET 網站以加入動態資料架構的功能。此外,還會示範多種您可以自動動態資料站台的方法。在本逐步解說的最後,您會建立會利用資料模型與資料庫進行互動且能夠正常運作的網站。同時,您也會建立自訂欄位範本,這些範本定義了資料欄位在顯示與編輯時的呈現方式。

ASP.NET 網站極具特別的一點是,它能夠在執行階段透過表示資料庫的資料模型,推測出資料欄位的外觀與行為。這項資訊接著會藉由欄位範本的支援用於資料控制項,如此,便不需要在展示層使用重複的程式碼。

本逐步解說會示範如何透過極少量的程式碼完成下列工作:

  • 與資料模型互動。動態資料加入了可以幫助您建立資料驅動應用程式的功能,這類應用程式可以執行建立、讀取、更新與刪除 (CRUD) 作業。

  • 透過建立欄位範本,自訂使用者看到與編輯資料欄位的方式。動態資料會根據從資料模型推測而得的資訊,選取適當的欄位範本。

您將會依照下列步驟進行:

  • 建立網站,然後修改網站使其支援動態資料。這項工作的主要目標在於建立動態資料利來與資料庫進行互動的資料模型。

  • 建立欄位範本。欄位範本為使用者控制項,會定義如何顯示及編輯資料的 UI。

  • 建立顯示資料表的自訂頁面。這個頁面會顯示動態資料與資料庫互動的方式,並且示範您只需要使用少量的程式碼,便能完成這項工作。

  • 測試動態資料整合。這可以讓您確認動態資料的功能已經完全與網站整合。您可以操作資料模型並且確認應用程式可以如預期的方式運作。在完成這項工作的程序中,您也會產生並且處理錯誤。

必要條件

若要完成本主題的完成範例,您必須要有:

  • Microsoft Visual Studio 2008 Service Pack 1 或 Visual Web Developer 2008 Express 版 Service Pack 1。

  • AdventureWorksLT 範例資料庫。如需下載並安裝 SQL Server 範例資料庫,請參閱 CodePlex 網站上的 Microsoft SQL Server 產品範例:資料庫 (英文)。請確認已配合您所執行的 SQL Server 版本 (Microsoft SQL Server 2005 或 Microsoft SQL Server 2008) 安裝版本正確的範例資料庫。

建立 Dynamic Data 網站

在本節中,您將會在 Visual Studio 中建立一個動態資料網站。一開始,您會先建立標準的 ASP.NET 網站,然後再將網站轉變為支援動態資料功能的網站。若要這麼做,您需要執行下列作業:

  • 建立 ASP.NET 網站。

  • 將網站與資料庫連結。這個資料庫會包含資料表,而稍後會存取其中的資料行 (資料欄位) 進行自訂顯示與編輯。

  • 將這個網站設定為可以使用動態資料控制項。這可以完成在網站中整合動態資料的工作。

接著,要建立與設定您會與稍後操作的資料模型。您會進行下列動作:

  • 根據 SQL Server資料庫建立資料模型類別。.

  • 在資料模型中加入中繼資料,以便進行使用者輸入自訂驗證,並於稍後讓 Calendar 控制項可以修改資料欄位。

準備可以使用動態資料的網站

本節會說明如何建立 ASP.NET 網站、新增資料庫,以及如何設定網站以便整合動態資料功能。

若要建立 ASP.NET 網站

  1. 啟動 Visual Studio。

  2. 在 [檔案] 功能表上按一下 [新增],然後按一下 [網站]。

    [新網站] 對話方塊便會顯示。

  3. 請在 [Visual Studio 安裝的範本] 下方,選取 [ASP.NET 網站]。

  4. 選取 [位置] 旁邊的 [檔案系統],然後在第二個方塊中,輸入您想要用來保存網站網頁的資料夾名稱。例如,輸入資料夾名稱 C:\WebSites\DynamicDataWebSite。

  5. 在 [語言] 清單中,按一下您想要操作的程式語言。

  6. 按一下 [確定]。

    Visual Studio 會建立 ASP.NET 網站的資料夾與檔案。

下一個步驟是將資料庫加入至網站中。這個資料庫會包含資料表,而稍後會存取其中的資料行 (資料欄位) 進行顯示與編輯。

若要將資料庫加入至網站

  1. 在 [方案總管] 中,以滑鼠右鍵按一下 [App_Data] 資料夾,然後按一下 [加入現有項目]。

  2. 在 [加入現有項目] 對話方塊中,輸入 AdventureWorksLT 資料庫檔案 (AdventureWorksLT.mdf) 的安裝位置,然後按一下 [加入]。

    這個會在專案中建立資料庫檔案的複本。

現在,您可以設定網站,進行動態資料功能的整合。

若要設定網站

  1. 在 [方案總管] 中,開啟 Web.config 檔案。

  2. 加入下列組件的組件參考:

    • System.Web.Routing

    • System.Web.DynamicData

    • System.ComponentModel.DataAnnotations

    下列範例說明加入組件的方法。請確定您使用的是版本正確的組件。

    <system.web>
      <compilation>
        <assemblies>
    
          <add assembly="System.Web.Routing, Version=3.5.0.0,            Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>      <add assembly="System.Web.DynamicData, Version=3.5.0.0,            Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>      <add assembly="System.ComponentModel.DataAnnotations,            Version=3.5.0.0,            Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        </assemblies>
      </compilation>
    
  3. 將 asp 標記前置詞設定為參考 System.Web.DynamicData 命名空間,如下範例所示:

    <system.web>
      <pages>
        <controls>
    
          <add tagPrefix="asp" namespace="System.Web.DynamicData"          assembly="System.Web.DynamicData, Version=3.5.0.0,          Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        </controls>
      </pages>
    </system.web>
    
  4. 儲存並關閉 Web.config 檔案。

設定資料模型

本節會說明如何建立實現網站動態行為之關鍵元件的資料模型。在這個逐步解說中,您會使用 LINQ-to-SQL 資料模型。不過,您也可以改用 ADO.NET Entity Framework 資料模型。此外,本節也會示範如何在資料模型加入中繼資料的資訊。

若要建立資料模型

  1. 在 [方案總管] 中,以滑鼠右鍵按一下專案名稱,再按一下 [加入 ASP.NET 資料夾],然後按一下 [App_Code]。

  2. 以滑鼠右鍵按一下 [App_Code] 資料夾,然後按一下 [加入新項目]。

  3. 在 [Visual Studio 安裝的範本] 下方,按一下 [LINQ to SQL 類別]。

  4. 在 [名稱] 方塊中,輸入資料庫模型名稱 AdventureWorksLT.dbml。

  5. 按一下 [加入]。

    如此就會出現 [物件關聯式設計工具] (O/R 設計工具)。如需詳細資訊,請參閱物件關聯式設計工具 (O/R 設計工具)

  6. 在 [O/R 設計工具] 中,按一下 [伺服器總管] 連結。

  7. 在 [伺服器總管] 的 [資料連接] 下,展開 [AdventureWorksLT_Data.mdf] 下的資料庫檔案節點以及其中的 [資料表] 節點。

  8. 將 [Customer] 資料表拖曳到 [O/R 設計工具] 視窗中。

  9. 儲存並關閉 AdventureWorksLT.dbml 檔案。

    您已經建立了代表 AdventureWorksLT 資料庫的資料模型。

下一個程序將說明如何新增使用者輸入的自訂驗證。同時,也會示範如何 Calendar 控制項來呈現顯示與編輯 DateTime 資料欄位的 UI。

若要在資料模型中新增自訂驗證與中繼資料

  1. 在 [方案總管] 中,以滑鼠右鍵按一下 [App_Code] 資料夾,然後按一下 [加入新項目]。

  2. 請在 [Visual Studio 安裝的範本] 下方,按一下 [類別]。

  3. 在 [名稱] 方塊中,輸入資料模型中所定義的資料庫資料表 (包含自訂欄位範本要顯示的資料) 名稱。在本逐步解說中,您將會使用 Customer 類別。因此,請建立名為 Customer.cs 或 Customer.vb 的類別檔案。這個檔案也會包含您會於稍後建立的關聯類別,目的是要在資料欄位中套用屬性。

  4. 將 Customer 類別定義加入 Visual Basic 中的 Partial 關鍵字或是 Visual C# 中的 partial 關鍵字,使其成為部分類別。

  5. 如果要在 Visual C# 中建立類別,請先刪除預設的建構函式。

    以下範例示範更新的類別宣告。

    public partial class Customer {
    
    }
    
    Partial Public Class Customer
    
    End Class
    
  6. 使用 Visual Basic 中的 Imports 關鍵字或 Visual C# 中的 using 關鍵字,加入對 System.Web.DynamicDataSystem.ComponentModel.DataAnnotations 命名空間的參考,如下範例所示:

    using System.Web.DynamicData;
    using System.ComponentModel.DataAnnotations;
    
    Imports System.Web.DynamicData
    Imports System.ComponentModel.DataAnnotations 
    
  7. 在同一個檔案中,建立要做為關聯中繼資料類別的其他部分類別。您可以使用任何名稱做為類別名稱;在逐步解說中,命名類別 CustomerMetadata,如下範例所示:

    public partial class CustomerMetadata
    {
    
    }
    
    Partial Public Class CustomerMetadata
    
    End Class 
    
  8. MetadataTypeAttribute 屬性套用到 Customer 部分類別。命名屬性參數時,指定您於前一步驟所建立之關聯中繼資料類別的名稱,也就是 CustomerMetadata。

    下列範例示範已套用屬性的 Customer 部分類別。

    [MetadataType(typeof(CustomerMetadata))]
    public partial class Customer {
    
    }
    
    <MetadataType(GetType(CustomerMetadata))> _
    Partial Public Class Customer
    
    End Class
    
  9. 在中繼資料類別中,建立具名公用欄位 ModifiedDate,且其資料型別為 Object。

    在中繼資料類別中,您要建立每一個資料欄位的欄位,而您會要自訂這些欄位的顯示與編輯表現方式。命名中繼資料類別的資料時,使用的名稱必須與您想要修改的資料欄位名稱相同。

  10. UIHintAttribute 屬性套用到 ModifiedDate 欄位。指定 "DateCalendar" 做為參數名稱。這就是您會於稍後建立的欄位範本名稱。

    注意事項:

    Object 會做為中繼資料型別的標記,代表資料欄位。動態資料可以從資料模型推測得知實際的資料型別。

    下列範例示範已套用的 UIHintAttribute 屬性。

    public partial class CustomerMetadata
    {
        [UIHint("DateCalendar")]
        public object ModifiedDate;
    }
    
    Partial Public Class CustomerMetadata
        <UIHint("DateCalendar")> _
        Public ModifiedDate As Object
    End Class 
    
  11. 在中繼資料類別中,建立 FirstName 與 LastName 屬性的公用欄位。

  12. RegularExpressionAttribute 屬性套用到 FirstName 與 LastName 這兩個資料欄位。指定規則運算式規則,只允許輸入英文字母、空格和連字號,而且名稱不得超過 40 個字元。加入如果驗證失敗會顯示的自訂錯誤訊息。

    下列範例示範套用屬性的 FirstName and LastName 欄位。

    [RegularExpression(@"^[a-zA-Z''-'\s]{1,40}$",     ErrorMessage="Entered characters are not allowed.")]
    public object FirstName;
    
    [RegularExpression(@"^[a-zA-Z''-'\s]{1,40}$",    ErrorMessage = "Entered characters are not allowed.")]
    public object LastName; 
    
    <RegularExpression("^[a-zA-Z''-'\s]{1,40}$", _    ErrorMessage:="Entered characters are not allowed.")> _
    Public FirstName As Object
    
    <RegularExpression("^[a-zA-Z''-'\s]{1,40}$", _    ErrorMessage:="Entered characters are not allowed.")> _
    Public LastName As Object
    

    請注意,資料欄位符合資料模型中定義的 Customer 資料表資料行。只有在您要加入動態資料呈現這些資料欄位所要使用的中繼資料資訊時,才能使用這些資料行。

    規則運算式規則最多允許 40 個大小寫字元,以及英文名字中常見的幾種特殊字元。

  13. 儲存並關閉類別檔案。

您現在可以註冊資料模型內容,讓動態資料可以存取中繼資料資訊。

若要註冊資料模型內容

  1. 在 [方案總管] 中以滑鼠右鍵按一下專案名稱,然後按一下 [加入新項目]。

  2. 在 [Visual Studio 安裝的範本] 下方,選取 [全域應用程式類別],然後按一下 [加入]。

    這會將 Global.asax 檔案加入網站。

  3. 利用參考 System.Web.DynamicData 命名空間的 Namespace 屬性加入 @ Import 指示詞,如下範例所示:

    <%@ Import Namespace="System.Web.DynamicData" %>
    
  4. 在 Application_Start 方法中,以停用 Scaffolding 選項停用的狀態註冊資料內容,如下範例所示:

    這個註冊動作可以讓動態資料知道要使用哪一種資料模型。也會告知動態資料不要啟用資料表的 Scaffolding。上述的最後一個步驟不是必要步驟,在此提及的用意在於強調網站不會使用 Scaffolding。

    MetaModel model = new MetaModel();
    model.RegisterContext(typeof(AdventureWorksLTDataContext), 
    new ContextConfiguration() {ScaffoldAllTables = false });
    
    Dim model As MetaModel = New MetaModel()
    model.RegisterContext(GetType( _
        AdventureWorksLTDataContext), _
        New ContextConfiguration() With { _
        .ScaffoldAllTables = False})
    
  5. 儲存並關閉 Global.asax 檔案。

建立欄位範本

欄位範本是使用者控制項,動態資料會利用這些控制項來呈現顯示與編輯資料的 UI。如果資料內容中表示的每一種資料欄位型別都要能夠使用動態資料,那麼動態資料必須要有欄位範本 (如果特定資料欄位型別沒有欄位範本,而且使用後援規則才找不到欄位範本,動態資料便會擲回例外狀況)。

如果您要建立動態資料網站,網站會加入代表一般資料庫資料型別的一組欄位範本。這些範本會與頁面範本、主版頁面以及階層式樣式表檔案一併建立。不過,在本逐步解說中,您會學習如何將動態資料功能加入到現有的網站。因此,我們假設您無法存取預設的欄位範本。

您在此逐步解說中建立的欄位範本,與動態資料網站中的預設範本相同。如需詳細資訊,請參閱 ASP.NET 動態資料欄位範本概觀。當您建立使用 Scaffolding 的網站時,可以看到隨之產生的預設欄位範本。如需詳細資訊,請參閱逐步解說:建立使用 Scaffolding 的新動態資料網站

本節說明如何建立下列範本:

  • 欄位範本,呈現顯示與編輯 String 型別資料欄位的 UI。

  • 欄位範本,呈現顯示與編輯 DateTime 型別資料欄位的 UI。

建立 String 資料的欄位範本

本節說明如何建立呈現顯示與編輯 String 資料欄位的範本欄位。

若要建立顯示與編輯 String 資料欄位的欄位範本

  1. 在 [方案總管] 中,以滑鼠右鍵按一下專案名稱,然後按一下 [新增資料夾]。

  2. 將新資料夾命名為 DynamicData。

    注意事項:

    由於資料夾名稱在動態資料中有特殊的意義,因此必須使用這個步驟中說明的資料夾名稱。

  3. 在 [方案總管] 中,以滑鼠右鍵按一下 DynamicData 資料夾,然後按一下 [新增資料夾]。

  4. 將新資料夾命名為 FieldTemplates。

  5. 在 [方案總管] 中,以滑鼠右鍵按一下 FieldTemplates 資料夾,然後按一下 [加入新項目]。

  6. 在 [Visual Studio 安裝的範本] 下方,按一下 [動態資料欄位]。

  7. 在 [名稱] 方塊中輸入 Text.ascx。同時,請務必選取 [將程式碼置於個別檔案中]。

  8. 按一下 [加入]。

    如此便會建立 Text.ascx 與 Text_Edit.ascx 這兩個欄位範本。第一個控制項呈現顯示 String 資料欄位的 UI。第二個控制項呈現編輯 String 資料欄位的 UI。

  9. 開啟 Text_Edit.ascx 檔案,然後在 @ Control 指示詞中,將 AutoEventWireup 屬性設為 true。

  10. 儲存並關閉使用者控制項檔案。

    現在,您已經建立了呈現顯示與編輯 String 資料欄位的 UI。

建立 DateTime 欄位範本

本節說明如何建立呈現顯示與編輯 DateTime 資料欄位的範本欄位。顯示欄位範本會使用不包含時間的簡單日期表示方式。編輯欄位範本會使用 Calendar 控制項,讓使用者可以輸入新值。

若要建立顯示與編輯 DateTime 資料欄位的欄位範本

  1. 在 [方案總管] 中,以滑鼠右鍵按一下 DynamicData\FieldTemplates 資料夾,然後按一下 [加入新項目]。

  2. 在 [Visual Studio 安裝的範本] 下方,按一下 [動態資料欄位]。

  3. 在 [名稱] 方塊中輸入 DateCalendar.ascx。同時,請務必選取 [將程式碼置於個別檔案中]。

  4. 按一下 [加入]。

    如此便會建立 DateCalendar.ascx 與 DateCalendar_Edit.ascx 這兩個欄位範本。第一個控制項呈現顯示 DateTime 資料欄位的 UI。第二個控制項呈現編輯 DateTime 資料欄位的 UI。

  5. 開啟 DateCalendar.ascx 檔案。

  6. Literal 控制項中,刪除對 Text 屬性的 FieldValueString 指派,如下列範例所示:

    <asp:Literal ID="Literal1" />
    
  7. 儲存並關閉使用者控制項檔案。

  8. 開啟 DateCalendar.ascx.vb 或 DateCalendar.ascx.cs 欄位範本的程式碼後置檔案。

  9. 覆寫使用者控制項 OnDataBinding 方法,不要包含時間、設定顯示 DateTime 值的格式,如下列範例所示:FieldValue 中可以使用欄位的值。

    protected override void OnDataBinding(EventArgs e)
    {
      base.OnDataBinding(e);
      string shortDate = string.Empty;
      if (FieldValue != null)
      {
        DateTime dt = (DateTime)FieldValue;
        shortDate = dt.ToShortDateString();
      }
      Literal1.Text = shortDate;
    }
    
    Protected Overloads Overrides Sub OnDataBinding( _
        ByVal e As EventArgs)
        MyBase.OnDataBinding(e)
        Dim shortDate As String = String.Empty
        If FieldValue IsNot Nothing Then
          Dim dt As DateTime = Format(CType(FieldValue, DateTime), "d")
          shortDate = dt.ToShortDateString()
        End If
        Literal1.Text = shortDate
    End Sub  
    
  10. 儲存並關閉程式碼後置檔案。

  11. 開啟 DateCalendar_Edit.ascx 檔案。

  12. @ Control 指示詞,將 AutoEventWireup 屬性設定為 true。

  13. TextBox 控制項中,以自訂的 GetDateString() 方法取代 Text 屬性中的 FieldValueString 運算式,如以下範例所示:

    <asp:TextBox ID="TextBox1"  
      Text='<%# GetDateString() %>' >
    </asp:TextBox>
    
  14. 將下列標記加入到檔案中,以定義呈現 UI 的 Calendar 控制項,便可以透過其他方法編輯日期。

    <asp:Calendar ID="Calendar1"  
      VisibleDate=
        '<%# (FieldValue != null) ? FieldValue : DateTime.Now %>'
      SelectedDate=
        '<%# (FieldValue != null) ? FieldValue : DateTime.Now %>'
      OnSelectionChanged="Calendar1_SelectionChanged" />
    
    <asp:Calendar ID="Calendar1"  
      VisibleDate=
      '<%# If(FieldValue,DateTime.Now)%>'
      SelectedDate=
      '<%# If(FieldValue,DateTime.Now) %>'
      OnSelectionChanged="Calendar1_SelectionChanged" /> 
    
  15. 儲存並關閉欄位範本檔案。

  16. 開啟 DateCalendar_Edit.ascx.vb 或 DateCalendar_Edit.ascx.cs 程式碼後置檔案。

  17. 加入 GetDateString 方法。在這個方法中,處理透過 TextBox 控制項完成的使用者輸入。這個方法會使用不包含時間的簡短日期表示方式,設定日期的格式。

    下列範例顯示如何執行這項工作。

    protected string GetDateString()
    {
      if (FieldValue != null)
      {
        DateTime dt = (DateTime)FieldValue;
        return dt.ToShortDateString();
      }
      else
        return string.Empty;
    }
    
    Protected Function GetDateString() As String
      If FieldValue <> Nothing Then
        Dim dt As DateTime = Format(CType(FieldValue, DateTime), "d")
          Return dt.ToShortDateString()
      Else
        Return String.Empty
      End If
    End Function
    
  18. 加入 Calendar 控制項 SelectionChanged 事件的處理常式。

  19. 在處理常式中,將 TextBox 控制項的 Text 屬性,設定為日曆中所選日期的格式版本。此時,便會在文字方塊中顯示使用者的目前選取內容。

    下列範例示範此處理常式。

    protected void Calendar1_SelectionChanged(
      object sender, EventArgs e)
    {
      // Display value using the short date format.
      TextBox1.Text = 
      Calendar1.SelectedDate.ToString("d");
    }
    
    Protected Sub Calendar1_SelectionChanged( _
        ByVal sender As Object, ByVal e As EventArgs)
        ' Display value using the short date format.
        TextBox1.Text = Calendar1.SelectedDate.ToString("d")
    End Sub
    
  20. 儲存並關閉欄位範本檔案。

    現在,您已經建立了呈現顯示與編輯 DateTime 資料欄位的 UI。欄位範本會要求動態資料套用適當的格式設定與驗證。如果驗證失敗,欄位範本也會產生對應的錯誤訊息。

建立顯示 Customer 資料表的自訂頁面

本節會說明如何使用搭配動態行為的 GridView 控制項,建立顯示資料表的自訂頁面。

控制項的動態行為需透過下列方法建立:

資料庫的資料表包含 String 與 DateTime 資料欄位型別。因此,當您使用具備動態行為的 GridView 控制項來顯示資料表資料時,動態資料會使用您已建立的自訂欄位範本。

若要建立顯示 Customers 資料表的自訂頁面

  1. 在 [方案總管] 中以滑鼠右鍵按一下專案名稱,然後選取 [加入新項目]。

  2. 在 [Visual Studio 安裝的範本] 下方,選取 [Web Form]。

    在 [名稱] 方塊中,輸入 Customers.aspx。同時,請務必選取 [將程式碼置於個別檔案中]。

  3. @ Page 指示詞中,將 AutoEventWireup 屬性設為 true。

  4. 在 [原始碼] 檢視中,將 DynamicDataManager 控制項加入頁面的主體,如下範例所示:

    <body>
    
        <asp:DynamicDataManager ID="DynamicDataManager1"      />
    
    </body>
    

    DynamicDataManager 控制項會要求動態資料處理頁面中的資料控制項,如同動態控制項。

  5. 從 [工具箱] 的 [資料] 索引標籤中,將 LinqDataSource 控制項加入至頁面。

  6. LinqDataSource 控制項的 EnableUpdate 屬性設定為 true。

    這樣便能啟用資料控制項的更新作業。

  7. LinqDataSource 控制項的 TableName 屬性設定為想要使用的資料表,也就是 Customers。

  8. ContextTypeName 屬性設為資料內容類別 (AdventureWorksLTDataContext),如下範例所示:

    <asp:LinqDataSource ID="LinqDataSource1"  
      TableName="Customers"  ContextTypeName="AdventureWorksLTDataContext"  EnableUpdate="true">
    </asp:LinqDataSource>
    
  9. 從 [工具箱] 的 [資料] 索引標籤中,將 GridView 控制項加入至頁面。

    這個控制項會用來顯示與修改資料欄位。

  10. GridView 控制項的 DataSourceID 屬性設定為 LinqDataSource 控制項的 ID,如下範例所示:

    <form ID="Form1"  >
    
        <asp:GridView ID="GridView1"   
          DataSourceID="LinqDataSource1" >
        </asp:GridView>
    </form>
    
  11. GridView 控制項的 AutoGenerateColumns 屬性設定為 false,並將 AutoGenerateEditButton 屬性設定為 true,如下範例所示:

    <asp:GridView ID="GridView1"   
      AutoGenerateEditButton="true"  AutoGenerateColumns="false" >
    </asp:GridView>
    

    如此會啟用編輯作業,停用根據資料庫資料表的自動資料行產生。您會改為使用 DynamicField 控制項填入 GridView 控制項。

  12. GridView 控制項的 AllowPagingAllowSorting 屬性設定為 true,如下範例所示:

    <asp:GridView ID="GridView1"   
    
      AllowPaging="true"  AllowSorting="true" >
    </asp:GridView>
    
  13. 將三個 DynamicField 控制項加入到 Columns 屬性,並將其 DataField() 屬性設定為 "FirstName"、"LastName" 以及 "ModifiedDate"。

    DynamicField 控制項會利用 ASP.NET Dynamic Data,讀取資料模型中的資料,並且使用適當的欄位範本進行格式設定。請注意,您不需要在 DynamicField 控制項中,加入如何讀取或設定資料格式的資訊。動態資料會自動處理這些工作。

    下列範例顯示加入 DynamicField 控制項後的 GridView 控制項標記。

    <asp:GridView ID="GridView1"
     >
    
      <Columns>    <asp:DynamicField DataField="FirstName" />    <asp:DynamicField DataField="LastName" />    <asp:DynamicField DataField="ModifiedDate" />  </Columns>
    </asp:GridView>
    
    注意事項:

    DynamicField 控制項不在 [工具箱] 中。因此,您必須在 [原始碼] 檢視中將該控制項加入為標記。

  14. 儲存並關閉 Customers.aspx 檔案。

    如此,您已建立了可以存取 Customers 資料表的自訂頁面。

  15. 開啟 Customers.aspx.cs 或 Customers.aspx.vb 程式碼後置檔案。

  16. 使用 Visual Basic 中的 Imports 關鍵字或中 Visual C# 的 using 關鍵字,加入 System.Web.DynamicData 命名空間的參考,如下範例所示:

    using System.Web.DynamicData;
    
    Imports System.Web.DynamicData
    
  17. 建立 Page_Init 方法,如下範例所示:

    protected void Page_Init(object sender, 
    EventArgs e)
    {    }
    
    Protected Sub Page_Init(ByVal sender As Object, _
    ByVal e As EventArgs)
    
    End Sub
    
  18. 在 Page_Init 方法,向 DynamicDataManager 註冊 GridView 控制項以啟用動態行為。

    下列範例顯示如何執行這項工作。

    protected void Page_Init(object sender, 
    EventArgs e)
    {
        DynamicDataManager1.RegisterControl(GridView1);
    }
    
    Protected Sub Page_Init(ByVal sender As Object, _
        ByVal e As EventArgs)
        DynamicDataManager1.RegisterControl(GridView1)
    End Sub
    
  19. 關閉程式碼後置檔案。

測試動態資料

本節示範如何確認動態資料功能已經整合到網站中。您可以透過資料模型操作資料庫,並且確認整合的結果可以正常運作。如果您在修改資料時提供了無效的值,您會看到動態資料根據從資料庫所推測的資訊所產生的錯誤訊息。

若要測試動資料功能已確實整合

  1. 在 [方案總管] 中,以滑鼠右鍵按一下 Customers.aspx 網頁,再選取 [在瀏覽器中檢視]。

    瀏覽器會顯示資料行已選取的 Customers 資料表頁面。

  2. 在任一資料列中,按一下 [編輯],然後清除姓氏。

  3. 在同一資料列上,按一下 [更新]。

    動態資料會顯示錯誤訊息,警告您 FirstName 資料欄位不允許空白字串。

  4. 在同一資料列上,按一下 [取消]。

  5. 在任一資料列中,按一下 [編輯],然後變更姓氏。

  6. 在同一資料列上,按一下 [更新]。

    動態資料更新資料庫。因為您已經在姓氏欄位輸入了一個有效值,該資料會通過您稍早建立之欄位範本的驗證控制項。

  7. 在任一資料列中,按一下 [編輯],然後輸入非英文字母的字元做為名字或姓氏。

  8. 在同一資料列上,按一下 [更新]。

    動態資料會顯示您先前以規則運算式指定的自訂錯誤訊息,警告您不允許使用所輸入的字元。

  9. 在同一資料列上,按一下 [取消]。

  10. 在任一資料列中,按一下 [編輯],然後清除日期。

  11. 在同一資料列上,按一下 [更新]。

    動態資料會顯示錯誤訊息,警告您 ModifiedDate 資料欄位不允許空白字串。

  12. 在同一資料列上,按一下 [取消]。

  13. 在任一資料列中,按一下 [編輯],然後使用 Calendar 控制項變更日期。

  14. 在同一資料列上,按一下 [更新]。

    動態資料更新資料庫。因為您已經在日期欄位輸入了一個允許的值,該資料會通過您稍早建立之欄位範本的驗證控制項。

後續步驟

在本逐步解說已經示範了 ASP.NET Dynamic Data 的基本原則,以及如何將動態資料功能加入現有的 ASP.NET 網站。當您將動態資料功能整合到現有的 ASP.NET 網站時,您可以執行下列工作:

  • 操作基礎資料庫。動態資料加入了資料驅動應用程式的重要功能,包括建立、讀取、更新及刪除 (CRUD) 等作業。

  • 顯示及編輯資料欄位,這是因為動態資料會根據透過資料庫推測得知的資料,選取適當的欄位範本。

您可能會想要實驗其他的功能。建議您進一步探索下列各項:

如需一般資訊,您可能需要執行下列動作:

請參閱

概念

ASP.NET 動態資料模型概觀

ASP.NET 動態資料欄位範本概觀

ASP.NET 動態資料 Scaffolding 和頁面範本概觀

ASP.NET 動態資料概觀

變更記錄

日期

記錄

原因

2008 年 7 月

加入主題。

SP1 功能變更。