关键字:
- 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