PDA

View Full Version : آموزش: بروز رسانی UpdatePanel با استفاده از Timer - سطح مبتدی


Mostafa_Dindar
جمعه 15 مرداد 1389, 15:53 عصر
سلام ,

آیا تا به حال به مواردی برخوردید که بخواهید یک قسمت از صفحه بعد از یک مدت زمان مشخص بهنگام بشه ؟

آیا تا به حال یک صفحه گزارش بازی آنلاین رو دیدید؟ قسمت گزارش هر چند ثانیه مشخص دوباره بروزرسانی میشه .

اینکار به سادگی هر چه تمام با Timer و Update Panel امکان پذیر است .

در اینجا یک مثال ساده رو دنبال میکنیم :

یک ScriptManger و یک UpdatePanel در روی فرم قرار دهید
خاصیت EnablePartialRendering از ScriptManger را برابر True قرار دهید .
خاصیت UpdaeMode از UpdatePanel را برابر Conditional قرار دهید
داخل ContentTemplate از UpdatePanel یک Lable و یک Timer قرار دهید

تا الان MarkUP صفحه aspx شما باید به شکل زیر باشد :

<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Timer ID="timer1" runat="server" />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>

حال بر روی Timer1 دابل کلید کنید و در رویداد Timer1_click اینطور بنویسید:
protected void timer1_Tick(object sender, EventArgs e)
{
RefreshTheZone();
UpdatePanel1.Update();
}

private void RefreshTheZone()
{
Label1.Text = System.DateTime.Now.ToString();
}

در واقع ما یک متد رو فراخوانی کردیم که در اون متد تاریخ جاری سیستم رو در یک Lable نمایش میده و متد Update از UpdatePanel رو فراخوانی میکنه .

برای اینکه این متد هر 5 ثانیه یکبار تکرار شود , خاصیت Interval از Timer رو برابر 5000 ست میکنیم ( 50000 میلی ثانیه ) .

تنها کاری که باقیمانده باید یک Trigger از نوع AsyncPostBackTrigger برای UpdatePanel بنویسیم :

<Triggers>
<asp:AsyncPostBackTrigger ControlID="timer1" EventName="Tick" />
</Triggers>

حال اگر صفحه را Run کنیم , مشاهده میکنیم که هر 5 ثانیه یکبار بدون PostBack تاریخ سیستم بروز میشود .

هدف ما در اینجا نحوه استفاده از از کنترلهای Timer و UpdatePanel بود وگرنه هیچ کار مفیدی نکردیم .

برای اینکه همه کد رو یکجا داشته باشید من اینجا به صورت کامل میزارم :

صفحه aspx:

<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Timer ID="timer1" runat="server" Interval="5000" ontick="timer1_Tick" />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Timer ID="Timer2" runat="server">
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>

و صفحه aspx.cs :

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
Label1.Text = System.DateTime.Now.ToString();
}

protected void timer1_Tick(object sender, EventArgs e)
{
RefreshTheZone();
UpdatePanel1.Update();
}

private void RefreshTheZone()
{
Label1.Text = System.DateTime.Now.ToString();
}

سربلند باشید
اوبالیت به بو
جمعه 15 مرداد 1389, 16:22 عصر
سلام

با تشكر از شما جناب Mostafa_Dindar (http://barnamenevis.org/forum/member.php?u=122118)

من يه سري سوال برام پيش اومده.



تك Trigger چه كار مي كنه؟ يعني در پشت صحنه چه اتفاقي رخ ميده؟
اين سوالم كمي مسخره هست: چرا نوشتيد if(!IsPostBack)؟؟
اين سوالم مربوط به اين خاصیت UpdaeMode از UpdatePanel هست كه برابر Conditional قرار داده شد. اين خاصيت چي هست و هر كدوم از مقادير چه كاري انجام مي دن؟

مرسي از آموزش مفيدتون
Mostafa_Dindar
جمعه 15 مرداد 1389, 20:43 عصر
تك Trigger چه كار مي كنه؟ يعني در پشت صحنه چه اتفاقي رخ ميده؟
اين سوالم كمي مسخره هست: چرا نوشتيد if(!IsPostBack)؟؟
اين سوالم مربوط به اين خاصیت UpdaeMode از UpdatePanel هست كه برابر Conditional قرار داده شد. اين خاصيت چي هست و هر كدوم از مقادير چه كاري انجام مي دن؟



سلام , خواهش میکنم .

1- به طور پیش فرض هر کنترلی که داخل UpdatePanel باشد باعث AsyncPostBackTrigger میشه .

در صورتی که بخواهیم بیرون از UpdatePanel باعث یک PostBack بشیم باید از Trigger کمک بگیریم .
2 مدل Trigger داریم

AsyncPostBackTrigger که تنها قسمت UpdatePanel سمت سرور میرود و بروز میشود
PostBackTrigger که باعث میشود تمام صفحه سمت سرور رفته و بروز شود

2- خواستیم تنها دفعه اول که صفحه لود میشود , تاریخ جاری سیستم رو نمایش دهیم . در واقع هرگاه خواسته باشیم یک کد تنها یک بار و اونهم دفعه اول که صفحه لود میشود اجرا شود , اون شرط رو پیش از اون مینویسیم .

3-UpdateMode دارای 2 مقدار هست :
Always : یعنی هر کنترلی که درون UpdatePanel هست رویداد ServerSide اون Fire شد PostBack صورت گیرد .

Conditional : یعنی خاصیت قبلی را لغو کند و Update تنها بر اساس Trigger ها صورت گیرد .


سربلند باشید
BookWorm
شنبه 16 مرداد 1389, 07:31 صبح
سلام دوست عزیز ، من قبلا از اینها استفاده کردم ولی وقتی با یک جاوا اسکریپت که توی سایت استفاده کردید همزمان استفاده بشه آنوقت می بینید که اگر صفحه شما اسکرول خورده باشه و تایمر داشته باشید صفحه بالا و پایین میره . مجبور شدم از تایمر همون جاوا استفاده کنم .