Saturday, January 31, 2009


This post is Move to ASP DOT NET MATTERS

Direct link :

For More Details check Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

CSS- Bubble Tooltip

This Post is Moved to

ASP DOT NET MATTERS Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

Friday, January 30, 2009

Partial Page Rendering

Partial page rendering is one of the very amazing concepts by Microsoft Ajax extension. In this article we will discuss one very common and real time scenario for which Partial page rendering is very useful. Whenever there is need to render a server side control for Ajax web application, partial page rendering is very good option.

For example, in my ICallback articles we have discussed about the Ajaxifying the grid view; but consider following scenario,
Grid view contains details of the all employees of an organization, and then in that case employees are categories in various ways,
  • Depending on the role of an employee.
  • Depending on the CTC of an employee.
  • Depending on the City of an employee.
  • Depending on the Department of an employee.

And many more, then in such case if we are using same Gridview to display all employees, and along with it, we need to provide an instant update mechanism in the grid; but for each category of employee, details which need to be edited are different and may contain information which is not part of the grid, grid is containing only common information.

Partial page rendering is a very good option for such case; we don’t need to handle anything on client side other than managing partial rendering calls. For this we will use Microsoft Ajax extension, i.e. Update Panel, Update progress and script manager.
Now if we are going to user different web user controls for different purposes then this approach is more effective.

We will consider following case:
  • We have main page which contains a grid.
  • On click of edit image in grid column, user should be able to edit the details of that particular employee.
  • Depending on the employee id, display information to edit.
  • This may contain more than one table to fetch and update the data.
  • To make it more modular use Web user controls for data update.

To avoid database dependency we will use Data Tables as properties, and will use sessions to maintain different data tables.

Steps for the code development are as follows.
  1. Design a Grid View the way we want it to be displayed.
  2. Develop user controls to handle various types of users, and make sure all of them work fine. Here we can keep the login on the same page.
  3. Add an update panel in the Design, this update panel contains all required user controls in different Panels and web user controls; visibility of each panel and web user control is set to false.
  4. Add one server side Button on which we will update the update panel, add this button as a trigger for update panel.
  5. On click event of the button contains code to handle update events.

Develop Aspx Page

Form tag of aspx page will be as below

btnClick is set hidden using Style .
In above logic we have added Triggers for update panel, there can be more than one trigger for the update panel. These triggers are responsible to send Post back of update panel, i.e. Partial page will go to server side, and server will render only the contents inside the Update panel. asp:AsyncPostBackTrigger represents asynchrous post back.

We are going to write server side code on the click event of above button, and changes will reflect in update panel. So if we have more than one trigger for an update panel, we can handle different events very much effectively. Also if our update panel contains some user control or some button to update server side data, it gets updated asynchronously , for that we don’t need to put extra code.
E.g. if we have a web user control in Update panel, and that update panel contains, some server side buttons, click event of all such elements get handled automatically.

In the demo code we have used one static class, which has public static table; this is used just to avoid database connection.
We have following tables in the static class.
1. DT – General table containing general (Common) information about the Employees
2. Manager – Table containing information about the employees who are managers.
3. TeamLeader – Table contains information about the employees who are Team leader.

In Demo code we have a GridView which contains common information about employees. Thus on page load we have following code.

Our girdview on aspx is

Now onclick of Image1 we need to fire trigger of an update panel i.e. click event of btnClick. So onlick of Image1 we have to do following tasks
Set the employee id in hdnValue, this field is part of an update panel,thus we can read it’s value on server side, for partial page rendering. And call click event of btnClick.
For this we use server side GridView1_RowDataBound event.

So on click of Image1 in grid, we will fire AsyncPostBack to server. In above code check img.ID = e.Row.Cells[1].Text; this line of code will append empId for DT, to the image id so that we can assing the image id to hiddenField on client side. If we split the img.ID on client side on “_”, the last element of an array will be EmpId.
Check the schema of DT for this.

Up to this point we are able to send Asynchronous Post back request to server; after this we will develop logic to change the contents in Update panel, for the understanding purpose, we will only hide and show the controls in update panel and fetch employee data from table and display it in controls. Further we can make it more and more complex depending on the requirement.

In code Update panel contains one Panel and Two web user control, panel will take care of an employee who is manager and web user controls are used for other types of employees.

btnClick ‘s server side click event is used to hide and show the data.

This panel contains Update button, update details is handled totally on serverside.
This is how we will handle Page events of page. Now in click_Click event, TeamLeader1 is an instance of TeamLeader web usercontrol in UpdatePanel. TeamLeader web user control contains all server side logic to update the details of TeamLeader. To access value of hidden field of parent page we will use following line in page load event of web user control.

We have handled all update and retrive events on server side, upto this we have used javascript just to set the value of hidden field.

Now we will discuss about

Script manager is required to execute Asynchronous Post back, whenever we use Update Panel we need Scrpt manger, Scriptmanager is also used to add script refrences as above.

We can handle various client side events related to Partial Postback and Update panels, some of them we have used in Jscript.js file.

PageLoad is one such event in which we can initialize some functions and assign client side events. Page load event is as below, events which can be used, but not required for this demo are commented in the Jscript files. There are many such events Microsoft has provided.

PageLoad() event is as below

OnBeginRequest and OnEndRequest are functions which get called on perticular event. Here we haved used them to display a Processing Div tag, irrespective of update panel.
Update Process is one of the control provided by Microsoft Ajax1.0, which does the same thing but we need it to associate with UpdatePanel., we are not going into details, of it.

z-index of this div tag is set very high so that whenever it is visible, it will be above all objects of the page.
Just check JavaScript used for it.

Now this div tag will be visible when ever partial page render request goes to server, whether request is because of elements inside the update panel or out side the update panel. Many times such approch is useful, because , we might use partial page renderring many times on the page, with more than one update panel also.

args contains arguments, please debug the JavaScipt using breakpoint,just like, and check the atributes. There are many useful attributes, we can make use of.

Conclusion of this article
Many times it is useful to develop code using concept of partial page rendering, which can excel the development time, and managing code becomes more easy, no need to write extra JavaScript to handle Ajax requests.
Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

Thursday, January 29, 2009

ICallback Event handler

This Post is Moved to

ASP DOT NET MATTERS Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

Wednesday, January 28, 2009


This Post is Moved TO


Direct Demo Code Links--> Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

Ajax- Image Handling

Ajax like image display. This is a very simple way to display images, and slid the images using generic handlers provided by Asp.Net 2005.

Very simple way to handle images and change images according to user input. This is not exact ajax, but we can use query string to change the image.

We are going to use generic handlers or .ashx file to display image, and change the image simply changing the query string of the ashx file.

This article will be a kick start for the creating web based photo album applications.

We will use Html Image Tag as follows

In the source of image, instead of giving image URL we are giving, URL of ashx file.

Our HTML code for form tag is as follows

In above HTML code , we have one div tag with id “imageShow”, on mouse over event of “Image1” we will display original full size image in this div tag.

Hidden field named “hdnId” is used to maintain the id in query string to ASHX file.

We also have following JavaScript function on main page to change the query string of the image source.

At this point our client side code is done.

Now following is our serverside code written in ashx file.

Ashx is a generic handler, we can use it if there is no need to run any server side page event.

We have to set the contentType for binary stream, since we are writing data as a stream.

This is very simple to implement, we can develop complex image album web application using this logic. One Ashx page will be enough to handle many requests.
Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

Monday, January 26, 2009

This article is for those who are new to Ajax

This article is for those who are new to Ajax. Ajax stands for Asynchronous Java And Xml. Ajax is the great solution for the new age of web applications, it simply helps developer to increase the performance of the site along with the more user interactive UI. Since web page is not getting refreshed each time, it is more users friendly.

The idea is; if page size is 500kb and only 10kb of data is to be updated, then if web application sending and receiving only 10kb data to and from server make more sense, than refreshing whole page. Also the request to server is asynchronously so that user can continue with the work instead of waiting for the response from the server.

It really works fast a very good web experience, in old days of the web development each time user is suppose to wait for the whole page to get refreshed, not a good idea.

Start with AJAX :
Ajax actually works because of the XMLHttpRequest object. Using this object web application can communicate with the server, i.e. either web service or the webpage. In this case web service or webpage will send required data to client page and then on client side using Java script corresponding field can be update.

You can create XMLHttpRequest object as follows:

“request” is the XMLHttpRequest object in above code. (Code is in JavaScript )

Next step after this is to open the object connection and send the request
Open method looks like, url, in boolean async, [user, password])
i.e.'GET', url+parameter, true)
(Here we are not going to use user and password)
but before this, we need to specify the function which will take care of the data return from the server. i.e. once we send request to the server using XMLHttpRequest object and once response comes from the server which function will handle it.
Before sending the request we will specify the action; for this XMLHttpRequest object posses one event called as onreadystatechange. On this event we can specify which function should be called on each ready state change.
Now before this will understand which are the states XMLHttpRequest object supports.

Ready state valueDescription
0Represents an uninitialized state in which XMLHttpRequest object is created; and not initialized
1Open() method has been successfully called
2Sent () : request has been sent to the server.
3Represent "receiving" state in which the HTTP response headers have been received; message body has not yet been completely received.
4Loaded, data transfer has been completed.

So the above code will change to

Now we will develop a web application in which user will select the value in the combo box and on selection of the value dependent textbox will be filled. In this case on change event of the combo will be used to fire an Ajax request to the server and server in turns will send a response to the client. (Coding is done in 2.0)

1.Create a web application design a combo box and text box as follows

2.And in code behind add attribute to “InputList” i.e. to combo box.

"callToServer(this.value)" is the javascript function, this function will accept the selected value and send request to the server; using XMLHttpRequest object.

3.Now add one webservice in the same project. Also add following prototypes in web.config file.

Add above code in tab. This is required to communicate with webservice over http.

4.Now write one webmethod in the webservice. i.e.

We will call this webMethod in our Ajax call.

5.After this, will write a JavaScript function "callToServer(this.value)" . This function will be called on onchange event of dropdown list (Ref point 1).

If you observe the url it is the url of the webserivce in the same project.
Here we have to use url which is under the same domain, Firefox doesn’t allow cross refrence, and IE give warning (i.e. IE 6).

var url = "http://domain1/WebSite/webservice.asmx/sendMessage?str="+val;
this will give warning in the IE 6 but Firefox will not allow you to access this webservice.

In the above function check request.onreadystatechange=handleResponse;
Here if you obsever onreadystatechange on function named handleResponse is called. So in the next step we will have to write a function which will handle the response from the server.

6.handleResponse function will be as follows

Since the response is from webservice and it is in the xmlformat, we have to use parser to parse the data. If you want to see what is the response from the server add alert(request.responseText) in the above code after 1st if condition.

window.document.getElementById('DependentOutput').value = data; this line will fill the textbox with the response from the server.

This how we can create Ajax application, it’s very simple and easy. Once you understand this concept, you can modify the code and make it more complex as per your requirements. Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

blogger templates 3 columns | Make Money Online