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 ...

Using jQuery - Add row to table

During this days some people ask me about creating dynamic data entry ui . I try to explain it with a real Example step by step .

First Draw an HTML Table with two rows , header and a row with text boxes for data Entry .


Remember that last textbox in the second row must have a lastElement css class.
The simplest way for add a new row to a table is .append() method , but in this approach you should know the new row structure .Using .clone() method make it more easy and flexible. Now the only thing to do is getting the last row of table and call .clone() method on it.

The clone method gets an optional Boolean parameter to clone selected DOM elements with all event handlers or not .

OK , you got cloned element and now you should insert it at the end of the table using .insertAfter() method.



put this line of code to a function and call it on press enter on last text box of each row.
you should handle keypress event of last input that has lastElement class.



The condition "e.which == 13" checks if pressed key is Enter or not.
Test your code ... yes it works , but a little problem , if you enter some data in text boxes clone() method copy text boxes with their values and its not good . select the new added row (now is a last row in table) and select all inputs and clear their values .


Another point is focus must be set to first text box of new row , do it ...



I try to keep this post simple , but if you know how to do ajax save , you can add a method to save last row before add new row in UI .

and here is the completed code ...

Using jQuery - Hover Effect

One of jQuery facilities that makes coding fast and easy is the ability to assign a method for handling an event.I want to show how to implement Hover Effect for an object .

First lets Prepare required HTML , a table with some rows (like a menu) witch each row contain a column with specified css class.



For distinguishing two modes , normal and hover you can use two css classes .



Note that cursor:hand does not work in firefox .
Now I want to add and remove a css class to each cell by using addClass and removeClass methods of jQuery.
To make hover effect you should handle hover event of each cell. hover event gets two function as arguments , first one for onMouseOver and second one for onMouseOut .



Write codes above as a function in $(document).ready( ) for running on load of page .
lets put it all together .