ScottGu's Blog

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

he has clearly shown that masterpages are just a controls inside the page, and i also got to know the event handling. thanks. does he have rss on his page ?

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

I completely and thourgh;y hate the Name Mangling when using master pages. It makes it damn near impossible... or highly impractical to create sanely named CSS outside of using themes.

This becomes twice as bad when you have developers who do the code, and designers who do the CSS, and you have a predefined Id naming conventions. The Id the designers see in the .aspx source isn't what you get in the output, obviously makeing CSS mistmatch the expectations.

It's why we're not using master pages at all.

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

Hi Chris,

The naming for server-control IDs is hierarchical -- but consistent. So it is possible to-do ID based CSS styling if you want (the IDs won't change on you as you are building your pages).

What I typically recommend, though, is to do class based CSS styling instead. That allows your CSS styles to be re-used across pages/elements more easily.

Alternatively, you can also just use static html container elements with IDs to style things. For example:

<div id="myelement">
// some stuff here...
</div>

Hope this helps,

Scott

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

Great Links Scott. Thanks. I've practically learned ASP.NET using all these blogs and links provided by You.

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

Scott,
I have a master page with a menu control for a user to navigate within my application.

The master page is in application root; I have a couple of sub-applications under the root application. I configured them to share the same master page. I found the urls on the menu are broken for the pages in the sub-applications. So I have to create one master page for each sub-application, only difference between them is the relative path to a page on the menu. Is there a easy way or wrok around to share one master page across applications?


Thank you
Hua

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

Hi Hua,

One approach would be to absolutely qualify the paths. For example: / for root urls and things like /images and /stylsheets for directories immediately underneath it. This would then work regardless of which app was used.

Hope this helps,

Scott

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

he has highlightede the common problems developers face with master pages, and provide tips and tricks to use master pages.thanks.It was very helpful to know those concepts.

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

I'm also having big problems with using master pages due to name mangling.  I simply don't want ASP.NET to change the name/ID attributes of my form elements.  I use the IDs in CSS, javascripts and label elements.  It's a really ugly solution to have to change these everywhere.  And as for switching to class based CSS styling, I really don't think that a MS tool should be dictating what CSS developers use.  Is there a way to switch the name mangling off?  Maybe a page directive or a method I can override somewhere.

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

I was having an issue with name mangling with JavaScript.  The application I work on extensively uses custom JavaScript for AJAX functionality.  I was very excited about implementing master pages when we moved to 2.0, until I discovered they broke ALL of our JavaScript!  We use getElementById() to access dynamic page controls, and their nice clean name suddenly became a mile long disaster.  Not wanting to couple the JavaScript too tightly to the master pages, I developed a solution where the master page finds all the controls on the page that implements it and generates predictable JavaScript variables for each control which store the actual client ID of the control.  For example, a control named "ddlFilter" on the page would be warped into "_ctl0_phContent_ddlFilter" by the master page. However, the master page will generated the variable "ddFilterClientId" which stores "_ctl0_phContent_ddlFilter", and can then be used via JavaScript to access the control.

It's not a perfect solution, as it doesn't do anything for CSS or label tags (or app has to be 508 compliant).

Here's the code which is just placed into the Page_Load function of the master pages:

<code>

ContentPlaceHolder phContent =
(ContentPlaceHolder)Page.Master.FindControl("phContent");

StringBuilder oScript = new StringBuilder();
foreach (Control ctrl in phContent.Controls)
{
  string sClientId = ctrl.ClientID;
  string sOriginalId = ctrl.ID;
  oScript.Append("var ");
  oScript.Append(sOriginalId);
  oScript.Append("ClientId='");
  oScript.Append(sClientId);
  oScript.Append("';");
}
         Page.ClientScript.RegisterStartupScript(this.GetType(), "ctrl_ids", oScript.ToString(),true);

</code>

I hope this helps someone else having a problem with name mangling.

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

Hi
I even got a problem with my menu control in my master page. the menu control works fine during first load, but when the page postbacks the menu hover doesnt work fine. The menu expands but doesnot close till the page postbacks once again. Is there any solution for this.

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

I spent a while looking for a good way to access a server control from javascript and finally found this:
document.getElementById('<%= myControlID.ClientID %>')

It may not be optimal but it is probably the easiest way to get the client id of a control.

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

Another issue I'm having with name mangling is that id attributes starting with an underscore are being flagged as errors when I run my HTML through the w3c HTML validator.

I think I'm going to have to give up on master pages.  they don't quite seem fully baked yet.

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

I am getting the same underscore in the generated code for the ID.  Any idea what is causing it?

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

http://weblogs.asp.net/scottgu/archive/2006/04/18/Great-New-Advanced-Article-on-ASP.NET-2.0-Master-Pages.aspx?Ajax_CallBack=true

I've posted slightly fuller details here

http://forums.asp.net/thread/1330487.aspx

but in a nutshell I'm finding that the leading underscore in the ClientId is causing problems with either the JS, HTML or CSS emitted by the System.Web.UI.WebControls.Menu control.

The Master Page would obviously be a fairly common place to put a menu so this seems quite an important limitation with the 2 as far as I can see?

# Recipe: Dynamic Site Layout and Style Personalization with ASP.NET

Problem: You want to enable end-users visiting your web-site to dynamically personalize the look and

# ASP.NET 2.0 Tips, Tricks, Recipes and Gotchas

This page lists some of the more popular &amp;ldquo;ASP.NET 2.0 Tips, Tricks, Recipes and Gotchas&amp;rdquo;

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

Hi Scott, I have a master page, and in this page is a with background image attribute. This background is supposed to change for every child page. How do I assign the image names for each pages under a single master page. Thanks a lot!!

# Sharing Master pages

Scott, I'm looking for a solution similar to Duane's. I have an "Web Site" as my main where my master pages containing user controls and public properties. I can make any changes to the Masterpage from a page using it as long as it's within the Website. I have a number "ASP.Net Web Application" projects in the same solution that uses the masterpages of the main site. But I can't change anything on the masterpage because the public properties can't be seen. Any suggestions?

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

I had the same problem and I tried the following syntax and it works fine: document.getElementById('<%= myControlID.ClientID %>')

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

Hi Scott, I'm developing a website with a masterpage and a login.aspx as the startup content page. However, when i try to run the project, the image on the master page is not displayed. When login is successful and control is transferred to the default.aspx, the image on the masterpage is displayed. Incidentally, if i change the "authentication=windows" instead of "forms" in web.config the image is displayed when i ran the project. How can I properly display images in the master page without changing the "authentication=forms" in web.config? Hope you can help me. Thanks. Ricky

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

Hi Scott, Thanks very much for the help, i've been trying for days to figure that out!!! My problem with the login.aspx is solved. I have one more problem though with regards to some aspx files. The masterpage background image is not displayed when i transfer control to another page that resides on different folder although i'm logged in successfully. I already tried changing the image path but to no avail. Hope again you can help me on this. Thanks and regards Ricky Hi Ricky, I believe you are running into this issue because you are using the built-in VS 2005 Web Server: http://weblogs.asp.net/scottgu/archive/2006/01/31/437027.aspx The above article describes how to fix it. :-) Hope this helps, Scott

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

Hi, I am using a custom control dervied from compositecontrol class. I have a button in this control which fires an event. When I use this custom control in a normal aspx page it works fine, but in master page the event is not getting fired. Could you help?

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

Thanks Eric Eubank for presenting your fix to handle name mangling. Master pages are nice but we got to have a builtin way that is cleint side javascript friendly. Till then (and I am not holding my breath for MS to solve this), this will work nicely.

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

Hi Scott, I have acase as follows: Default.aspx defines its master page as SubMaster.master, which defines its master as SiteMaster.master. SiteMseter.master contains an image control with id img01, SubMaster.master contains another image control with id img02. In Default.aspx.cs's Page_Load, I need to set the image URL for img02 (the submaster image). Master.FindControl("img02") returns null, whereas Master.Master.FindControl("img01") does return the proper control. i.e.I can access controls in the main master but not in the sub-master page. Where did I go wrong? Thanks...

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

Ok, I have a curveball for the ClientID workaround. My onscript elements are being created dynamically in the codebehind file. So, when I use the following: btn1.Attributes["onclick"] = "openCal(document.getElementById('" + textDOB.ClientID + "')); return false;"; The onclick renders as: onclick="openCal(document.getElementById('m_txt1926DOB')); return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$contentMAIN$m_button1926DOB", "", true, "", "", false, false))" Any suggestions?

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

Ok, I modified Eric Eubank's code above and found something that worked a little better for my needs.  I hope it helps:

System.Text.StringBuilder strControls = new System.Text.StringBuilder();

   protected void Page_Load(object sender, EventArgs e)

   {

     controlWalker(this.Page);

     Page.ClientScript.RegisterStartupScript(this.GetType(), "ctrl_ids", strControls.ToString(), true);      

   }

   private void controlWalker(Control ctrl)

   {

     if (ctrl.HasControls())

     {

       foreach (Control ctrl2 in ctrl.Controls)

       {

         controlWalker(ctrl2);

       }

     }

     else

     {

       string sClientId = ctrl.ClientID;

       string sOriginalId = ctrl.ID;

       strControls.Append("var ");

       strControls.Append(sOriginalId);

       strControls.Append("=document.getElementById('");

       strControls.Append(sClientId);

       strControls.Append("');");

     }

   }

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

First of all, thanks a lot for the great info Scott. Secondly, is Microsoft (henceforth MS) working on giving us a better way of handling the JavaScript and CSS issue with the next release of ASP.NET? The idea behind MasterPages is great its just not practicle enaugh to convince the majority to risk their custom JavaScript and CSS integrity; perheps a way to bridge the client side it with control's actual ID in some fashion or form that when a JavaScript calls a control A, A points to ctl100_A for the correct reference. Any updates as to if MS is working on this issue at all? Thanks in advance.

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

Hi Scott I have recently introduced a Master page to my site which i have been looking forward to for ages. It uses a CSS div layout. The content pages that I am migrating use the RegisterStartupScript to register a block of Javascript that is used in the page. What I am finding is that the script is actually the last thing to be written to the rendered page. As div's apparently mean that the browser can start drawing them before the whole page is loaded (despite buffer=true??????) I am getting errors now where the javascript functions are called before they are written to the page. A typical example of this is where I have written a function to apply some kind of mouseover. The errors are picked up in the IDE (which is nice) - and show that the page is not complete. If I don't wazz around with the mouse and keep monk-like still until the page is loaded everything is hunky dory (because the script block is now there). I never used to have this problem before master pages - is this because I am now using div's with their weird "loading before page is complete despite me thinking i am using a response buffer" behaviour or is something different happening with master pages about when exactly in the rendering of the page it decides to inject my javascript block?? I had the same problem with Microsoft's own controls javascript - the treeview control was freaking out about doing a mouseover before all the nodedata/page was loaded... eventually I made the div holding the navigation tree display:none and made it display:block once the page had loaded. This error happened all the time as your mouse was over the control when the new page was drawn. I am thinking of using this technique now for the content div - however my problems would be solved in a less clunky way if I could get ASP.NET to emit my javascript block earlier in the page render. Any ideas?

# Moving from design to reality - building HedKandi.com in Microsoft Office SharePoint Server 2007

As mentioned in my blog entry from a few weeks ago, cScape Ltd, a Microsoft Gold Partner, recently launched...

# Building HedKandi.com

Lawrence Liu (Community Lead, Sharepoint Products and Technologies) asked me to write a guest blog...

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

I have a masterpage that I am working on with multiple menus and I want to be able to find the ID at runtime, so I can perform some other action, when that particular menu is in use. Server side how do I get a list of the menu id's at runtime in C# ? Is there some foreach construct and collection I can enumerate within a masterpage class to obtain all the menu id's ? Thanks in advance.

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

"Note that ID values are deterministic - so you will get consistent controlID names at runtime." Very true. But, isn't that deterministic name based on control depth and order? The minute those change, the ids are changed, and your CSS is hosed. And from a practical standpoint, deterministic still doesn't mean 'sensical for a designer not involved in the programming the project'... As far as always using classes...that isn't always possible either. Sometimes you need to work around CSS specificity issues where thing need to be applied to a moer specific #id rather than .class. I'll always be the official bad guy broken record that proclaims master pages and control id futzing bad for separation of code from content.

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

I am passing the following script to a calendar popup. My intention is to set the selected text to a textbox on a content page. The script changes the bgcolor but it doesn't set the date and also calendar form doesn't close. ""

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

Hi: The code provided by Eric Eubank and Forrest looks very useful. I have to admit that understand of Forrest's version much better than I understand Eric's. My main difficulty with Eric's is that I don't understand where to use it. In the case of layered Master Pages, where should this code be placed? In the following snippet: (ContentPlaceHolder)Page.Master.FindControl("phContent"); I'm assuming that the argument "phContent" is the id of the ContentPlaceHolder in the Master page that contains control in which you are interested. Is that correct. As for Forrest's version, I applied it in the content page. To help me understand it, I modified the string to add "
" and then wrote the result to the page so I could see the results. (I haven't been successful using this technique with Eric's code, but that may be the result of my misusing it.) It did what I thought it would do, but my question is how to apply this? By running this, are they set as Javascript global variables so that I can access them whenever I need to in whichever function references them? I'm trying to work out simple test cases, but so far I haven't been successful. My application, right now, is primarily for custom form validation comparing an email address with a confirm email address value while using master pages. the text box controls are on the content page. Obviously, name mangling makes this a cumbersome task at best. hardcoding the mangled names results in what I want, but obviously that is not what I want to to. A couple of other questions: Is there an advantage to doing this for ALL controls in a page, or should I modify this to get the individual control or controls in which I am interested? I can see it both ways. Why walk the entire structure multiple times when you can do it once. Or is it better to simply get what you need when you need it and not keep a bunch of essentially unneeded information around? Thanks for the contribution to this thread. It has given me something to think about. John

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

Hi: I now have Forrest's idea incorporated into my app and it works great. The trick now is to insert the related javascript functions into the head section of the document without embedding them into the master page. I'll try using the contentplaceholder method in the head of the master page. I'm sure it will work. I'm still interested in the questions I posed in the previous post. Thanks, John

# Moving from design to reality - building HedKandi.com in Microsoft Office SharePoint Server 2007

As mentioned in my blog entry from a few weeks ago, cScape Ltd , a Microsoft Gold Partner, recently launched

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

I have a calendar popup used at many a places in in my application. when i popup the calendar from a webpage which is inherited from masterpage it wont populate the textbox with date back.... can anyone help me out... same code works for a webpage which is not inherited from masterpage.

# re: Great New Advanced Article on ASP.NET 2.0 Master Pages

I use a technique similar to Forrrest's.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

       If Not Page.IsPostBack Then

           Dim script As String

           Dim paths() As String = {Page.MapPath("~/javascript/my.js")}

           Dim content As ContentPlaceHolder = DirectCast(Page.Form.FindControl("ContentPlaceHolder1"), ContentPlaceHolder)

           script = GetValidJavaScript(content.Controls, paths, False)

           ScriptManager.RegisterStartupScript(Me.Page, Me.GetType(), "MyKey", script, True)

       End If

   End Sub

' Loops through a control collection using recursion.

   ' Returns the javascript file with correct client control ids.

   ' To use this function, use the server side control ids in the javascript file.

   ' i.e. document.getElementById('serverControlId') or $('serverControlId')

   Public Function GetValidJavaScript(ByVal _parent As Object, ByVal paths() As String, Optional ByVal optimize As Boolean = True) As String

       Dim sb As StringBuilder = New StringBuilder()

       Dim tr As TextReader

       Dim idx As Integer = 0

       Try

           For idx = 0 To paths.GetUpperBound(0)

               tr = New StreamReader(paths(idx))

               If Not sb Is Nothing Then

                   sb.Append(tr.ReadToEnd())

               Else

                   sb.Append(Environment.NewLine + tr.ReadToEnd())

               End If

               tr.Close()

           Next

           IterateThroughControls(_parent, sb, optimize)

       Catch ex As Exception

           Return ex.ToString() + Environment.NewLine + ex.InnerException.ToString()

       End Try

       Return sb.ToString()

   End Function

   Private Function IterateThroughControls(ByVal _myParent As ControlCollection, ByVal sb As StringBuilder, ByVal optimize As Boolean) As String

       Dim ctrl As Control

       Try

           For Each ctrl In _myParent

               If Not String.IsNullOrEmpty(ctrl.ID) And Not String.IsNullOrEmpty(ctrl.ClientID) Then

                   sb.Replace("'" + ctrl.ID + "'", "'" + ctrl.ClientID + "'")

                   If ctrl.Controls.Count > 0 Then

                       IterateThroughControls(ctrl.Controls, sb, optimize)

                   End If

               End If

           Next

       Catch ex As Exception

           Return "Recursion Error: " + ex.ToString() + Environment.NewLine + ex.InnerException.ToString()

       End Try

'        If optimize Then

'            Dim strResult As String

' = OptimizeScript(sb.ToString())

'            Return strResult

'        End If

       Return sb.ToString()

   End Function

# master pages

You've been kicked (a good thing) - Trackback from DotNetKicks.com