ASP. NET restore controls inside user controls within a page ClientID

It is well known in ASP. If a page has a user control (or master page) added to it, the controls within the user control The ClientID will be automatically added to the ClientID of the user control in the page

The control within the control in the page clientid= the user control ID number + "_" + the ID number of the user control's internal controls
It's too much to say, just take a look at the example.A head.ascx user control ID number is added to an ASP. NET page index.aspx "Head1"there is a Input#hid_name control in the Head.ascx controlthen the ID of the index.aspx final generated input is "Head1_hid_name"Why should MS be designed like this? The primary is that all controls in ASP. NET have a unique ID number (includingClientID), the. NET can use this ID number to perform post-postback processing when the page is postbackIf a page contains multiple user controls, it is possible that the ID number in a user control is unique, but when merged into a single page, it is possible to cause duplicate ID numbers to appeartherefore, ASP. NET will add the ID of the user control before the ID in each user control, so that no duplicate ID number will appear on a page (a page with duplicate ID number is compiled) Solution:for some reason we may need to use the control ID in a real user controlsuch as the JS event already written, CSS style, etc.so we need to restore the original control ID number, there are the following scenarios1. Modify the current JS files and CSS files using class to handle, but this way is too unreliable2. Write a JS file to replace the ID number generated by ASP. With the user control ID number, which can be referenced in each page usedIf there is a postback requirement, you can restore the ASP. ClientID number generated before postback so that it does not affect the postback processing of ASP.

//HTL Add 2014-12-25//ID number of the user control in the pagevar_id = ' details1_ ';//Replace the user control ID in the control ID in the user control with theJQuery ("[id*=" + _id + "]"). each (function($) {    $( This). attr ("id", $ ( This). attr ("id"). Replace (_id, "")); //Add custom properties to restore the ASP. NET generated ID number before postback$( This). attr (' UserControl ', ');});//Recover ASP. NET generated ID number before postbackJQuery ("form"). Submit (function() {JQuery ("[UserControl]"). each (function() {        $( This). attr ("id", _id + $ ( This). attr ("id")); });});

3. Replacing by code in an ASP., this way will result in a postback when the corresponding control ID cannot be found and the actual control cannot be found affecting the business process

/// <summary>///HTL Add 2014-12-25///Restore the ClientID number of a control in a user control///The reason is that when you invoke a user control in a page, the ClientID of the control in the user control is automatically added to the user control ID/// </summary>/// <param name= "writer" ></param>Protectedoverridevoidrender (HtmlTextWriter writer) {System.IO.StringWriter SW=NewSystem.IO.StringWriter (); Base. Render (Newhtmltextwriter (SW));//gets the HTML for the normal output, including the __viewstate//filter out the ClientID number of the control the ClientID of the control inside the user control//Note filtering out causes the real control to not be found at postbackWriter. WriteLine (Web.PageHelp.RegexStr (@details1. ClientID +"_", SW. ToString ()). Trim ());}

Reference: MSDN Control.clientid properties from for notes (Wiz)

ASP. NET restore controls inside user controls within a page ClientID