کنترل UpdatePanel قسمت اول
سلام
کنترل UpdatePanel قسمت اول
قبل از توضیح دادن این کنترل اجازه بدین یه سری فرایند که در درخواست صفحه ASP.NET اتفاق می افته رو براتون بگم تا درک این کنترل براتون آسونتر بشه
حتماً شما دوستان می دونید که وقتی یه صفحه ASP.NET رو درخواست می کنید اون صفحه روی سرور پردازش می شه و به صورت کدهای HTML در میاد و برای شما ارسال میشه و مرورگر شما کدهای HTML رو به نمایش در میاره
حالا شما تصور کنید که یه صفحه دارید با چندین عکس و فایل فلش و غیره. توی این صفحه به طور مثال دو تا DropDownList دارید که قرار با انتخاب یک آیتم از یکی از انها DropDownList دومی مقدار دهی بشه نکته اینجاست که شما خاصیت AutoPostBack اولی رو True می کنید و با انتخاب یک آیتم از اون کل صفحه ارسال میشه و در سرور پردازش شده و برای شما بازپس فرستاده میشود این کار باعث میشه شما رمانی رو منتظر بمونید تا صفحه دوباره لود بشه
حالا کنترل UpdatePanel باعث میشه که شما از بروز رسانی جزیی استفاده کنید
یعنی چی؟
یعنی اینکه شما در مثال بالا اگر کنترل DropDownList اولی رو درون یک بلاک UpdatePanel قرار بدید دیگه کل صفحه از نو لود نمیشود بلکه فقط کنترل هایی که درون UpdatePanel قرار داره نو میشه
البته اینو بگم که در اصل کار هیچ تغییری صورت نمی گیره یعنی بعد از درخواست و PostBack شدن دوباره کل صفحه در سرور پردازش میشه و برای کلاینت بازپس فرستاده میشه در سمت کلاینت دوباره کد HTML پردازش شده و قسمتی که در بلاک UpdatePanel قرار داشته بروزرسانی شده و بقیه کد به دور ریخته میشود
این رو هم در نظر داشته باشید که وقتی از بروزسانی جزیی استفاده می کنید صفحه از دید کاربر خارج نمیشه بلکه فقط اون قسمتی که در بلاک UpdatPanel قرار داره دوباره نو میشود
اگر دقیقاً متوجه نشدید امیدوارم با ذکر یک مثال به کل قضیه پی ببرید
خوب ما یه صفحه ASP.NET می سازیم که توی اون یه تصویر GIF متحرک یک Lable و دو Button وجود داره البته فراموش نشه ما به یک کنترل ScriptManager و یک کنترل UpdatePanel هم نیاز داریم ID یکی از Button ها رو به btnRefresh تغییر داده و به همراه کنترل Label رو در بلاک UpdatePanel قرار بدین
کد قسمت Body صفحه ASP.NET باید به شکل زیر باشه
کد:
<formid="form1"runat="server">
<div>
<asp:ImageID="Image1"runat="server"ImageUrl="~/Naser.gif"/>
<br/>
<asp:ScriptManagerID="ScriptManager1"runat="server">
</asp:ScriptManager>
<asp:UpdatePanelID="UpdatePanel1"runat="server">
<ContentTemplate>
<asp:LabelID="lblTime"runat="server"></asp:Label>
<br/>
<asp:ButtonID="btnRefresh"runat="server"Text="RefreshTime..."/>
<br/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div>
<asp:ButtonID="Button2"runat="server"Text="Button"/>
</div>
</form>
</body>
حالا در رویداد کلیک Button که در بلاک UpdatePanel قرار داره دستور زیر رو وارد کنید
کد:
lblTime.Text = DateTime.Now.ToLongTimeString
در رویداد Page_Load صفحه هم کد بالا را وارد کنید
فقط دقت داشته باشید در کد بالا قسمتی رو که با رنگ قرمز مشخص کردم نام Label ما می باشد
حالا صفحه رو اجرا کنید وقتی شما روی btnRefresh کلیک می کنید بدون اینکه کل صفحه بروزرسانی بشه ساعت جاری سرور به شما نمایش داده خواهد شد ولی اگر روی Button کلیک کنید کل صفحه بروزرسانی شده و ساعت جاری سرور نمایش داده خواهد شد
برای اینکه شما راحتتر متوجه بشین اگر به تصویر متحرکی که روی صفحه قرار داره نگاه کنید در صورتیکه روی btnRefresh کلیک کنید انیمیشن بدون هیچ وفقه ای به کار خود ادامه میده
ولی اگر روی Button کلیک کنید انیمیشن دوباره از اول شروع به اجرا میکند
اینم لینک یه تصویر GIF
کد:
http://naserfeb8646.persiangig.com/image/Naser.gif
یاعلی
کنترل UpdatePanel قسمت دوم
سلام
کنترل UpdatePanel قسمت دوم
خوب دوستان تا اینجا فهمیدیم که اگر کنترل هایی رو در بلاک UpdatePanel و تگ ContentTemplate قرار بدیم می تونیم اون عناصر رو بروزرسانی جزیی کنیم
حالا درس این جلسه
در کنترل UpdatePanel به جز تگ ContentTemplate تگ دیگری وجود داره به نام Triggers که الآن کارش رو با یه مثال توضیح میدم
ما توی صفحه یک سری کنترل داریم که چند تا از اونها در بلاک UpdatePanel قرار داره و ما می خواهیم وقتی روی یه دکمه که توی بلاک UpdatePanel نیست کلیک می کنیم عملیات بروزرسانی جریی انجام بشه
خوب باید چیکار کنیم؟
هیچی فقط کافیه که در بلاک UpdatePanel از تگ Triggers استفاده کنید
** اجازه بدین قبل از اینکه بحث رو ادامه بدم یه نکته رو بگم و اون اینکه در تگ Triggers دوکنترل asp به نام های AsyncPostBackTrigger و PostBackTrigger وجود داره که هر دو عملیات بروزرسانی را انجام می دهند ولی یه تفاوت داره که در ادامه میگم **
ادامه آموزش
حالا توی تگ Triggers چی باید بزاریم
اول یه کنترل asp:AsyncPostBackTrigger قرار میدیم بعد خصوصیت ControlID را با نام کنترلی که قرار عملیات PostBack رو در خارج از بلاک UpdatePanel انجام بده ست می کنیم و خصوصیت EventName رو با رویدادی که قرار عملیات PostBack رو انجام بده پر می کنیم
حالا کار تمومه و می تونید عملیات بروزرسانی جزیی رو در خارج از بلاک UpdatePanel انجام بدین
و اما تفاوت AsyncPostBackTrigger و PostBackTrigger
تفاوت این دو تا در اینه که کنترل AsyncPostBackTrigger عملیات بروزرسانی رو به صورت جزیی انجام میده یعنی فقط محتویات درون UpdatePanel رو بروزرسانی می کنه ولی کنترل PostBackTrigger عملیات بروزرسانی رو به طور کامل انجام میده یعنی کل صفحه بروز میشه
شاید این سوال براتون پیش بیاد که چرا باید از PostBackTrigger استفاده کنیم؟
شما وقتی یه کنترل UpdatePanel رو به صفحه اضافه میکنید به طور پیش فرض خصوصیتChildrenAsTrigger با True و خصوصیتUpdateMode با Always ست می شوند که معنی هر کدوم رو الان توضیح میدم
خصوصیت ChildrenAsTrigger به شما می گه که کنترل های درون بلاک UpdatePanel بدون اینکه توی Triggers قرار بگیره به عنوان Trigger کنترل UpddatPanel باشه با نه که اگر True باشه هر کنترلی که در بلاک UpdatePanel فرار داره و عملیات PostBack رو انجام میده بروزرسانی جزیی میکنه
و خصوصیت UpdateMode که دارای دو مقدار Always و Conditional هست نوع بروزرسانی رو مشخص میکنه
که حالت Always به معنی اینکه وقتی عملیات PostBack توی بلاک UpdatePanel به وسیله هر کنترلی انجام شد بروزرسانی جزیی صورت بگیره و حالت Conditional یعنی عملیات PostBack فقط توسط کنترل هایی که در تگ Triggers قرار داره انجام بشه
حالا برای چی این توضیح ها رو دادم؟
بعضی وقتها شما می خواید یه کنترلی رو داخل بلاک UpdatePanel قرار بدین ولی با عملیات PostBack اون بروزرسانی جزیی انجام نشه بلکه کل صفحه بروزسانی بشه برای اینکار کافیه از کنترل PostBackTrigger در تگ Trigger استفاده کنید
مثال
ما برای این حالت از همون مثال قسمت اول استفاده می کنیم فقط کنترل Button با نام btnRefresh رو خارج از بلاک UpdatePanel و کنترل Button2 رو درون بلاک UpdatePanel قرار می دهیم و هر دو را با کنترل های داخل Triggers معرفی می کنیم
قسمت Body
کد:
<body>
<formid="form1"runat="server">
<div>
<asp:ImageID="Image1"runat="server"ImageUrl="~/Naser.gif"/>
<br/>
<asp:ScriptManagerID="ScriptManager1"runat="server">
</asp:ScriptManager>
<asp:UpdatePanelID="UpdatePanel1"runat="server">
<ContentTemplate>
<asp:LabelID="lblTime"runat="server"></asp:Label>
<br/>
<asp:ButtonID="Button2"runat="server"Text="Button"/>
<br/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTriggerControlID="btnRefresh"EventName="click"/>
<asp:PostBackTriggerControlID="Button2"/>
</Triggers>
</asp:UpdatePanel>
<asp:ButtonID="btnRefresh"runat="server"Text="RefreshTime..."/>
</div>
<div>
</div>
</form>
</body>
و بقیه تنظیمات هم مانند مثال قبل
در این مثال هم مانند مثال قسمت قبل وقتی روی btnRefresh کلیک کنید بروزرسانی جزیی و وقتی روی Button کلیک می کنید کل صفحه بروزرسانی میشه فقط تفاوتش اینکه اینبار btnRefresh خارج و Button2 داخل بلاک UpdatePanel قرار داره
یاعلی
