熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> ASP編程 >> 正文

ASP.NET 2.0中實現模板中的數據綁定

2022-06-13   來源: ASP編程 

  模板化的數據綁定控件為我們在頁面上顯示數據提供了根本的靈活性你可能還記得ASPNET vx中的幾個模板化控件(例如DataList和Repeater控件)ASPNET 仍然支持這些控件但在模板中綁定數據的語法已經被簡化和改善了本文將討論在數據綁定控件模板中綁定數據的多種方法

  數據綁定表達式

  ASPNET 改善了模板中的數據綁定操作把vx中的數據綁定語法DataBinderEval(ContainerDataItem fieldname)簡化為Eval(fieldname)Eval方法與DataBinderEval一樣可以接受一個可選的格式化字符串參數縮短的Eval語法與DataBinderEval的不同點在於Eval會根據最近的容器對象(例如DataListItem)的DataItem屬性來自動地解析字段而DataBinderEval需要使用參數來指定容器由於這個原因Eval只能在數據綁定控件的模板中使用而不能用於Page(頁面)層當然ASPNET 頁面中仍然支持DataBinderEval你可以在不支持簡化的Eval語法的環境中使用它

  下面的例子演示了如何使用新的簡化的Eval數據綁定語法綁定到DataList數據項模板(ItemTemplate)中的ImageLabel和HyperLink控件

<asp:DataList ID=DataList RepeatColumns= Width= runat=server DataSourceID=ObjectDataSource
 <ItemTemplate>
  <asp:HyperLink ID=HyperLink runat=server NavigateUrl=<%# Eval(PhotoID PhotoFormViewPlainaspx?ID={}) %>
  <asp:Image ID=Image Runat=server ImageUrl=<%# Eval(FileName images/thumbs/{}) %> /></asp:HyperLink>
  <asp:Label ID=CaptionLabel runat=server Text=<%# Eval(Caption) %> />
 </ItemTemplate>
</asp:DataList><br />
<asp:ObjectDataSource ID=ObjectDataSource runat=server TypeName=DataComponentTableAdaptersPhotosTableAdapter SelectMethod=GetPhotosForAlbum
  數據綁定也可以作為控件的主題定義(theme definition)的一部分這樣我們就可以通過改變主題來隨意地改變模板化控件的布局和外觀但是Theme(主題)模板中只能使用Eval(或者後面討論的Bind)綁定到任意的用戶代碼是被禁止的

  FormView控件

  DataList控件在來自數據源的數據項中進行迭代操作並為每個數據項輸出ItemTemplate(數據項模板)這對於顯示數據項列表是有用的但是通常情況下你希望在一個窗體中實現單條數據項的綁定操作為了實現這個目的ASPNET 引入了FormView控件它能夠在任意的模板中每次顯示一個數據項DetailsView和FormView之間的主要差異在於DetailsView擁有內建的表格顯示方式而FormView需要使用用戶自定義的顯示模板在其它方面FormView和DetailsView對象模型是非常相似的下面的例子顯示了一個綁定到ObjectDataSource的FormView控件該FormView的ItemTemplate屬性包含數據綁定的ImageLabel和HyperLink控件與前面的DataList示例類似

<asp:FormView ID=FormView runat=server DataSourceID=ObjectDataSource
 <ItemTemplate>
  <asp:Label ID=CaptionLabel runat=server Text=<%# Eval(Caption) %> FontSize=pt /><br />
  <asp:Image ID=Image runat=server ImageUrl=<%# Eval(FileName images/{}) %> />
  <asp:HyperLink ID=HyperLink Text=Back to Album NavigateUrl=<%# Eval(AlbumID PhotosDataListaspx?ID={}) %> runat=server />
 </ItemTemplate>
</asp:FormView>
<asp:ObjectDataSource ID=ObjectDataSource runat=server TypeName=DataComponentTableAdaptersPhotosTableAdapter SelectMethod=GetPhoto
 <SelectParameters>
<asp:QueryStringParameter Name=PhotoID DefaultValue= QueryStringField=ID />
</SelectParameters>
</asp:ObjectDataSource>
  FormView與DetailsView類似也跟蹤當前顯示的數據項但是當數據源返回列表的時候我們也可以選擇支持多個數據項的分頁操作下面的例子顯示了一個帶有分頁功能的FormView

   <asp:FormView ID=FormView Runat=server DataSourceID=SqlDataSource
HeaderText=Books for Author AllowPaging=True
 <ItemTemplate>
  <asp:Image ID=Image ImageUrl=<%# Eval(title_id~/Images/{}gif) %> Runat=server />
  <asp:Label ID=Label FontSize=em FontBold=true Text=<%# Eval(title) %> runat=server />
  <asp:Label ID=Label Text=<%# Eval(price{:c}) %> runat=server />
 </ItemTemplate>
</asp:FormView>
<asp:SqlDataSource ID=SqlDataSource Runat=server SelectCommand=SELECT dboauthorsau_id dbotitlestitle_id dbotitlestitle dbotitlestype dbotitlesprice dbotitlesnotes FROM dboauthors INNER JOIN dbotitleauthor ON dboauthorsau_id = dbotitleauthorau_id INNER JOIN dbotitles ON dbotitleauthortitle_id = dbotitlestitle_id WHERE (dboauthorsau_id = @au_id)
ConnectionString=<%$ ConnectionStrings:Pubs %>
<SelectParameters>
<asp:QueryStringParameter Name=au_id DefaultValue= QueryStringField=ID />
</SelectParameters>
</asp:SqlDataSource>

  雙向數據綁定

  FormView可以通過相關的數據源控件支持自動地更新插入和刪除操作(與DetailsView類似)如果要定義編輯或插入的UI那麼除了定義數據項模板(ItemTemplate)之外你還要定義EditItemTemplate或InsertItemTemplate模板在這個模板中你可以把輸入控件(例如文本框檢查框或下拉列表)綁定到數據源的字段這些模板中的數據綁定使用了雙向數據綁定語法允許FormView從模板的輸入控件中提取值並傳遞給數據源這些數據綁定操作用新的Bind(fieldname)語法代替了Eval

  請注意使用Bind語法的數據綁定控件必須設置好ID屬性

  GridView或DetailsView執行更新或插入操作的時候(這些控件的Columns或Fields都會定義BoundFields綁定字段)GridView或 DetailsView負責建立編輯或插入模式中的輸入UI因此它能夠自動地提取這些值並把它們傳遞給數據源由於模板包含了任意的用戶自定義UI控件雙向數據綁定語法就是必要的以確保模板化控件(例如FormView)在應對更新插入或刪除操作的時候知道應該從模板中提取那些控件的值你仍然可以在EditItemTemplate中使用Eval語句進行數據綁定來給數據源傳遞值請注意FormView與DetailsView和GridView一樣支持DataKeyNames屬性它保存了傳遞給更新/刪除操作的主鍵字典的原始值即使這些值沒有顯示出來

  FormView支持DefaultMode屬性它可以指定默認顯示的模板但在默認情況下FormView處於只讀模式並顯示ItemTemplate模板為了把UI從只讀模式轉換為編輯或插入模式你可以給模板添加一個按鈕控件把該按鈕的CommandName屬性設置為Edit或New在EditItemTemplate模板中你可以增加按鈕把CommandName設置為Update或Cancel以提交或終止更新操作類似的你可以增加按鈕把CommandName設置為Insert或Cancel來提交或終止插入操作

  下面的例子演示了定義了ItemTemplate和EditItemTemplate模板的FormView其中的ItemTemplate模板包含了使用Eval(雙向)綁定的控件而EditItemTemplate模板則包含了使用Bind語句進行雙向綁定的文本框控件主鍵字段(PhotoID)是使用DataKeyNames屬性存放在viewstate中的該FormView包含了用於在模板之間進行切換的按鈕

<asp:FormView ID=FormView runat=server DataSourceID=ObjectDataSource DataKeyNames=PhotoID
<EditItemTemplate>
 <b>Enter a New Caption:</b>
 <asp:TextBox Text=<%# Bind(Caption) %> runat=server ID=CaptionTextBox /> <asp:Button ID=Button runat=server Text=Update CommandName=Update />
 <asp:Button ID=Button runat=server Text=Cancel CommandName=Cancel />
</EditItemTemplate>
<ItemTemplate>
 <asp:Label ID=CaptionLabel runat=server Text=<%# Eval(Caption) %> FontSize=pt /><br />
 <asp:Image ID=Image runat=server ImageUrl=<%# Eval(FileName images/{}) %> /> <br />
 <asp:Button ID=Button runat=server Text=Edit Caption CommandName=Edit /> <asp:HyperLink ID=HyperLink Text=Back to Album NavigateUrl=<%# Eval(AlbumID PhotosDataListaspx?ID={}) %> runat=server />
</ItemTemplate>
</asp:FormView>
<asp:ObjectDataSource ID=ObjectDataSource runat=server TypeName=DataComponentTableAdaptersPhotosTableAdapter SelectMethod=GetPhoto UpdateMethod=UpdateCaption OldValuesParameterFormatString=original_{}
 <UpdateParameters>
  <asp:Parameter Name=Caption />
  <asp:Parameter Name=Original_PhotoID />
 </UpdateParameters>
<SelectParameters>
<asp:QueryStringParameter Name=PhotoID DefaultValue= QueryStringField=ID />
</SelectParameters>
</asp:ObjectDataSource>
  GridView和DetailsView還支持模板化UI它是通過給Columns或Fields集合增加TemplateField來實現的TemplateField支持使用ItemTemplateEditItemTemplate和InsertItemTemplate(DetailsView才有)為控件的不同顯示模式中的字段指定UI與上面的FormView示例類似EditItemTemplate或InsertItemTemplate中的雙向數據綁定也允許GridView或DetailsView從這些模板的控件中提取值TemplateField最常見的用途是給EditItemTemplate增加驗證器控件用於公開地驗證GridView或DetailsView操作下面的例子演示了這種技術

   ……
<asp:GridView ID=GridView runat=server DataSourceID=ObjectDataSource AutoGenerateColumns=False AllowPaging=True AllowSorting=True DataKeyNames=AlbumID
 <Columns>
  <asp:CommandField ShowEditButton=True />
  <asp:BoundField ReadOnly=True HeaderText=AlbumID DataField=AlbumID SortExpression=AlbumID />
  <asp:TemplateField HeaderText=AlbumName SortExpression=AlbumName ItemStyleWrap=false
   <ItemTemplate>
    <asp:Label ID=Label runat=server Text=<%# Eval(AlbumName) %>></asp:Label>
   </ItemTemplate>
   <EditItemTemplate>
    <asp:TextBox ID=TextBox runat=server Text=<%# Bind(AlbumName) %>></asp:TextBox>
    <asp:RequiredFieldValidator ControlToValidate=TextBox ErrorMessage=AlbumName cannot be empty ID=RequiredFieldValidator Display=Dynamic runat=server>*</asp:RequiredFieldValidator>
   </EditItemTemplate>
  </asp:TemplateField>
  ……
  </asp:GridView><br />
  <asp:ValidationSummary ID=ValidationSummary runat=server />
  <asp:ObjectDataSource ID=ObjectDataSource runat=server ConvertNullToDBNull=true
TypeName=DataComponentTableAdaptersAlbumsTableAdapter SelectMethod=GetAlbumsByOwner UpdateMethod=Update OldValuesParameterFormatString=original_{}
  ……
</asp:ObjectDataSource>
  TemplateField的另外一種用途是定制給GridView或DetailsView列/字段輸入值的控件例如你可以在TemplateField的EditItemTemplate中放置一個DropDownList允許用戶從預定義的值列表中選擇下面的例子演示了這種技術請注意示例中的下拉列表綁定到了自己的數據源控件以動態地獲取列表值

<asp:TemplateField HeaderText=Owner SortExpression=Owner
 <ItemTemplate>
  <asp:Label ID=Label runat=server Text=<%# Eval(Owner) %>></asp:Label>
 </ItemTemplate>
 <EditItemTemplate>
  <asp:DropDownList DataSourceID=ObjectDataSource DataTextField=Owner DataValueField=Owner ID=DropDownList runat=server SelectedValue=<%# Bind(Owner) %>
  </asp:DropDownList>
 </EditItemTemplate>
 <ItemStyle Wrap=False />
</asp:TemplateField>


From:http://tw.wingwit.com/Article/program/ASP/201311/21726.html
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.