Blockui is a pretty good jquery plug-in. It can easily set the display of executed text (such as loading...) in a specified area of the page and lock the Restricted Input in this area. To put it simply, blockui is a good choice if we want the webpage to restrict the input or repeated buttons and display the processing information during the execution of PostBack or Ajax updates, next we will demonstrate how to use ASP. use blockui in. net.
Blockui is the insert of jquery. Therefore, you need to download the JS connector (jquery. js and jquery. blockui. JS) inserted by jquery and blockui. The files can be downloaded through the following links:
Jquery. JS:Http://jquery.com/
Jquery. blockui. JS:Http://malsup.com/jquery/block/(This website provides a detailed description of blockui usage)
Add an ASP. NET Ajax website project in vs2005, copy the jquery. js and jquery. blockui. js files to the JS data folder of the website, and add references to the header block on the page.
1:<Head Runat= "Server">
2:<Title>Jquery blockui plugin</Title>
3:<Script SRC= "JS/jquery. js" Type= "Text/JavaScript"> </Script>
4:<SCRIPT src ="JS/jquery. blockui. js"Type ="Text/JavaScript"></Script>
Add the updatepanel control to the page and set a button, aspxProgramCodeAs follows:5:</Head>
1:<Form ID= "Form1" Runat= "Server">
2:<ASP: scriptmanager ID= "Scriptmanager1" Runat= "Server" />
3:<Div>
4:<ASP: updatepanel ID= "Updatepanel1" Runat= "Server">
5:<Contenttemplate>
6:<ASP: button ID= "Button1" Runat= "Server" Onclick= "Button#click" Text= "Button" />
7:</Contenttemplate>
8:</ASP: updatepanel>
9:</Div>
10:</Form>
Write the program code waiting for 3 seconds in the Click Event of the button to display the blockui effect.
1:Protected SubButton#click (ByvalSenderAsSystem.Object,ByvalEAsSystem. eventargs)
2:DimN1As Integer
3:ForN1 = 1To3
4:System. Threading. thread. Sleep (1000)
5:Next
6:EndSub
It is quite easy to use the blockui plug-in, as long as the page is called when the page is submit$. Blockui ()The blockui is displayed, and the call is made when the page is loaded.$. Unblockui ()Hide blockui.
Therefore, write the following program code in the page load event.
1:Protected SubPage_load (ByvalSenderAs Object,ByvalEAsSystem. eventargs)Handles Me. Load
2:DimSscriptAs String
3:
4:'Blockui is displayed when submit is executed on the page.
5:Sscript ="$. Blockui ();"
6:Scriptmanager. registeronsubmitstatement (Me,Me.GetType(),"Blockui", Sscript)
7:
8:'Hide blockui during page loading
9:Sscript ="$. Unblockui ();"
10:Scriptmanager. registerstartupscript (Me,Me.GetType(),"Unblockui", Sscript,True)
The execution result is as follows. Because $. blockui () does not specify a region, the entire page is locked and the message "Please wait..." is displayed. When the execution ends, $. unblockui () is called to hide blockui. If you want to change the displayed text to "loading data..." and add a waiting graph, you can input the Message Parameter in $. blockui (). The program code is modified as follows:11:EndSub
1:'Blockui is displayed when submit is executed on the page.
2:Sscript ="$. Blockui ({"&_
3:"Message: '"Busy.gif""/> Loading data... &_
4:"});"
The execution result is as follows:5:Scriptmanager. registeronsubmitstatement (Me,Me.GetType(),"Blockui", Sscript)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
