Sunday, August 15, 2010

ClientID Mode in ASP.NET 4.0 AND JAVASCRIPT OR JQUERY

Introduction

Hello Guys, I am writing my experience about creating new website and simple functionality about call multiple JavaScript function on same event I am already publish in my previous article. ASP.NET 4.0 new properties ClientIDMode, which can be used to force controls to generate clean Client IDs that don’t follow ASP. Net’s Naming Container ID conventions. Now it is possible to set ClientIDMode Property so developer can set control name in better way but this one create a problem for new developer which are new and switch to asp.net 4.0

Technologies

ASP.NET 4.0, JQuery, JavaScript

Language

C#

Prerequisite

Visual web developer 2010 Express

Implementation

Open visual studio 2010 project and Create new website

we are use JavaScript function for client side validation minimal, use of post back of page or asynchronous post back.

I am creating one JavaScript function like GetTextValue which are use get value from Textbox

I am trying to get value using jquery$(“#textboxname”) and getting null object with master page.

I found something happen due to clientIDMode in asp.net 4.0 let me explain in detail.

If you place the any control inside the content placeholder of a master page, its id will be generated as ctl00$MainContent$txtboxname.

Ctl00 : Random ID generate for Every Master Page You nest like ctl00,ctl01..
MainContent: It Represent ID of master page here is Main Content
Txtboxname: This is the actual ID of Control

you can see depending on master page ID control ID is change if it is nested master page ID is also change. is we change to nested master page case JavaScript return null element so because ID is change that case you have to changes in all place where you write ID to get Element. It is very tedious job.

We can get texbox object using following two way

var txtBoxName = document.getElementById("ctl00$MainContent$txtboxname ");
or
var txtBoxName = document.getElementById("<%=txtboxname.ClientID>");
using jquery
var txtBoxName=$(‘#txtBoxName’)
If we go for first way then it may be issue like nested master page id is change that case second declaration is better.

Second declaration is like mix-up with client side block and server side block and it would be avoided.

In both limitation resolve here in ClientIDMode Property in asp.net 4.0

Asp.net 4.0 new clientIDMode page attribute have following four value we can set.

AutoID

AutoId places one Unique Sequence page id AutoId places one Unique Sequence page id of the controls using ctl00, ctl01 .. .This is the existing behavior in ASP.NET 1.x-3.x where full naming container .it is Default clientIDMode.

Static

This option forces the control’s ClientID to use its ID value directly. No naming container naming at all is applied and you end up with clean client ids:

This option is what most of us want to use, but you have to be clear on that this can potentially cause conflicts with other control on the page. If there are several instances of the same naming container so client ID naming conflict, It’s basically up to you to decide whether this is a problem or not.

Predictable

The key that makes this value a bit confusing is that it relies on the parent NamingContainer’s ClientID to build it’s own client ID value.
For our simple textbox example, if the ClientIDMode property of the parent naming container (Page in this case) is set to “Predictable” you’ll get this:

The most common use however for Predictable will be for DataBound controls, which results in a each data bound item to get a unique ClientID.

Inherit

The final setting is Inherit which is the default for all controls except Page. This means that controls by default inherit the naming container’s ClientIDMode setting. Inherit is slightly different than the AutoId..
AutoId places one Unique Sequence page id of the controls using ctl00, ctl01 .. In case of Inherit mode, it only places the inherited control id for each controls.

within the masterpage, it will give you “MainContent_ txtboxName”. So the only difference between inherit mode and AutoId is that AutoId places the unique PageId like ctl00,ctl01while Inherits doesn’t..

Conclusion

using this article I am trying to ClientIDmode Property which are new features in asp.net 4.0. How all asp.net developer handle the clientIDs batter way using clientIDmode Property.
I hope this would help you
Thank you for Reading

Kirti M Darji