Home > 2010 Winter BTI420 > Enabling JavaScript components to work with ASP.NET Web Forms master pages and user controls

Enabling JavaScript components to work with ASP.NET Web Forms master pages and user controls


The CKEditor and SyntaxHighlighter components work as presented in web forms that do not use master pages or user controls. Here, you will learn how to enable them for use in these situations.

.

Control ID naming information

When an ASP.NET web server control, or an HTML control with runat=”server”, is placed on a web form (page) that does not use a master page, its rendered “id” attribute value matches the ID property name.

However, when it is placed on a content page in a master page scenario, or in a user control, the rendered “id” attribute value gets a prefix that designates its place/location in the control hierarchy. (If the control has a “name” attribute, its value also gets a prefix.)

You can see the prefixes if you run the example page in a browser, and view the source code.

For example, when our editor instance, “editor1”, is placed on a content page that has a master page, its attributes get “ctl00” and “ContentPlaceHolder1″ prefixes:

<textarea name=”ctl00$ContentPlaceHolder1$editor1″ id=”ctl00_ContentPlaceHolder1_editor1″ cols=”10″ rows=”10”>

The “ctl00” prefix represents the master page.

The “ContentPlaceHolder1” prefix represents the content place holder (in which the content page’s content is rendered).

The dollar sign ( $ ) separator is used in the “name” attribute (known in ASP.NET as the “UniqueID”).

The underscore character ( _ ) separator is used in the “id” attribute (known in ASP.NET as the “ClientID”).

Therefore, in your C# code, if you want the ClientID of the “editor1” control, you can use this property:

editor1.ClientID

And, in your C# code, if you want the UniqueID of the “editor1” control, you can use this property:

editor1.UniqueID

.

Changes for CKEditor

Loading the content: The original line of code was on line 15. The new one is on line 18.

Saving the content: The original line of code was on line 49. The new one is on line 52.

.

Changes for SyntaxHighlighter

None are required, because the SyntaxHighlighter.all() method targets all “pre” elements on the page, regardless of their name.

.


Advertisements
Categories: 2010 Winter BTI420
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: