One of the functions of scriptmanager is to process partial updates on the page. For this, I think everyone knows. But what is his working principle? I will not answer this question from the front.
Let's take a look at this. Currently, Ajax compiled by JS + XML + DOM and other functions can truly achieve partial refresh.CodeBut scriptmanager can also achieve local refresh, which means it will eventually be converted into Ajax Code such as Js. Where can we verify this conjecture? Let's look at it.
1. The example of terreylee is referenced below. After a slight modification, the following code does not contain any Ajax control:
Code
Front-end code:
< Form ID = " Form1 " Runat = " Server " >
< Div >
< ASP: Calendar ID = " Calendar1 " Runat = " Server " > </ ASP: Calendar >
< ASP: dropdownlist ID = " Dropdownlist1 " Runat = " Server " Autopostback = " True "
Onselectedindexchanged = " Dropdownlist1_selectedindexchanged " >
< ASP: listitem Value = " 0 " > = Select ==</ ASP: listitem >
< ASP: listitem Value = " 1 " > Red </ ASP: listitem >
< ASP: listitem Value = " 2 " > Yellow </ ASP: listitem >
< ASP: listitem Value = " 3 " > Green </ ASP: listitem >
</ ASP: dropdownlist >
</ Div >
</ Form >
Background code:
Protected Void Dropdownlist1_selectedindexchanged ( Object Sender, eventargs E)
{
Calendar1.daystyle. backcolor = System. Drawing. color. fromname (dropdownlist1.selecteditem. Text );
}
Running result:
The status bar shows a refresh progress bar.
Check the source files returned by the server:
<! 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"> <Table id = "calendar1">... </table><Select name = "dropdownlist1" onchange = "javascript: setTimeout ('_ dopostback (\ 'dropdownlist1 \', \ ')', 0) "id =" dropdownlist1 "> <option selected =" selected "value =" 0 ">== select ==</option> <option value =" 1 "> Red </option> <option value = "2"> yellow </option> <option value = "3"> green </option> </SELECT> </Div> </form> </body>
The date control is converted to the table (green part), and the drop-down list is converted to the select tag (red part). Everything is converted to the HTML markup language that the browser can interpret.
2. The following is an example with the scriptmanager control.
<Form ID = "form1" runat = "server"> <div><Asp: scriptmanager id = "scriptmanager1" runat = "server"> </ASP: scriptmanager><Asp: Calendar id = "calendar1" runat = "server"> </ASP: Calendar> <asp: dropdownlist id = "dropdownlist1" runat = "server" autopostback = "true" onselectedindexchanged = "dropdownlist1_selectedindexchanged"> <asp: listitem value = "0" >== select ==</ASP: listitem> <asp: listitem value = "1"> Red </ASP: listitem> <asp: listitem value = "2"> yellow </ASP: listitem> <asp: listitem value = "3"> green </ASP: listitem> </ASP: dropdownlist> </div> </form>
There is nothing special, but a scriptmanager is added. Of course, the running result is not different from that of the first instance, because there is no component on the page that can be partially updated by scriptmanager.
let's take a look at the HTML code returned by the server
<! 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"> <Div> <input type = "hidden" name = "_ eventvalidation" id = "_ eventvalidation" value = "/wewmglgvacpat3b/samples + samples/samples + l8kasjti8gfasjt5 + activities = "/> </div> <Div><SCRIPT type = "text/JavaScript"> // <! [CDATA [SYS. webforms. pagerequestmanager. _ initialize ('scriptmanager1', document. getelementbyid ('form1'); sys. webforms. pagerequestmanager. getinstance (). _ updatecontrols ([], [], [], 90 );//]> </SCRIPT> <Select name = "dropdownlist1" onchange = "javascript: setTimeout ('_ dopostback (\ 'dropdownlist1 \', \ ')', 0) "id =" dropdownlist1 "> <option selected =" selected "value =" 0 ">== select ==</option> <option value =" 1 "> Red </option> <option value = "2"> yellow </option> <option value = "3"> green </option> </SELECT> </div> <SCRIPT type = "text/JavaScript"> // <! [CDATA [SYS. application. initialize (); //]> </SCRIPT> </Form> </body>
Compared with the first instance, some JS references and some JS Code are added. In particular, you must pay attention to the bold content. This is actually an important part of refresh. Now we should know why only scriptmanager cannot implement partial refresh, because in SYS. webforms. pagerequestmanager. getinstance (). _ updatecontrols ([], [], [], 90), there is no updatable control.
Maybe here, I still don't believe that adding these codes can achieve partial refresh. Let's continue to look down.
3. instances with the scriptmanager and updatepanel controls
<Form ID = "form1" runat = "server"> <div> <asp: scriptmanager id = "scriptmanager1" runat = "server"> </ASP: scriptmanager> <Asp: updatepanel id = "updatepanel1" runat = "server"> <contenttemplate> <Asp: Calendar id = "calendar1" runat = "server"> </ASP: Calendar> <asp: dropdownlist id = "dropdownlist1" runat = "server" autopostback = "true" onselectedindexchanged = "dropdownlist1_selectedindexchanged"> <asp: listitem value = "0" >== select ==</ASP: listitem> <asp: listitem value = "1"> Red </ASP: listitem> <asp: listitem value = "2"> yellow </ASP: listitem> <asp: listitem value = "3"> green </ASP: listitem> </ASP: dropdownlist></Contenttemplate> </ASP: updatepanel> </Div> </form>
This step does not actually do anything, but adds the updatepanel control.
Running result:
Note that the status bar is refreshing.
Check the HTML code returned by the server.
<! 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"> SYS. webforms. pagerequestmanager. getinstance (). _ updatecontrols (['tupdatepanel1'], [], [], 90 ); //]> </SCRIPT> <Div id = "updatepanel1"> <select name = "dropdownlist1" onchange = "javascript: setTimeout ('_ dopostback (\ 'dropdownlist1 \', \ ')', 0) "id =" dropdownlist1 "> <option selected =" selected "value =" 0 ">== select ==</option> <option value =" 1 "> Red </option> <option value = "2"> yellow </option> <option value = "3"> green </option> </SELECT> </div> </Div> <SCRIPT type = "text/JavaScript"> // <! [CDATA [SYS. application. initialize (); //]> </SCRIPT> </form> </body>
Compared with the source code of the second instance, we can see that the gap is in the red part, and the updatepanel1 control is refreshed in the scriptmanager part.
Through these three instances, we should be able to understand why scirptmanager can implement partial refresh. The key is to introduce the JS Code we see in the source code, these codes implement the scirptmanager control partial refresh function.
Can also refer to the http://www.cnblogs.com/pangxiaoliang/archive/2009/06/28/1512758.html to write is also very detailed, very good.
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
