You have decided that in your ASP.NET page the ScriptManager and an Update panel is going to work just fine, but you want to add a little something special to this page, and you know jQuery could make this happen a lot easier. Here are some things that I have used to make this easier for me, and I hope it can help you.
Tip 1 - Using ScriptManager
Use ScriptManager to load your third party JavaScript libraries. This may sound funny but you also need to notify the ScriptManager it is finished loading. Ok, it may not work exactly this way, but a call to notifyScriptLoaded is the only reliable way to provide notification in all browser types that the script has finished loading. If you are a person who is wiring up your JavaScript events, not making it a part of your HTML, and need this to happen in the document load or document ready event this important. Here is an example of this:
1: <asp:ScriptManager ID=“smMain“ runat="server" AsyncPostBackError=“apBackError">
2: <Scripts>
3: <asp:ScriptReference Path="~/JavaScript/jQuery.js" NotifyScriptLoaded="true" />
4: </Scripts>
5: </asp:ScriptManager>
Tip 2 - Using ScriptManagerProxy
If you have decided to put ScriptManager in a MasterPage and you have ASP.NET pages needing to load external JavaScript files use ScriptManagerProxy. This makes sure these external files are loaded after the library it may require is loaded in the MasterPage. Here is an example of this:
1: <asp:ScriptManagerProxy ID="smpMain" runat="serer">
2: <Scripts>
3: <asp:ScriptReference Path="~/JavaScript/customer.js" notifyScriptLoaded="true" />
4: </Scripts>
5: </asp:ScriptManagerProxy>
Tip 3 - Use some cool AJAX.NET events
To get access to some really useful AJAX.NET tools on the client-side using jQuery use Sys.WebForms.PageRequestManager.getInstance. This manages partial-page updates of server UpdatePanel controls in the browser. In addition, it defines properties, events, and methods that can be used to customize a Web page by using client-side script. Here is a list of these events:
- initializeRequest
- beginRequest
- pageLoading
- pageLoaded
- endRequest
Here is a sample of some JavaScript code on the client-side using the PageRequestManager:
1: Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
2: Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
3:
4: function BeginRequestHandler(sender, args) {
5: var elem = args.get_postBackElement();
6: $(elem).hide();
7: }
8:
9: function EndRequestHandler(sender, args) {
10: $('div#mainSection a').each(function(i) {
11: $(this).css({'color', '#c0c0c0', 'font-size', '14px'});
12: }
13: }
Tip 4 - Dealing with the ClientID
If you are using an external JavaScript file with ASP.NET you always have the ClientID adventure. Here is yet another approach to dealing with this. This approach is to control the ClientID name. For example name the ID of your MasterPage by doing the following:
1: protected void Page_Init(object sender, EventArgs e) {
2: ((MasterPage)sender).ID = "MainMaster“;
3: }
Here is a way you can use the GridView RowCreated event to name the edited row in a GridView:
1: protected void grvMain_RowCreated(object sender, GridViewRowEventArgs e) {
2: GridView gv = (GridView)sender;
3:
4: if(e.Row.RowIndex == gv.EditIndex) {
5: ((GridViewRow)e.Row).ID = “EditRow”;
6: }
7: }
Here is an example of jQuery getting an element using this ClientID. What this is made up of is the MasterPage ID you named, the ContentPlaceholder ID, the GridView ID, the GridView edited row ID you named, and the ID of the text box you want to get to.
1: var el = $('#MainMaster_cphMain_grvMain_EditRow_txtFirstName')