123 web

ASP.NET User Controls and jQuery

2009-05-11T20:42:00.000-07:00

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

2009-05-04T00:34:00.000-07:00

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

2009-05-01T22:16:00.000-07:00

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 .

Using jQuery - Attributes 1

2009-04-23T01:01:00.000-07:00

As I said before , selectors makes jquery powerful . In this post I want to write about attribute selector.
Its very easy ... here is a sample :

$("a[href='http://www.google.com']").
In this example $("a") select each link on the page , and [href='http://www.google.com'] restrict the selector to 'a' tags with href attribute equals to 'http://www.google.com' .

example :
I have a list of some files like below

If you want to show this list with appropriate icon for each type of file , you must add an img tag before each link . jquery has .before() and .after() method for insert content after and before selected tag(s) by selector.

Ok . Now I want to select each link in the page with href attribute ends with '.pdf' and insert an img tag befor using .before() method.

dont worry about $(document).ready . Its assign a function to onload event of document .

and now lets finish it ...

HTML result :

Using jQuery - Hide and Show Div

2009-04-20T01:19:00.000-07:00

Write Less Do More .

In this post I'll show you how can hide and show a div using jquery.
First you should able to select your Div by jquery selectors.In this example I use the ID Selector .
Then Call .show() method to set display property of div from none to block , and .hide() to reverse it.

There is another way for this job , by using .toggle() method your hidden div appears by first click and disappears by second click . you can use an optional parameter(speed) by .toggle() method for animate your job . acceptable values for this parameter are "slow" , "fast" or a numeric value in millisecond . note that this optional parameter available for .show() and .hide() methods .

Google Solar Panel Project

2009-04-15T21:07:00.000-07:00

what is a Solar Panel ?

Solar Panel is the array of Solar Cells and a solar cell is a device that convert sunlight directly into electricity.Solar cells are classified into tree generation.Solar cells are often electrically connected and encapsulated as a module. PV modules often have a sheet of glass on the front (sun up) side, allowing light to pass while protecting the semiconductor wafers from the elements (rain, hail, etc.). Solar cells are also usually connected in series in modules, creating an additive voltage. Connecting cells in parallel will yield a higher current. Modules are then interconnected, in series or parallel, or both, to create an array with the desired peak DC voltage and current.

The power output of a solar array is measured in watts or kilowatts. In order to calculate the typical energy needs of the application, a measurement in watt-hours, kilowatt-hours or kilowatt-hours per day is often used. (wikipedia)

Google's green-energy plan

Google complete solar energy project in June 2007 to flow the Google's green-energy plan . in this project thay committed to helping to build a clean energy future. Google's green-energy plan goes by the formula-like name RE>c , which sets out the goal of the company's operation -- to find renewable energy sources that reliably generate electricity more cheaply than burning coal.

Google installed 9212 solar panels at its Silicon Valley headquarters that will rank as the largest U.S. solar-powered corporate office complex . This is a 1.6MW solar system that produce about 8000 kilowatt-hours of electricity in 24 hours. This amount of electricity is enough to power 30% of Google's peak electricity demand in our solar powered buildings at our Mountain View, CA headquarters.

“This is the largest customer-owned solar electric system at a corporate site,” said Noah Kaye, director of public affairs at the Solar Energy Industries Association, an industry group based in Washington, D.C.

According to Robyn Beavers, the director of environmental programs at Google. Google intends to generate 50 megawatts of electricity from renewable forms for its operations by 2012.

What is jQuery ?

2009-04-15T02:13:00.000-07:00

jQuery is the best JavaScript library that use to easy , fast and smart client side programing for web. javascript is a powerful client side scripting language , but nobody like it pure.

because its very difficult and need to spend a lot of time to do some works cool .

Using a good javascript library make it easy to scripting client side and make you sure that your scripts works currect on popular browsers like FireFox , Google Chrome and IE .

You can download last stable version of jQuery core here .

Using jQuery is very simple , you should just simply add a like to the jQuery.js file in your html document .

jQuery is designed to change the way that you write JavaScript.

One of powerfull futures of jQuery is selectors , here is a sample:

Traditional way:

Using jQuery

I try to write some jQuery samples later .

more about gmail

2009-04-15T01:11:00.000-07:00

I like google and also GMail because of making difference in performance and quality of service and I try to write about google products .

Know a little point about Gmail...

As you know gmail support dot character in email address .

My Email address have dot and some day I try to login to my email address without dot's and it work's .

you can try it your self now...