關鍵字:
- Eval
- Bind
- 強類型數據綁定
- 類似的其它選擇
在開發實踐中，數據綁定能夠最大限度的提高代碼產出和代碼質量。因此有必要整理一下數據綁定的方法及其相關注意事項。數據綁定分為單向和雙向，大家可能已經猜到，單項的數據綁定一般用於數據展示；而雙向的數據綁定除了展示數據，還要將界面數據的變動自動寫回到綁定的數據源中。
Eval
單向數據綁定，將數據源中的數據展現到界面上。當我們提及數據展現時，必然會考慮到數據的格式問題，例如日期格式。當然，這也是Eval關心的內容。
一般數據綁定
<%#Eval(“屬性名稱")%>
帶數據格式的數據綁定
<%#Eval(“屬性名稱","{0:格式字符串}")%>
帶格式字符串的數據綁定
<%#Eval(“屬性名稱","Home.aspx?id={0}")%>
例子代碼
home.aspx
<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" %> <html> <head> <title>Home Page</title> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { formView.DataSource = new[] { new { ID=3, Name = "Baran", BirthDay= DateTime.Parse("2012-6-18"), } }; formView.DataBind(); } </script> <style type="text/css"> .left { float: left; } .clear { clear: both; } </style> </head> <body> <form runat="server" id="form1"> <asp:FormView ID="formView" runat="server"> <ItemTemplate> <div class="left"> Name:</div> <div class="left"> <asp:Label ID="_name" runat="server" Text='<%#Eval("Name") %>' /></div> <div class="clear" /> <div class="left"> BirthDay:</div> <div class="left"> <asp:Label ID="_birthday" runat="server" Text='<%#Eval("BirthDay","{0:dd/MM/yyyy}") %>' /></div> <div class="clear" /> <div class="left"> Relative Link: </div> <div class="left"> <asp:HyperLink ID="_relativeLink" runat="server" NavigateUrl='<%#Eval("ID","Membership.aspx?ID={0}") %>' Text="Go" /> </div> </ItemTemplate> </asp:FormView> </form> </body> </html>
顯示效果
Bind
一般數據綁定
<%#Bind(“屬性名稱")%>
帶格式的數據綁定
<%#Bind(“屬性名稱", "{0:數據格式}") %>
例子代碼
home.aspx
<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" %> <html> <head> <title>Home Page</title> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { } </script> <style type="text/css"> .left { float: left; } .clear { clear: both; } </style> </head> <body> <form runat="server" id="form1"> <asp:FormView ID="formView" runat="server" DataSourceID="memberInfoDataSource" DefaultMode="Edit" Visible="true"> <EditItemTemplate> <div class="left"> Name:</div> <div class="left"> <asp:TextBox ID="_name" runat="server" Text='<%#Bind("Name") %>' /></div> <div class="clear" /> <div class="left"> BirthDay:</div> <div class="left"> <asp:TextBox ID="_birthday" runat="server" Text='<%#Bind("BirthDay","{0:dd/MM/yyyy}") %>' /></div> <div class="clear" /> <asp:LinkButton ID="_update" runat="server" Text="Update" CommandName="Update" /> </EditItemTemplate> </asp:FormView> <asp:ObjectDataSource ID="memberInfoDataSource" TypeName="MemberEntities.MemberInfo" SelectMethod="GetMembers" runat="server" /> </form> </body> </html>
MemberInfo.cs
using System; using System.Collections.Generic; namespace MemberEntities { public class MemberInfo { public string Name { get; set; } public int ID { get; set; } public DateTime BirthDay { get; set; } public static IEnumerable<MemberInfo> GetMembers() { return new MemberInfo[] { new MemberInfo{ ID=3, Name = "Baran", BirthDay= DateTime.Parse("2012-6-18"),} }; } } }
顯示效果
強類型數據綁定
眾所周知，Eval數據綁定應用的反射原理來返回數據，如果你對性能非常苛刻，但又不想丟掉綁定帶來的便利，那么我們還可以使用強類型轉換。
綁定的核心代碼為<%#((MemberEntities.MemberInfo)Container.DataItem).ID %>，將Container.DataItem先轉換成指定的類型，然后直接訪問其中的屬性。
例子代碼
<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" %> <html> <head> <title>Home Page</title> </head> <body> <form runat="server" id="form1"> <asp:DetailsView ID="detailsView" runat="server" DataSourceID="memberInfoDataSource" AutoGenerateRows="false"> <Fields> <asp:TemplateField HeaderText="ID"> <ItemTemplate> <asp:Literal ID="Literal1" Text='<%#((MemberEntities.MemberInfo)Container.DataItem).ID %>' runat="server" /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Name"> <ItemTemplate> <asp:Literal ID="Literal2" Text='<%#((MemberEntities.MemberInfo)Container.DataItem).Name %>' runat="server" /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="BirthDay"> <ItemTemplate> <asp:Literal ID="Literal1" Text='<%#((MemberEntities.MemberInfo)Container.DataItem).BirthDay.ToShortDateString() %>' runat="server" /> </ItemTemplate> </asp:TemplateField> </Fields> </asp:DetailsView> <asp:ObjectDataSource ID="memberInfoDataSource" TypeName="MemberEntities.MemberInfo" SelectMethod="GetMembers" runat="server" /> </form> </body> </html>
類似的其它選擇
綁定的目的是為了將后台數據顯示在前台，但將后台數據顯示在前台，除了綁定還有其它的方式可供選擇。
- 直接使用asp.net控件，類似Literal,Label
- 使用asp.net <%Response.Write(頁面屬性)%>標記
- 使用JSON數據
例子代碼
<%@ Page Language="C#" AutoEventWireup="true" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.did"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script runat="server" type="text/C#"> protected DateTime Now { get { return DateTime.Now; } } [System.Web.Services.WebMethod] public static object GetEntity() { return new { Id = 1, Name = "JsonEntityName", }; } </script> <script type="text/javascript"> function showMsg(id) { alert(document.getElementById(id).innerHTML); } $(document).ready(function () { $("#assignValueButton").click(function () { $.ajax( { type: "POST", dataType: "json", contentType: "application/json", url: "WebForm1.aspx/GetEntity", success: function (data) { $("#entityId").text(data.d.Id); $("#entityName").text(data.d.Name); }, error: function () { alert("error in get entity"); }, }); }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="_demoText" runat="server" Text="Demo Text" /> </div> </form> <span>Id:</span><span id="entityId"></span><br /> <span>name:</span><span id="entityName"></span><br /> <span>now: <% Response.Write(Now);%></span> <input type="button" value="show msg" onclick="javascript:showMsg('<%=_demoText.ClientID %>')" id="showMsgButton" /> <input type="button" value="assign value" id="assignValueButton" /> </body> </html>
參考鏈接：
Eval:http://msdn.microsoft.com/en-us/library/4hx47hfe
Bind:http://msdn.microsoft.com/en-us/library/ms178366.aspx