PDA

View Full Version : یک سوال از UpdateProgress در AJAX


merlin_vista
سه شنبه 08 آبان 1386, 14:23 عصر
آقا چه شکلی بعضی از سایت ها وقتی داره عملیات در Ajax انجام میشه . صفحه مشکی میشه و یک لودینگ میاد !!! امیدوارم منظورم را فهمیده باشید !!!!:ناراحت:
mahdi_farhani
سه شنبه 08 آبان 1386, 14:36 عصر
اگر از Ajax Extention استفاده میکنی میتوی با این کد حاشو ببری


<body>
<body>
<form id="form1" runat="server">
<div id="mainDiv" style="height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_ beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_ endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args)
{
var elem = args.get_postBackElement();
loadingfuntion('block','gray');
}
function EndRequestHandler(sender, args)
{
loadingfuntion('none','');

}
function loadingfuntion(vis,st)
{
var adiv = $get('mainDiv');
var bdiv = $get('waitDiv');
adiv.style.filter=st;
bdiv.style.display=vis;
}
</script>

<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="Server">
<ContentTemplate>
&nbsp;<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
<img src="" alt=""/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="waitDiv" class="AlertStyle" style="display:none">
لطفا چند لحظه صبر کنید ..................
</div>
</form>
</body>
</html>
برو حاشو ببر ، دعا به جونمون کن
hamed_bostan
پنج شنبه 10 آبان 1386, 17:39 عصر
البته می تونی از UpdateProgress هم استفاده کنی
merlin_vista
پنج شنبه 10 آبان 1386, 19:59 عصر
UpdateProgress کجای کد بالا بگزارم !!
ehsan2007
پنج شنبه 10 آبان 1386, 21:15 عصر
من تازه آجاکس رو یاد گرفتم اونم زیاد هم یاد ندارم اما به جای کد های بالا از یک روش دیگه استفاده کردم با توابع جاوا اسکریپت
حالا سوالم اینکه تابع جاوا اسکریپت لودینگ رو بهتر و باسرعت بالاتر انجام میده یا کد بالا
اینم لینک باکسیه که درست کردم با لودینگ توسط جاوااسکریپت
www.box.irking.ir (http://www.box.irking.ir)
merlin_vista
پنج شنبه 10 آبان 1386, 22:50 عصر
من تازه آجاکس رو یاد گرفتم اونم زیاد هم یاد ندارم اما به جای کد های بالا از یک روش دیگه استفاده کردم با توابع جاوا اسکریپت
حالا سوالم اینکه تابع جاوا اسکریپت لودینگ رو بهتر و باسرعت بالاتر انجام میده یا کد بالا
اینم لینک باکسیه که درست کردم با لودینگ توسط جاوااسکریپت
www.box.irking.ir (http://www.box.irking.ir)

میشه بگید که چه شکلی اینجور درست کردید !! مثلاً وقتی عضویت را میزنی یه صفحه توی آن باز میشه و سپس میتونی اطلاعات را وارد کنی و ثبت نام کنی !! :لبخندساده::افسرده:
mahdi_farhani
پنج شنبه 10 آبان 1386, 23:31 عصر
دوست عزیز کاری که انجام دادید خیلی زیبا بود ، اگر میشه کد ها را بزارید تا همه بتونیم استفاده کنیم . (البته اگر دوست داری)
باید اینم بگم که لودینگ کاری به اجرای سرعت اجرا نداره ، لودینگ یه نمادی برای اینکه کاربر بدونه که سیستم در حال انجام عملیاته ، حالا فرقی نمیکنه که با جاوا باشه یا چیزی دیگه ، درضمن کد بالا هر عملیاتی رو که باعث پست بک شدن صفحه بشه براش لودینگ رو اجرا میکنه


البته می تونی از UpdateProgress هم استفاده کنی

من نتونستم با Update progress صفحه را gray کنم ، آیا میشه ؟
hamed_bostan
جمعه 11 آبان 1386, 00:23 صبح
UpdateProgress کجای کد بالا بگزارم !!



updateProgress رو داخل صفحه ات هر جایی گه میخوای بنداز و بعد یه فایل گیف که لودینگ هست بنداز داخلش و updatePannelId اون رو برابر اون updatePannel ای قرار بده که میخوای پروگرس روی اون اعمال بشه
mahdi_farhani
جمعه 11 آبان 1386, 08:46 صبح
حامد جان این کدی که من نوشتم صفحه را خاکستری میکنه و میتونی یه فایل گیفا هم براش ایجاد کنید ولی با Updateprogress نمیتونی دستور جاا اسکریپت اجرا کنی ...
hamed_bostan
جمعه 11 آبان 1386, 09:12 صبح
می دونم mahdei_farhani (http://barnamenevis.org/forum/member.php?u=6523) جان
راه شما یه راه حل خوبه . منم یه راه حل دیگه به دوستمون دادم که توسط خود اجاکس در نظر گرفته شده . حالا دیگه تصمیم با خودشون . اغلب برای پروگرس اجاکس از خود updateprogres اجاکس استفاده میشه
موفق باشید
maxpayn2
دوشنبه 05 آذر 1386, 13:48 عصر
اگر از Ajax Extention استفاده میکنی میتوی با این کد حاشو ببری


سلام ، من از کد شما استفاده کردم ولی در این کد فقط رنگ اجزای صفحه خاکستری میشه ولی Disable نمیشن

من با استفاده از راهنمای AjaxControlToolkit یه کد سر هم کردم که تمام عوامل رو Disable میکنه و به خاطر Disable شدن رنگشون هم خاکستری میشه :




<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default" %>
<%@RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="ajaxToolkit" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">

<title>Untitled Page</title>
</head>
<body>

<formid="form1"runat="server">

<ajaxToolkit:ToolkitScriptManagerID="ScriptManager1"runat="server"/>

<divid="up_container">

<asp:UpdatePanelID="update"runat="server">

<ContentTemplate>

<asp:TextBoxID="TextBox2"runat="server"Text="ajax"></asp:TextBox>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTriggerControlID="Button2"EventName="Click"/>

</Triggers>

</asp:UpdatePanel>

</div>


<br/>

<br/>

<asp:ButtonID="Button2"runat="server"Text="Button"OnClick="Button2_Click"/>


<ajaxToolkit:UpdatePanelAnimationExtenderID="upae"BehaviorID="animation"runat="server"TargetControlID="update">

<Animations>

<OnUpdating>

<Sequence>

<%-- Store the original height of the panel --%>
<ScriptActionScript="var b = $find('animation'); b._originalHeight = b._element.offsetHeight;"/>


<%-- Disable all the controls --%>
<Parallelduration="0">

<EnableActionAnimationTarget="TextBox2"Enabled="false"/>

<EnableActionAnimationTarget="Button2"Enabled="false"/>

</Parallel>

<StyleActionAttribute="overflow"Value="hidden"/>


<%-- Do each of the selected effects --%>
<Parallelduration=".25"Fps="30">

<FadeOutAnimationTarget="up_container"minimumOpacity=".2"/>

</Parallel>

</Sequence>

</OnUpdating>

<OnUpdated>

<Sequence>

<%-- Do each of the selected effects --%>
<Parallelduration=".25"Fps="30">

<FadeInAnimationTarget="up_container"minimumOpacity=".2"/>

</Parallel>


<%-- Enable all the controls --%>
<Parallelduration="0">

<EnableActionAnimationTarget="TextBox2"Enabled="true"/>

<EnableActionAnimationTarget="Button2"Enabled="true"/>

</Parallel>
</Sequence>

</OnUpdated>

</Animations>

</ajaxToolkit:UpdatePanelAnimationExtender>

</form>
</body>
</html>






protectedvoid Button2_Click(object sender, EventArgs e)
{
Thread.Sleep(3000);
}
mahdi_farhani
دوشنبه 05 آذر 1386, 21:33 عصر
اینو امتحان مینکم باید جالب باشه . ولی برای Disable کردن میتونی با یه دستور Javascript اون موقعی که Loading بش نشون میده صفحه اصلی را Disable کنی .
maxpayn2
سه شنبه 06 آذر 1386, 09:03 صبح
میشه کد جاوا اسکریپت رو بنویسین ؟
mahdi_farhani
سه شنبه 06 آذر 1386, 13:31 عصر
این کد Java که صفحه رو Gray و Disable کنه

var adiv = $get("MainDiv");
var lDiv = $get("Loading");
lDiv.style.left=(screen.width/2)-150;
lDiv.style.top=(screen.height/2)-20;
lDiv.style.display="Block";
adiv.style.height="100%";
adiv.style.filter= "progid:DXImageTransform.Microsoft.BasicImage(grays cale=1)";//"gray";
adiv.disabled=true;
mehrdad201
سه شنبه 13 آذر 1386, 01:27 صبح
یه توضیحی میدید این get$ چطوری کار می کنه ؟
mahdi_farhani
سه شنبه 13 آذر 1386, 03:12 صبح
دستور $get مثل getElemntById عمل میکنه و میره تو صفحه اون Object رو پیدا میکنه و دیگه میتونی ازش استفاده کنی .
mehrdad201
سه شنبه 13 آذر 1386, 11:01 صبح
میشه از این روش تو اون beginrequest که قبلا گفته بودی استفاده کرد ؟!؟!؟
mahdi_farhani
سه شنبه 13 آذر 1386, 15:02 عصر
بله ، این دقیقاً همون تابعی هست که من برای Progress استفاده مکنم و در Beginrequest صدا زده میشه .
mehrdad201
سه شنبه 13 آذر 1386, 23:54 عصر
یه پروژه سمپل میزاری اینجا برای من ......؟؟؟؟؟؟
mahdi_farhani
چهارشنبه 14 آذر 1386, 06:59 صبح
اینم یه پروژه مثال ،،،،، ولی من که همچی رو توضیح دادم !!!!!!!!
این صفحه Masterpage هم هسا


<%@ Master Language="C#" AutoEventWireup="true" CodeFile="mpBrown.master.cs" Inherits="MasterPages_mpBrown" %>
<%@ Register Src="../Module/ucOtherLinks.ascx" TagName="ucOtherLinks" TagPrefix="uc4" %>
<%@ Register Src="../Module/ucEstateToday.ascx" TagName="ucEstateToday" TagPrefix="uc3" %>
<%@ Register Src="../Module/ucAmar.ascx" TagName="ucAmar" TagPrefix="uc2" %>
<%@ Register Src="../Module/ucLogin.ascx" TagName="ucLogin" TagPrefix="uc1" %>
<!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>..::::.. املاک کارگر ..::::.. </title>
<script language="javascript" type="text/javascript" src="../Management/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script src="../Script/jsAjax.js" type="text/javascript" language="javascript"></script>
<script src="Script/jsAjax.js" type="text/javascript" language="javascript"></script>

</head>
<body style="font-size: 8pt">
<form id="form1" runat="server">
<center>
<div style="z-index: 101; left: 5px; width: 300px; position: absolute; top: 36px;
height: 40px; text-align: center" id="Loading" class="Loading">
<br />
<asp:Image ID="Image64" runat="server" ImageUrl="~/App_Themes/Brown/images/6.gif"
Width="145px"></asp:Image>
<asp:Label ID="Label2" runat="server" Text="لطفا چند لحظه صبر کنید" ForeColor="DarkGoldenrod"></asp:Label></div>
<div id="MainDiv">
<ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1">
</ajaxToolkit:ToolkitScriptManager>

<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_ beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_ endRequest(EndRequestHandler);
</script>

<table border="0" cellpadding="0" cellspacing="0" style="width: 800px;">
<tr>
<td align="right" valign="top">
<asp:Image ID="Image1" runat="server" ImageUrl="~/App_Themes/Brown/images/Header_04.gif" /></td>
<td align="right" valign="top">
<asp:Image ID="Image3" runat="server" ImageUrl="~/App_Themes/Brown/images/Header_03.gif" /></td>
<td align="right" valign="top">
<asp:Image ID="Image5" runat="server" ImageUrl="~/App_Themes/Brown/images/Header_02.gif" /></td>
<td align="right" valign="top">
<asp:Image ID="Image8" runat="server" ImageUrl="~/App_Themes/Brown/images/Header_01.gif" /></td>
</tr>
<tr>
<td align="right" valign="top" style="height: 62px">
<asp:Image ID="Image2" runat="server" ImageUrl="~/App_Themes/Brown/images/Header_08.gif" /></td>
<td align="right" valign="top" style="height: 62px">
<asp:Image ID="Image4" runat="server" ImageUrl="~/App_Themes/Brown/images/Header_07.gif" /></td>
<td align="right" valign="top" style="height: 62px">
<asp:Image ID="Image6" runat="server" ImageUrl="~/App_Themes/Brown/images/Header_06.gif" /></td>
<td align="right" valign="top" style="height: 62px">
<asp:Image ID="Image7" runat="server" ImageUrl="~/App_Themes/Brown/images/Header_05.gif" /></td>
</tr>
<tr style="padding: 5px 5px 5px 5px; margin: 5px 5px 5px 5px">
<td align="right" valign="top" style="text-align: center">
<table border="0" class="Menu" style="border-right: #926a3c 1px solid; border-top: #926a3c 1px solid;
border-left: #926a3c 1px solid; width: 100%; border-bottom: #926a3c 1px solid"
cellpadding="0" cellspacing="0">
<tr>
<td align="right" class="MenuHeader" colspan="1" valign="top" style="vertical-align: middle;
color: #ffff00; height: 24px; border-bottom: #000000 1px dashed;">
منو</td>
</tr>
<tr>
<td align="right" valign="top">
<asp:Image ID="Image9" runat="server" ImageUrl="~/App_Themes/Brown/images/Symbol.gif" />
<asp:HyperLink ID="HyperLink1" runat="server" CssClass="Menu" NavigateUrl="~/Default.aspx">صفحه اصلی</asp:HyperLink></td>
</tr>
<tr>
<td align="right" class="MenuSeprator" colspan="1" valign="top">
<asp:Image ID="Image16" runat="server" Height="1px" ImageUrl="~/App_Themes/Brown/images/Menu_Seprator.gif"
Width="100%" /></td>
</tr>
<tr>
<td align="right" valign="top">
<asp:Image ID="Image10" runat="server" ImageUrl="~/App_Themes/Brown/images/Symbol.gif" />
<asp:HyperLink ID="HyperLink2" runat="server" CssClass="Menu" NavigateUrl="~/wfRegister.aspx">ثبت نام</asp:HyperLink></td>
</tr>
<tr>
<td align="right" colspan="1" valign="top">
<asp:Image ID="Image17" runat="server" Height="1px" ImageUrl="~/App_Themes/Brown/images/Menu_Seprator.gif"
Width="100%" /></td>
</tr>
<tr>
<td align="right" valign="top">
<asp:Image ID="Image11" runat="server" ImageUrl="~/App_Themes/Brown/images/Symbol.gif" />
<asp:HyperLink ID="HyperLink3" runat="server" CssClass="Menu" NavigateUrl="~/wfSearch.aspx">جستجو</asp:HyperLink></td>
</tr>
<tr>
<td align="right" colspan="1" valign="top">
<asp:Image ID="Image21" runat="server" Height="1px" ImageUrl="~/App_Themes/Brown/images/Menu_Seprator.gif"
Width="100%" /></td>
</tr>

<tr>
<td align="right" valign="top">
<asp:Image ID="Image15" runat="server" ImageUrl="~/App_Themes/Brown/images/Symbol.gif" /><asp:HyperLink
ID="HyperLink7" runat="server" CssClass="Menu" NavigateUrl="~/wfNews.aspx">اخبار</asp:HyperLink></td>
</tr>
<tr>
<td align="right" colspan="1" valign="top">
<asp:Image ID="Image18" runat="server" Height="1px" ImageUrl="~/App_Themes/Brown/images/Menu_Seprator.gif"
Width="100%" /></td>
</tr>
<tr>
<td align="right" valign="top">
<asp:Image ID="Image12" runat="server" ImageUrl="~/App_Themes/Brown/images/Symbol.gif" />
<asp:HyperLink ID="HyperLink4" runat="server" CssClass="Menu" NavigateUrl="~/wfAddEstate.aspx">ثبت ملک</asp:HyperLink></td>
</tr>
<tr>
<td align="right" colspan="1" valign="top">
<asp:Image ID="Image19" runat="server" Height="1px" ImageUrl="~/App_Themes/Brown/images/Menu_Seprator.gif"
Width="100%" /></td>
</tr>
<tr>
<td align="right" valign="top">
<asp:Image ID="Image13" runat="server" ImageUrl="~/App_Themes/Brown/images/Symbol.gif" />
<asp:HyperLink ID="HyperLink5" runat="server" CssClass="Menu" NavigateUrl="~/wfAbout.aspx">درباره</asp:HyperLink></td>
</tr>
<tr>
<td align="right" colspan="1" valign="top">
<asp:Image ID="Image20" runat="server" Height="1px" ImageUrl="~/App_Themes/Brown/images/Menu_Seprator.gif"
Width="100%" /></td>
</tr>
<tr>
<td align="right" valign="top">
<asp:Image ID="Image14" runat="server" ImageUrl="~/App_Themes/Brown/images/Symbol.gif" />
<asp:HyperLink ID="HyperLink6" runat="server" CssClass="Menu" NavigateUrl="~/wfContactUs.aspx">تماس با ما</asp:HyperLink></td>
</tr>
</table>
<br />
<uc1:ucLogin ID="UcLogin1" runat="server" />
<br />
<uc4:ucOtherLinks id="UcOtherLinks1" runat="server" >
</uc4:ucOtherLinks><br />
</td>
<td align="right" colspan="2" valign="top" style="height: 442px">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
<td align="right" valign="top">
<uc3:ucEstateToday id="UcEstateToday1" runat="server">
</uc3:ucEstateToday><br />
<uc2:ucAmar ID="UcAmar1" runat="server"></uc2:ucAmar>
</td>
</tr>
<tr>
<td align="right" class="Footer" colspan="4" valign="top" style="text-align: center;
vertical-align: top;">
<asp:Label ID="Label1" runat="server" CssClass="PoweredBy" Text="Copyright 2007-2008©-AllrightReserved
"></asp:Label><br />
<asp:HyperLink ID="HyperLink25" runat="server" CssClass="PoweredBy" NavigateUrl="mailto://Mahdei.farhani@gmail.com">طراحی و پیاده سازی : تجارت رایانه نصف جهان</asp:HyperLink><br />
</tr>
</table>
</div>
</center>
</form>
</body>
</html>


فایل Js هم که استفاده کردم


// JScript File
function BeginRequestHandler(sender, args)
{
var elem = args.get_postBackElement();
ActivateAlertDiv();

}
function EndRequestHandler(sender, args)
{
var adiv = $get("MainDiv");
var lDiv = $get("Loading");
lDiv.style.display="none";
adiv.style.height="100%";
adiv.style.filter="";
adiv.disabled="";
}
function ActivateAlertDiv()
{

var adiv = $get("MainDiv");
var lDiv = $get("Loading");
lDiv.style.left=(screen.width/2)-150;
lDiv.style.top=(screen.height/2)-20;
lDiv.style.display="Block";
adiv.style.height="100%";
adiv.style.filter= "gray"//"progid:DXImageTransform.Microsoft.BasicImage(grays cale=1)";//"gray";
adiv.disabled=true;
}


نمونه آپلود شده ،،،، http://www.amlakkargar.com
fakhravari
شنبه 23 مهر 1390, 22:56 عصر
اگر از Ajax Extention استفاده میکنی میتوی با این کد حاشو ببری


<body>
<body>
<form id="form1" runat="server">
<div id="mainDiv" style="height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_ beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_ endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args)
{
var elem = args.get_postBackElement();
loadingfuntion('block','gray');
}
function EndRequestHandler(sender, args)
{
loadingfuntion('none','');

}
function loadingfuntion(vis,st)
{
var adiv = $get('mainDiv');
var bdiv = $get('waitDiv');
adiv.style.filter=st;
bdiv.style.display=vis;
}
</script>

<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="Server">
<ContentTemplate>
&nbsp;<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
<img src="" alt=""/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="waitDiv" class="AlertStyle" style="display:none">
لطفا چند لحظه صبر کنید ..................
</div>
</form>
</body>
</html>
برو حاشو ببر ، دعا به جونمون کن

با سلام به چه شکل از این کد استفاده کنم؟؟