ASP.Net Data Controls & DataBinding | All Codeguru and Programming

2008/Oct/15

ใน dynamic data controls ของ Asp.Net มี controls เลือกใช้งานหลายตัวเลยทีเดียว แต่ละตัวก็มีความแตกต่างกัน ดังตารางเปรียบเทียบด้านล่าง

Controls	Select	Delete	Inline Edit	Insert	Paging	Sorting	Column Autogeneration
GridView	x	x	x	-	x	x	x
ListView	x	x	x	x	x(DataPager)	x	-
Repeater	-	-	-	-	-	-	-
DetailsView	-	x	x	x	x	-	x
FormView	-	x	x	x	x	-	-
DataList	x	x	x	-	-	-	-

การเลือกใช้ controls ให้เหมาะสมกับงานนั้นเป็นสิ่งสำคัญ ถ้าบวกกับความเข้าใจว่า controls แต่ล่ะตัวทำอะไรได้บ้างไมว่าข้อมูลจะเป็นแบบไหน เราก็สามารถ custom หรือ override function feature ต่างๆให้เข้ากับรูปแบบงานของเราได้อย่างรวดเร็ว (นี้คือข้อดีของ .Net )

การ ฺ Binding ข้อมูล

การเชื่อมโยงข้อมูลฝั่ง Data Access Layer ให้แสดงออกในฝั้ง Presentation สามารถทำได้หลากหลายวิธีการ ถ้าเราได้ลองเล่นตัว Asp.Net MVC หรือ Model View Controller เป็น Model ที่กำลังได้รับความนิยม โดยเฉพาะคนที่ใช้ Ruby on Rials (ROR) ทำให้เรามองการทำงานของเวบเป็น layer หรือ ลำดับชั้นได้อย่างชัดเจนมาก ไว้กลับมาเขียนเฉพาะเรื่องนี้กันในคราวหน้่า

ย้อนกลับมาที่ Data Binding ตามหลักการแล้วได้แบ่งการ Tags Binding ถ้าแบ่งข้อมูลตาม Asp.Net Version

Asp.Net 1.1

<%# DataBinder.Eval(Container.DataItem, ''expression'' ) %> 
<%# DataBinder.Eval( '', '', ''format string'') %>

Asp.Net 2.0

<%# Eval(''expression'') %>  // การ ฺBinding แบบ One Way  หรือ One Time
<%# Eval(''expression'', ''format string'') %> 
<%# Bind(''expression'') %>  // การ ฺBinding แบบ Two Way
<%# Bind(''expression'', ''format string'') %>

การ Binding แบบ One Way หมายถึง การดึงข้อมูลแบบอ่านอย่างเดียวหรือแสดงอย่างเดียว แบบนี้สามารถcustoms output ได้มากแล้วแต่เงื่อนไขที่จะแสดงข้อมูล เช่น

<%# (Convert.ToBoolean(Eval("Status")))? "Enable" : "Disable" %>

การ Binding แบบ Two Way หมายถึง การดึงข้อมูลแบบทั้งอ่านและทั้งเขียน ได้ มักจะใช้ตอน Edit Mode

การ Binding ที่กล่าวมาข้างต้นมักจะใช้ ภายใต้ Tempate เช่น Bertrand Le Roy dsได้เขียนใน blog ของเขาเรื่อง Hack: using live bindings outside templates เป็นการ Binding นอก Tempate ซึ่งอาศัย ScriptManager ในการทำงาน ตัวอย่าง code

<%@ Page Language="C#" %>
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 runat="server">
<title>Bindingtitle>
<script type="text/javascript">
var data = { answer: 42 };
function pageLoad() {
$create(Sys.Binding, {
target: $get('answerDisplay'),
targetProperty: 'innerText',
source: data,
path: 'answer',
mode: Sys.BindingMode.oneWay
});
}
script>
head>
<body xmlns:sys="javascript:Sys"
xmlns:binding="javascript:Sys.Binding"
sys:activate="*">
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="SM1">
<Scripts>
<asp:ScriptReference
Path="~/Script/MicrosoftAjaxTemplates.js" />
Scripts>
asp:ScriptManager>
<div>
<span id="answerDisplay">span><br />
<input type="text" id="answer"
sys:attach="binding"
binding:target="{{ $get('answer') }}"
binding:targetproperty="value"
binding:source="{{ data }}"
binding:path="answer"
binding:mode="{{ Sys.BindingMode.twoWay }}" />
div>
form>
body>
html>