Monday, May 11, 2009

ASP.NET User Controls and jQuery

If you like programing pure in client side to render every thing your self for more control , you should integrate your client side scripts with server side technology.
Some times what your server side code outputs restrict your client side scripting , user controls is one of this examples .


The problem is finding objects in each user control . if you use server controls like asp:textbox , asp.net change object id to keep it unique in host page (maybe use multiple instances of a user control in one page or host page have another object has same id ) . The problem is finding objects in client side .
Common solution is Injecting htmlControl.clientID from server side code into rendered html for accessing in client side . because clientID attribute gives you unique id that asp.net generated in host page . but its not a good idea and nobody like use that because it restricts your scripting.

Another solution is using css class instead of id.
but here is a problem ... css classes is unique in user control area but not unique in host page with multiple user control instances . I have a trick for you ...

First you should make user control boundary identifiable .

I use a div with class named controlContainer for my user control boundary.
Know but all of your objects inside this container . ok lets talk about finding each object of user control inside of user control boundary and do jobs with a unique object in a host page with multiple user control instances . for finding an object uniquely I should find user control boundary and search for object with specified css class inside this boundary .

using .parents('.controlContainer') to find user control boundary from inside , and using .find('.Text1') for reference to object with css class value of '.Text' .

lets have an example :
In this Example we develop an ASP.NET user control with a div and a button , when user click the button , div toggle hide and show .
First Create user control html ...


Lets see the Code behind ...
javascripts cannot write inside a user control and you should use Page.ClientScript.RegisterStartupScript to register client scripts on user control html output . ok make a draft of necessary script for showHide method . this method calls button click .
function showHide(obj){
var x=$(obj).parents('.controlContainer');
$(x).find('.Text1').toggle('slow');
}

Concat this script lines using stringBuilder class in .net and register it as I explained in page load event handler.

VB :
CS :

For Run and test , add more than one instance of this user control to an ASP.NET page and run .
the result show you despite having several objects on page with css class Text1 , a button on each user control hide and show just div inside same user control . yes , and now you can easy write your client side script on user controls without worry about unique id's that generates by ASP.NET .

Happy scripting ...

16 comments:

  1. thanks a lot man, I'll deep it and I'll publish

    ReplyDelete
  2. almost same implementation of the code here. please have a look. this may help to reduce code.

    ReplyDelete
  3. sorry forgot the path

    http://aspnetnova.blogspot.com/2009/08/usercontrol-javascript-problems.html

    ReplyDelete
  4. this I believe is overcome in .NET 4.0 by static id http://weblogs.asp.net/scottgu/archive/2010/03/30/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-4-0-series.aspx

    ReplyDelete
  5. you can use $("[id*=IdName]") to get access to server control with ID="IdName"

    ReplyDelete
  6. i want to set the hyperlink to word in a paragraph which is mach in the table. so how to i do that, please do the needful

    ReplyDelete
  7. Hi,On line there are many tutorials that assist you to design a good web page from scratch but the choice is very hard for Web Design Cochin, as a matter of fact you probably don't even need one of those, instead all you need is a good sense of design and an easy to use HTML editor in the likes of Dream Weaver and someone to guide you through the basics.Thanks....

    ReplyDelete