Home > Developer > Web Develop
One, add in form form
<asp:scriptmanager id= "ScriptManager1" runat= "Server" >
</asp:scriptmanager >
<asp:updatepanel id= "UID" runat= "Server" >//control page Refresh
<ContentTemplate>
Form page
</ContentTemplate>
</asp:UpdatePanel>
Second, UpdatePanel and JS conflict
More and more friends now like to use jquery with ASP. Recently, many Indians in the forum complained that UpdatePanel and jquery are incompatible, many jquery effects are not work after the UpdatePanel update. This article solves this compatibility problem by analyzing the framework structure of both.
Problem Recurrence: 1. Add ScriptManager and UpdatePanel to the page
2. Adding element A in the UpdatePanel
3. Add x effect to element a with jquery
4. Add a button B to the UpdatePanel as the postback
Result: On the first page load, the x effect of element A is normal, after clicking B, the page is refreshed locally, and element a loses the X effect.
Analysis 1:updatepanel UpdatePanel is mainly used for local refresh in the application, avoiding the postback of the whole page.
The core of UpdatePanel implementation of local refresh is the Microsoftajaxwebform.js file, its local refresh process is to submit the page to the server (including viewstate), execute the service-side code asynchronously will be in the UpdatePanel HTML to re-render.
During this process, the rest of the page does not have a status change.
Analysis 2:jquery JQuery can add various attributes and event handles to HTML elements through simple code, where we can see the official documentation:
Tutorials:how jQuery Works Http://docs.jquery.com/How_jQuery_Works
Here, we can tell that jquery has an important event labeled "Ready", generally the effects of HTML elements and event handles are added through this ready event, as follows:
$ (document). Ready (function () {
$ ("P"). Text ("The DOM is now loaded and can be manipulated.");
});
The official note to this is that the ready event will run once after the DOM is fully loaded, OK, so far, the cause of the problem is almost clear:
Cause: Because element A is overridden in UpdatePanel after a local refresh, and the entire DOM tree is not reloaded, the ready event of jquery is not triggered, so element a loses its original effect.
Solution: We can extract the code executed in the Ready event, and then execute the jquery initialization code once each UpdatePanel local flush, by capturing the ScriptManager endrequest event, as follows:
<script type= "Text/javascript" >
function Load () {
Sys.WebForms.PageRequestManager.getInstance (). Add_endrequest (Endrequesthandler);
}
function Endrequesthandler () {
Control the JS of the form
} </script>
<body onload= "Load ()" >
PS: conflict problem turn from: http://www.cnblogs.com/songling/archive/2011/03/14/1984033.html
3, the background prompt box does not display the problem:
Change the method of the background display prompt to:
Scriptmanager.registerstartupscript (this. Page, this. GetType (), "JS", "alert (' Password wrong!") '); ", true);
Like Page.ClientScript.RegisterStartupScript (this. GetType (), "MyScript", "alert (' Password wrong!") '); ", true);
Response.Write ("<script language=javascript>alert ('" + "test" + "');</script>"); These two methods do not display a prompt after using UpdatePanel.
Asp. NET submission form does not refresh the page method (contains UpdatePanel and JS conflict resolution)
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
