:: المدرسة العربية للويب ::

WebControls و ربطها بالبيانات


بواسطة : محمد خليل أبو صلاح
عدد المشاركات : 28
إقرأ أيضا للكاتب :	DataList الجزء الأول Repeater WebControls الجزء الثاني DataView - الجزء الثاني DataView - الجزء الأول
إتصل بالكاتب : إضغط هنا

القسم : ASP.NET

التصنيف : فئة الدروس.

عدد المشاهدات : 9

التقييم : -

WebControls و ربطها بالبيانات

في هذا الدرس سأشرح أداوت ال Web Controls المتقدمة عما سبق و التي ترتبط بمصادر للبيانات كقواعد البيانات أو ملفات XML موجودة على السيرفر أو على أماكن ما على الشبكة.

الأدوات تختلف و لكن طريقة الربط متشابهة جدا و هناك درس في قسم ال ADO.NET عن مفهوم ربط البيانات Data Binding له علاقة بدرس اليوم.

الأن سنبدأ درسنا مع أول أداة.

DropDownList

هذه الأداة تشبه كثيرا ما إستخدمناه لهذه الأداة في درس ال WebControls و لكن هناك إختلاف سنلاحظه بعد هذين المثالين حيث أن الأول سيكون على الطريقة العادية في تحديد عناصر القائمة List items و بين الطريقة التي هي جديدة علينا DataBinding :

<asp:dropdownlist id="dl" runat="server">
<asp:listitem text="image1" value="images/image1.gif" />
<asp:listitem text="image2" value="images/image2.gif" />
<asp:listitem text="image3" value="images/image3.gif" />
</asp:dropdownlist>

هذه كانت الطريقة العادية و لكن ساكتب مثالا يوصلنا بجدول للبيانات ثم نعرضها في القائمة المنسدلة :

<%@ Page Language="C#" Debug="True" %>
<%@ import Namespace="System.Data.OleDb" %>
<%@ import Namespace="System.Web.UI" %>
<%@ import Namespace="System.Web.UI.WebControls" %>
<script runat="server">

void Page_Load()
{

object rcv=Request.QueryString["DL"];
if(rcv!=null) {
Response.Write(rcv + "<BR>");
Response.End();
}
else
{
string prov="Provider=Microsoft.Jet.OleDb.4.0;Data Source=" + Server.MapPath("db.mdb");
string SQL="SELECT * FROM Categories";
OleDbConnection cn = new OleDbConnection(prov);
OleDbCommand cmd = new OleDbCommand(SQL,cn);

cn.Open();

OleDbDataReader reader = cmd.ExecuteReader();

DL.DataSource= reader;
DL.DataBind();

cn.Close();
}
}

</script>
<html>
<head>
</head>
<body>
<form action="repeater.aspx" method="get" runat="server">
<asp: DropDownList id="DL" runat="server" datavaluefield="id" datatextfield="category"></asp: DropDownList>
</form>
</body>
</html>

فكرة المثال هي عمل نموذج Form يرسل البيانات عبر المتصفح و يحوي على قائمة منسدلة بها التصنيفات الموجودة Categories في قاعدة البيانات و زر يقوم بإتمام العملية حيث ننتقل لنفس الصفحة ولكن لا يعرض إلا رقم التصنيف الذي إخترناه.

بداية دعونا ننظر للجزء الذي كتبناه من أجل إدراج الأداة :

<asp: DropDownList id="DL" runat="server" datavaluefield="id" datatextfield="category"></asp: DropDownList>

كما نرى أن الإختلاف واضح حيث لم نستخدم أيا من ال ListItem كما سبق و قمنا بتحديد خاصيتين الأولى هي datavaluefield و هي تأخذ إسم العمود في جدول البيانات و هو كان رقم التصنيف id و الخاصية الثانية هي datatextfield و هي ستعرض النص أمامنا على الشاشة حسب حقل category الموجود في جدول البيانات.

الأكواد البرمجية نعرفها جميعا و هي عن كيفية عمل DataReader و جعله يخزن مجموعة بيانات و لكن الجديد هو ربط القائمة المنسدلة التي أسميتها DL من خلال الخاصية id و هذه هي الأكواد الجديدة :

DL.DataSource= reader;
DL.DataBind();

حيث حددت الخاصية DataSource و هي مصدر البيانات على أنها محتويات ال Reader ثم قمت بربط البيانات فعليا مع الأداة من خلال الطريقة DataBind .

أعتقد أن الطريقة سهلة و يبقى أنني في أعلى الكود عرفت متغير من نوع Object بإسم rcv

object rcv=Request.QueryString["DL"];

يقوم بإستقبال القيمة التي أرسلت للمتصفح و الخاصة برقم التصنيف و طبعا النموج كان معدا عند خاصية ال Method على الطريقة Get حيث تمرر البيانات إلى شريط العنوان في المتصفح ثم قمت بجملة شرطية تفيد في فحص المتغير إن كان له قيمة أي تم إختيار قسم من القائمة و ضغط الزر فيقوم بكتابتها و إيقاف تنفيذ باقي الصفحة كي لا تظهر عن طريق الطريقة End الخاصة بالكائن Response و إلا فسوف يدخل لجملة الإستثناء و التي تقوم بجلب البيانات و إسنادها إلى القائمة و إظهارها للمستخدم و للعلم إن لم يتم الربط Data Binding فلن تظهر أية بيانات في القائمة المنسدلة و هذا شيء طبيعي.

RadioButtonList

الطريقة مشابهة لما سبق و سأكتفي بذكر مثال فقط و بنفس ما شرحت المثال السابق سيكون هنا

<%@ Page Language="C#" Debug="True" %>
<%@ import Namespace="System.Data.OleDb" %>
<%@ import Namespace="System.Web.UI" %>
<%@ import Namespace="System.Web.UI.WebControls" %>
<script runat="server">

void Page_Load()
{

string prov="Provider=Microsoft.Jet.OleDb.4.0;Data Source=" + Server.MapPath("db.mdb");
string SQL="SELECT * FROM Categories";
OleDbConnection cn = new OleDbConnection(prov);
OleDbCommand cmd = new OleDbCommand(SQL,cn);

cn.Open();

OleDbDataReader reader = cmd.ExecuteReader();

rd.DataSource= reader;
rd.DataBind();

cn.Close();

}

</script>
<html>
<head>
</head>
<body>
<form runat="server">
<asp:RadioButtonList id="rd" runat="server" datavaluefield="id" datatextfield="category"></asp:RadioButtonList>
</form>
</body>
</html>

فقط إنتبه للخاصيتين datavaluefield و الخاصية datatextfield .

CheckBoxList

أيضا سأكتفي بطرح مثال توضيحي

<%@ Page Language="C#" Debug="True" %>
<%@ import Namespace="System.Data.OleDb" %>
<%@ import Namespace="System.Web.UI" %>
<%@ import Namespace="System.Web.UI.WebControls" %>
<script runat="server">

void Page_Load()
{

string prov="Provider=Microsoft.Jet.OleDb.4.0;Data Source=" + Server.MapPath("db.mdb");
string SQL="SELECT * FROM Categories";
OleDbConnection cn = new OleDbConnection(prov);
OleDbCommand cmd = new OleDbCommand(SQL,cn);

cn.Open();

OleDbDataReader reader = cmd.ExecuteReader();

cb.DataSource= reader;
cb.DataBind();

cn.Close();

}
</script>
<html>
<head>
</head>
<body>
<form runat="server">
<asp:CheckBoxList id="cb" runat="server" datavaluefield="id" datatextfield="category"></asp:CheckBoxList>
</form>
</body>
</html>

طبعا هذه الأكواد سأرفقها جميعا مع هذا الدرس و لكن قاعدة البيانات Db.mdb ستجدونها مع الأمثلة التي أرفقتها في الدروس السابقة.

Repeater

بصراحة هذه الأداة مهمة جدا في تطبيقاتنا و هي سهلة الإستخدام و يتم ربطها كما سبق و سأذكر هنا مثلا يقوم بعرض الأقسام الموجودة في جدول التصنيفات Categories و سأجعل كل نتيجة تظهر على شكل وصلة تذهب بنا لصفحة تعرض البيانات الخاصة بالتصنيف حيث تمرر القيمة الخاصة بال Category ID لتلك الصفحة.
دعونا نرى المثال :

<%@ Page Language="C#" Debug="True" %>
<%@ import Namespace="System.Data.OleDb" %>
<%@ import Namespace="System.Web.UI" %>
<%@ import Namespace="System.Web.UI.WebControls" %>
<script runat="server">

void Page_Load()
{

string prov="Provider=Microsoft.Jet.OleDb.4.0;Data Source=" + Server.MapPath("db.mdb");
string SQL="SELECT * FROM Categories";
OleDbConnection cn = new OleDbConnection(prov);
OleDbCommand cmd = new OleDbCommand(SQL,cn);

cn.Open();

OleDbDataReader reader = cmd.ExecuteReader();

rp.DataSource= reader;
rp.DataBind();

cn.Close();

}

</script>
<html>
<head>
</head>
<body>
<form runat="server">
<asp:Repeater id="rp" runat="server">
<Itemtemplate>
<a href="more.aspx?id=<%# DataBinder.Eval(Container.DataItem,"id")%>"> <%# DataBinder.Eval(Container.DataItem,"category")%> <a />
<br />
</Itemtemplate>
</asp:Repeater>
</form>
</body>
</html>

الكود واضح جدا بالأعلى و هو تقليدي .. دعونا نرى منطقة ال HTML
قمنا بإدراج أداة Repeater كالتالي :

<asp:Repeater id="rp" runat="server">
</asp:Repeater>

و من أجل إظهار محتويات ال Repeater يجب إضافة الوسوم ItemTemplate حيث سنقوم بداخلها بكتابة ما نريد ليصبح الكود كالتالي :

<asp:Repeater id="rp" runat="server">
<Itemtemplate>
//نكتب هنا ما نريد
</Itemtemplate>
</asp:Repeater>

والآن كيف سنعرض الأقسام ؟؟ سنضيف التالي :

<asp:Repeater id="rp" runat="server">
<Itemtemplate>
<%# DataBinder.Eval(Container.DataItem,"category")%>
<br>
</Itemtemplate>
</asp:Repeater>

سيظهر كل قسم في سطر و لكن من أجل جعله وصلة يجب إضافة الوسم <a> أو نستخدم الأداة hyperlink كما أخذنا في دروس ال webControls ليصبح الكود كما يلي :

<asp:Repeater id="rp" runat="server">
<Itemtemplate>
<a href="more.aspx?id=<%#DataBinder.Eval(Container.DataItem,"id")%>">
<%# DataBinder.Eval(Container.DataItem,"category")%>
<a />
<br />
</Itemtemplate>
</asp:Repeater>

أعتقد أن الفكرة سهلة للغاية.

ملاحظة :

سوف أقوم بشرح ال Repeater و ال Data List و ال DataGrid كل أداة في درس مستقل لأن كل واحدة منها تحوي على تفاصيل عديدة قد تحتاج لدروس خاصة أخر أداتين ذكرتهما.

أتمنى أن يكون هذا الدرس سهلا للغاية و الأمثلة كما وعدتكم مرفقة مع الدرس.

محمد خليل أبو صلاح

مركز التحميل :

عدد مرات التحميل : 2

تقييم المقال :

خيارات إضافية :

[ أرسل الدرس لصديق] [ طباعة الدرس الحالي ]

دروس من نفس التصنيف :