همانطور که میدانید استاده از Update Panel از PostBack شدن صفحه جلوگیری میکند .<br />در همین مورد با استفاده از Block UI میتوان کاربر را از انجام عملیات مطلع کرد .<br />در این مقاله نحوه استفاده از Jquery Block UI در Update panel را بررسی خواهیم کرد

سلام دوستان

ما در پروژه هامون برای جلوگیری از PostBack شدن صفحه از Ajax استفاده میکنیم

حالا در این مقاله میخوام یادتون بدم چطوری در UpdatePanel از Jquery BlockUI استفاده کنید

به این صورت که در حین انجام پروسس UpdatePanel قفل بشه

خب در مرحله اول به کتابخانه های Jquery نیاز داریم

در مرحله بعد باید کتابخانه ها به صفحه متصل شوند

من اینکار را در ScriptManager انجام دادم

<asp:ScriptManager ID="ScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Path="~/Content/jquery-1.2.6.min.js" /> <asp:ScriptReference Path="~/Content/jquery.blockUI.js" /> <asp:ScriptReference Path="~/Content/BlockUIUpdatePanel.js" /> </Scripts> </asp:ScriptManager>

در مرحله بعد داخل UpdatePanel یک کلید برای ایجاد وقفه یا شبیه سازی پروسس قرار دادیم

System.Threading.Thread.Sleep(4000);

خب قسمت اصلی در فایل BlockUIUpdatePanel.js قرار داره

Sys.Application.add_init(function() { // Allows the div.blockMsg style in CSS to // override BlockUI's defaults. $.blockUI.defaults.css = {}; // Add the BlockUI call as an onclick handler // of the Save button. $addHandler($get('Button1'), 'click', function () { $('#UpdatePanelIsIn').block({ message: preload }); }); // Get a reference to the PageRequestManager. var prm = Sys.WebForms.PageRequestManager.getInstance(); // Unblock the form when a partial postback ends. prm.add_endRequest(function() { $('#UpdatePanelIsIn').unblock(); }); }); // Bonus! Progress indicator preloading. var preload = document.createElement('img'); preload.src = 'images/progress-indicator.gif'; delete preload;

در کدهای بالا با زدن دکمه UpdatePanelIsIn به حالت Block در میاد و در اتمام عملیات Ajax از Block خارج میشود

میتونید کد بالا طوری بنویسید که برای کل سایت و تمام UpdatePanel ها این کار رو انجام یده

نمونه هم ضمیمه کردم

امیدوارم خوشتون اومده باشه

موفق و پیروز باشید