updatePanel Control
updatePanel هي جوهر Microsoft ASP.NET AJAX. فهي تعمل partial-page rendering أي عمل رفرش لجزء من الصفحة اوتوماتيكيا للعناصر التي بداخل ContentTemplate مباشرة أو عن طريق ال Triggers.
في البداية سأوضح استخدامها بأمثلة بسيطة حتى أوضح استخدامها و بعدين راح أحكي بعض المعلومات و التفاصيل فهاي المشاركة و فيما بعد.
<p align=center><img src=http://www.arabmoheet.net/forum/editor/smiles_icon/02.gif border=0></p>
المثال الاول:
هذا المثال يوضح مدى أهمية أجاكس , ممكن تحكوا المثال سخيف بس حتى نبدأ خطوة خطوة لازم نوضح النقاط الجوهرية و الأسايسة حتى ما تغيب عن قارئ الدرس.
المثال عبارة عن 2 buttons واحد داخل updatePanle والاخر خارجة , والثنين لهم نفس ال function وهو احضار وقت السيرفر.
أولا نتأكد ان ال ScriptManager موجود في الصفحة .
نعمل Drag and drop للupdatePanel ونضع بداخلها button + label.
ونضع أيضا Button+label خارج الupdatePanel.
ونكتب الأمرالتالي داخل كل زر:
DateTime.Now.ToLongTimeString();
يصبح المثال كالتالي:
<html xmlns=http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Last update at:" + DateTime.Now.ToLongTimeString();
}
protected void Button2_Click(object sender, EventArgs e)
{
Label2.Text = "Last update at:" + DateTime.Now.ToLongTimeString();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:updatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<fieldset>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<asp:Button ID="Button1" runat="server" Text="Button in updatePanle" OnClick="Button1_Click" />
</fieldset>
</ContentTemplate>
</asp:updatePanel>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label><br />
<asp:Button ID="Button2" runat="server" Text="Button Outside" OnClick="Button2_Click" />
</div>
</form>
</body>
</html>
أها ... شفنا الفرق كبير بين الزرين خاصة انك انت بدك تفكر بعمق أكبر , راح يكون موقعك مرفوع عسيرفر و بينك و بين المستخدم مسافات , و احنا هلا الكود بسيط سطر واحد انت بدك تحسب حسابك انو راح تكتب كود معقد و راح تربط مع قاعدة البيانات ..كل هذا راح تحسب حسابه و تخيلوه وراح تشوف الفرق .
نكمل بنفس المثال :
نفرض انو بدنا نستخدم updatePanle واحدة لزرين . و كل زر بمكان بالصفحة يعني ما بنقدر نحطهم جنب بعض , برضو ما في مشكلة راح نستخدم اشي اسمه العنصر
Triggers .
هناك 2 element يستخدمان للupdatePanel
الاول :ContentTemplate وهو الذي نضع فيه العناصر لعمل asynchronously لها بشكل مباشر .
الثاني : Triggers وأم استخدام لها للعناصر اللي خارج ال updatePanel .
ويقوم بذلك AsyncPostBackTrigger ونحدد الخصائص له ControlID لاسم الكنترول
و EventName لتحديد الحدث .
مثال :
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
</Triggers>
بحيث اذا ضفنا هذا الكود للكود السابق فهيك كل الصحفة اي الزرين ما راح يعملو رفرش كامل للصفحة .
بالنسبة لتعريف AsyncPostBackTrigger بطريقتين .
الأولى مثل ما هو مكتوب فوق.
وأيضا يمكن استخدام updatePanelTrigger Collection Editor . و هو من خصائص ال updatePanle
اذهب الى الخصائص واختار Triggers.
والصور توضح الخطوات.
----------------------------------------------------
استخدام آخر للعنصر AsyncPostBackTrigger :
والا أقلكم بلاش أشتتكم الان بكثرت المداخلات و الافكار سأفرد لها درس خاص في هذه الدورة بإذن الله بس ذكرونا.
هيك ان شاء الله تكون الأمور واضحة وانا هيك الفكرة الأساسية ان شاء الله أكون و صلتها , ننتظر اذا في استفسارات أو تعليقا اذا في حدا بحب ينزل الاداة و يتابع معنا الدروس .
و في المشاركة الجاي لاني ما بدي أشتتكم بهاي المشاركة. و راح أحط مثال دسم أكثر و بنربطه مع الداتابيز.
مع التحية..