共用方式為

HOW TO：自訂動態資料控制項中的資料欄位外觀和行為

更新：2007 年 11 月

ASP.NET Dynamic Data 使用欄位範本來呈現資料表的每一個資料欄位。欄位範本屬於常見的使用者控制項 (.ascx files)，這些控制項會對應到由資料庫資料型別所決定的 Common Language Runtime (CLR) 資料型別。一般而言，ASP.NET Dynamic Data 在顯示每一種型別的資料以及要修改或插入該型別的資料時，會分別提供兩種不同的使用者控制項。

本主題說明如何透過設定動態資料控制項 (例如 DynamicControl 控制項及 DynamicField 欄位) 中的 UIHint 屬性，自訂資料欄位外觀及行為。UIHint 屬性在特定資料欄位由上述其中一個物件呈現時，會指定要使用哪一個欄位範本。UIHint 屬性可以指向其中一個已提供的範本或是您所建立的新範本。在您不是使用動態資料自動建立的網頁，而您要建立自訂的網頁以顯示與編輯資料時，這個方法便相當適合。

或者，您也可以使用屬性，變更整個應用程式中資料欄位的顯示及外觀。如需詳細資訊，請參閱 HOW TO：自訂資料模型中的資料欄位外觀和行為。

自訂資料繫結控制項中資料欄位的外觀和行為

  1. 另外，您也可以選擇建立能夠定義資料模型中特定資料欄位 UI 的自訂欄位範本。如需詳細資訊，請參閱 HOW TO：自訂資料模型中的資料欄位顯示。

  2. 如果您是使用 GridView 或 DetailsView 控制項，請加入 DynamicField 物件，並將其 UIHint 屬性設為要用於顯示資料的欄位範本名稱。

    以下範例示範了如何透過名為 RedText 的欄位範本，在欄位使用中 DynamicField 控制項，以呈現 ProductName 資料行。在顯示模式中，會使用 RedText.ascx 這個欄位範本顯示資料。在編輯或插入模式中，會使用 RedText_Edit.ascx 這個欄位範本顯示資料。

    <asp:DynamicField
  UIHint="RedText"
  DataField="ProductName" />
    注意事項：

    如果沒有找到指定的欄位範本，動態資料會使用後援機制。如需詳細資訊，請參閱 ASP.NET 動態資料欄位範本概觀。

  3. 如果使用的是利用範本或範本欄位的資料繫結控制項，例如 ListView 或 FormView 控制項，請加入會顯示資料的 DynamicControl 控制項，並將其 UIHint 屬性設為要顯示資料之資料欄位的名稱。

    下列範例會指定當項目處於編輯模式時，要使用名為 RedText 的欄位範本呈現 ProductName 資料行。在執行階段期間，動態資料會搜尋名為 RedText_Edit.ascx 的使用者控制項。

    <EditItemTemplate>
  <asp:DynamicControl 
    Mode="Edit"
    UIHint="RedText"
    DataField="ProductName" />
</EditItemTemplate>

範例

下列範例顯示如何將 UIHint 屬性加入到 GridView 控制項的 DynamicField 欄位。會設定該屬性，如此資料欄位才會使用欄位範本，以顯示用於編輯不連續日期的 Calendar 控制項。第二個與第三個範例顯示的使用者控制項程式碼，為會定義以簡短形式顯示日期與編輯欄位之 UI 的欄位範本。

<%@ Page Language="VB" %>

<script >

  Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs)
    DynamicDataManager1.RegisterControl(ProductsGridView)
  End Sub

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>UIHint Property Sample</title>
    <link href="~/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>

  <form id="form1" >
    <div>
      <h2><%= ProductsDataSource.TableName%> table</h2>

      <asp:DynamicDataManager ID="DynamicDataManager1" 
        AutoLoadForeignKeys="true" />

      <asp:ScriptManager ID="ScriptManager1"  EnablePartialRendering="true"/>

      <asp:UpdatePanel ID="UpdatePanel1" >
        <ContentTemplate>        

          <asp:GridView ID="ProductsGridView"  DataSourceID="ProductsDataSource"
            AutoGenerateEditButton="true"
            AutoGenerateColumns="false"
            AllowSorting="true"
            AllowPaging="true">
            <Columns>
              <asp:DynamicField DataField="Name" />
              <asp:DynamicField DataField="ProductNumber" />
              <asp:DynamicField DataField="DiscontinuedDate" UIHint="DateCalendar" />
            </Columns>        
            <EmptyDataTemplate>
              There are currently no items in this table.
            </EmptyDataTemplate>
          </asp:GridView>

          <!-- This example uses Microsoft SQL Server and connects   -->
          <!-- to the AdventureWorksLT sample database.              -->
          <asp:LinqDataSource ID="ProductsDataSource"  
            EnableUpdate="true"
            TableName="Products" 
            ContextTypeName="AdventureWorksLTDataContext" />

          </ContentTemplate>
        </asp:UpdatePanel>

    </div>
  </form>
</body>
</html>

<%@ Page Language="C#" %>

<script >

  protected void Page_Init(object sender, EventArgs e) 
  {
    DynamicDataManager1.RegisterControl(ProductsGridView);
  }

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>UIHint Property Sample</title>
    <link href="~/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>

  <form id="form1" >
    <div>
      <h2><%= ProductsDataSource.TableName%> table</h2>

      <asp:DynamicDataManager ID="DynamicDataManager1" 
        AutoLoadForeignKeys="true" />

      <asp:ScriptManager ID="ScriptManager1"  EnablePartialRendering="true"/>

      <asp:UpdatePanel ID="UpdatePanel1" >
        <ContentTemplate>        

          <asp:GridView ID="ProductsGridView"  DataSourceID="ProductsDataSource"
            AutoGenerateEditButton="true"
            AutoGenerateColumns="false"
            AllowSorting="true"
            AllowPaging="true">
            <Columns>
              <asp:DynamicField DataField="Name" />
              <asp:DynamicField DataField="ProductNumber" />
              <asp:DynamicField DataField="DiscontinuedDate" UIHint="DateCalendar" />
            </Columns>        
            <EmptyDataTemplate>
              There are currently no items in this table.
            </EmptyDataTemplate>
          </asp:GridView>

          <asp:LinqDataSource ID="ProductsDataSource"  
            EnableUpdate="true"
            TableName="Products" 
            ContextTypeName="AdventureWorksLTDataContext" />

          </ContentTemplate>
        </asp:UpdatePanel>

    </div>
  </form>
</body>
</html>

<%@ Control Language="VB" Inherits="System.Web.DynamicData.FieldTemplateUserControl" %>

<script >

  Function GetDateString() As String 
    If Not (FieldValue Is Nothing) Then
      Dim dt As DateTime = CType(FieldValue, DateTime)
      Return dt.ToShortDateString()
    Else
      Return String.Empty
    End If
  End Function
</script>

<%# GetDateString() %>

<%@ Control Language="C#" Inherits="System.Web.DynamicData.FieldTemplateUserControl" %>

<script >
    string GetDateString() 
    {
      if (FieldValue != null)
      {
        DateTime dt = (DateTime)FieldValue;
        return dt.ToShortDateString();
      }
      else
      {
        return string.Empty;
      }
    }
</script>

<%# GetDateString() %>

<%@ Control Language="VB" Inherits="System.Web.DynamicData.FieldTemplateUserControl" %>

<script >

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    TextBox1.ToolTip = Column.Description

    SetUpValidator(RequiredFieldValidator1)
    SetUpValidator(RegularExpressionValidator1)
    SetUpValidator(DynamicValidator1)
  End Sub

  Protected Overrides Sub ExtractValues(ByVal dictionary As IOrderedDictionary)
    dictionary(Column.Name) = ConvertEditedValue(TextBox1.Text)
  End Sub

  Public Overrides ReadOnly Property DataControl() As Control
    Get
      Return TextBox1
    End Get
  End Property

  Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
    TextBox1.Text = Calendar1.SelectedDate.ToString("d")
  End Sub

  Function GetDateString() As String
    If Not (FieldValue Is Nothing) Then
      Dim dt As DateTime = CType(FieldValue, DateTime)
      Return dt.ToShortDateString()
    Else
      Return String.Empty
    End If
  End Function

</script>

<asp:TextBox ID="TextBox1"  
  Text='<%# GetDateString() %>' 
  MaxLength="10">
</asp:TextBox>

<asp:Calendar ID="Calendar1"  
  VisibleDate='<%# IIf(FieldValue Is Nothing, DateTime.Now, FieldValue) %>'
  SelectedDate='<%# IIf(FieldValue Is Nothing, DateTime.Now, FieldValue) %>' 
  OnSelectionChanged="Calendar1_SelectionChanged" />

<asp:RequiredFieldValidator  ID="RequiredFieldValidator1" 
  CssClass="droplist" ControlToValidate="TextBox1" Display="Dynamic" Enabled="false" />
<asp:RegularExpressionValidator  ID="RegularExpressionValidator1" 
  CssClass="droplist" ControlToValidate="TextBox1" Display="Dynamic" Enabled="false" />  
<asp:DynamicValidator  ID="DynamicValidator1" 
  CssClass="droplist" ControlToValidate="TextBox1" Display="Dynamic" />

<%@ Control Language="C#" Inherits="System.Web.DynamicData.FieldTemplateUserControl" %>

<script >
    protected void Page_Load(object sender, EventArgs e) {
        TextBox1.ToolTip = Column.Description;

        SetUpValidator(RequiredFieldValidator1);
        SetUpValidator(RegularExpressionValidator1);
        SetUpValidator(DynamicValidator1);
    }

    protected override void ExtractValues(IOrderedDictionary dictionary) {
      dictionary[Column.Name] = ConvertEditedValue(TextBox1.Text);
    }

    public override Control DataControl
    {
      get
      {
        return TextBox1;
      }
    }  

    protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
      TextBox1.Text = Calendar1.SelectedDate.ToString("d");
    }

    string GetDateString()
    {
      if (FieldValue != null)
      {
        DateTime dt = (DateTime)FieldValue;
        return dt.ToShortDateString();
      }
      else
      {
        return string.Empty;
      }
    }
</script>

<asp:TextBox ID="TextBox1"  
  Text='<%# GetDateString() %>' 
  MaxLength="10">
</asp:TextBox>

<asp:Calendar ID="Calendar1"  
  VisibleDate='<%# (FieldValue != null) ? FieldValue : DateTime.Now %>'
  SelectedDate='<%# (FieldValue != null) ? FieldValue : DateTime.Now %>'
  OnSelectionChanged="Calendar1_SelectionChanged" />

<asp:RequiredFieldValidator  ID="RequiredFieldValidator1" 
  CssClass="droplist" ControlToValidate="TextBox1" Display="Dynamic" Enabled="false" />
<asp:RegularExpressionValidator  ID="RegularExpressionValidator1" 
  CssClass="droplist" ControlToValidate="TextBox1" Display="Dynamic" Enabled="false" />  
<asp:DynamicValidator  ID="DynamicValidator1" 
  CssClass="droplist" ControlToValidate="TextBox1" Display="Dynamic" />

編譯程式碼

這項範例需要：

  • 動態資料網站或動態資料 Web 應用程式

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

  • 已設定的 LINQ to SQL 類別，可以存取 AdventureWorks 或 AdventureWorksLT 資料庫的 Products 資料表。

  • 已註冊的資料內容物件，可以讓動態資料在 Global.asax 檔案中使用。

穩固程式設計

下列情形可能會造成例外狀況 (Exception)：

  • 資料庫無法使用

請參閱

工作

逐步解說：建立使用 Scaffolding 的新動態資料網站

概念

ASP.NET 動態資料概觀

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

參考

DynamicField.UIHint

DynamicControl.UIHint

  • Last updated on