Sohel’s Blog

June 12, 2008

An important issue while using Master page: ID changed of the Controls

Filed under: Asp.Net — sohel02 @ 3:52 pm
Tags: , ,

Master page is an excellent feature provided in Asp.Net version 2.0. It is a common practice to give the user same look and feel across your site. Master page is a very handy feature to accomplish this. I will discuss an issue that must be in your knowledge while designing your site.

Those who are familiar with Master Page know that it works like a container. It actually contains the content page. Add a Master page in your site and name it Site.master.  Change the ID of contentplaceholder to CPH . Now switch the VS 2005 to source view and  you will see the following code.

<%@ Master Language=”C#” AutoEventWireup=”true” CodeFile=”Site.master.cs” Inherits=”Site” %><!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” >
<head runat=”server”>
<title>Untitled Page</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:contentplaceholder id=”CPH” runat=”server”></asp:contentplaceholder>
</div>
</form>
</body>
</html>

Now add a new web page (Deafault.aspx) to your site and select Site.master as it’s master page. Put a textbox and a button. Change their IDs to txtName and btnTest respectively. Then add a Javascript function that will display your name entered in the Textbox when Show button is clicked.
Your code will look like as follows;

<%@ Page Language=”C#” MasterPageFile=”~/Site.master” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” Title=”Untitled Page” %>
<asp:Content ID=”Content1″ ContentPlaceHolderID=”CPH” Runat=”Server”>
<asp:TextBox ID=”txtName” runat=”server”></asp:TextBox>
<asp:Button ID=”btnShow” runat=”server” Text=”Show ” OnClientClick=”IDIssue();”/>

<script type=”text/javascript”>
function IDIssue()
{
var txt=document.getElementById(‘txtName’);
alert(‘your name is ‘+ txt.value);
}
</script>
</asp:Content>

Now, view the Deafault.aspx page in browser. Enter your name in the TextBox and click the Show button. Anything happened??

Nothing!!! Why???

If you see the source of the Textbox from the browser, you will see this,

<input name=”ctl00$CPH$txtName” type=”text” id=”ctl00_CPH_txtName” />

The id you given to the Textbox has been Changed. The reason is, at design time master page has no idea about the controls of the Content page as it works like a container. It can have its own control also. In order to avoid the duplication of the IDs between the Master page and Content Page, the master page generates IDs using this format “Controlhierarchy_ContentPlaceHolderID_ControlID”. Hence, your JavaScript fails to find the Element that has the ID “txtName”.

How will you solve it??? The primary idea that can come in your mind; let see the source in the browser, take the ID and paste it in the JavaScript. This is not ideal. If the hierarchy of the Page’s Controls are changed then it will fail again. The best way to resolve this issue is register your script from server side code. You should put the following code segment in Page_Load event of Deafault.aspx.cs file.

ContentPlaceHolder cp = ContentPlaceHolder)Page.Master.FindControl(“CPH”);
TextBox tb = (TextBox)cp.FindControl(“txtName”);
ClientScript.RegisterClientScriptBlock(this.GetType(), “IDIssue”, string.Format(@”function IDIssue() {{ var txt=document.getElementById(‘{0}’); alert(‘your name is ‘+ txt.value); }}”, tb.ClientID), true);

Now, everything will go fine…………….

9 Comments »

  1. What you have eexplained helps me lot.. Thanks.. If i want to validate more than one control then what should i do?.. Reply soon.. Thanks.

    Comment by Anand — August 22, 2008 @ 1:17 am | Reply

  2. how do we confirm message box in asp.net webfrom with master pages using c#

    Comment by Geo — August 26, 2008 @ 4:37 pm | Reply

  3. Hi Sohel,
    I tried your approach of finding a content page’s control. But it is not working. Hope you don’t mind posting another complex example.

    Comment by Vivek Vashisht — August 29, 2008 @ 4:21 pm | Reply

  4. Well. I was too busy in the last month, that I could not visit my blog !!! Soon I will post some new articles. Hope they will be useful for you. Thanks.

    Comment by sohel02 — September 18, 2008 @ 1:05 am | Reply

  5. How can you pass form object to any javascript function while using master page. when the javascript opens another window which can return particular result to opener window’s control

    thanks in advance
    —————–

    Comment by syam — September 18, 2008 @ 12:23 pm | Reply

  6. Thank you much!

    Comment by John — November 12, 2008 @ 8:30 am | Reply

  7. Hi sohel,I tried the above code but its not working please can you give another example.and please take more than one textboxes.

    thanking you.

    Comment by Syed — November 14, 2008 @ 6:34 pm | Reply

  8. Syed, Please tell me about the problem you facing while implementing the above code. I will post a similar example with two textboxes soon.

    Comment by sohel02 — November 17, 2008 @ 10:51 am | Reply

  9. Thanks a lot for this article. It helps me a lot.

    Comment by oliblues — February 16, 2009 @ 12:16 am | Reply


RSS feed for comments on this post. TrackBack URI

Leave a comment

Blog at WordPress.com.