AJAX


Hi All,

I just ran in to a situation where I could not increase the width of the Auto Complete extender with out extending the width of the associated control.Could not find workaround with the DLL it self and had to dig deep and found out a solution  with the editing the following java scrip with in the source code in the file ‘AutoCompleteBehavior.js’ in Auto complete folder.

this._completionListElement.style.width = Math.max(1, elementBounds.width – 2) + ‘px’;

no matter if you manually set the width form the out side this line of code will set the width to bound element -2px so the solution was to either put a solid value to this

this._completionListElement.style.width = “400px”;

This is of couse if you are using it one size all the time

find a solution Here http://www.codeplex.com/AjaxControlToolkit/WorkItem/View.aspx?WorkItemId=13605

Advertisements

I just found a bug in the ajax auto complete extender.  This does not allow multiple instances of the control to appear in the same web page. If you have it with animation Like the element below.It should have a unique name per control. Otherwise you will lose control. When one of the controls is selected it will ends up firing the same event for both the controls.

“CompletionListElementID”

Solution: You can avoid using animation or css elements form the extenders or use different names for css classes used by them.

found a good work around here :http://forums.asp.net/t/1362679.aspx

Ajax means asynchronous java script and XML. Ajax is a plug-in to Microsoft visual studio which enables some common functionalities of the Java scripts in to the VS itself. This enables the user to drag and drop the components to the web page and develop the application without having to write any code. One of the most powerful components that come with the AJAX extinctions is the “Update panel” which enables the partial page updates. In order to use this you need Ajax extinctions which you can down load and install form the following link.

Once you install the Ajax Extinctions you have the project template called AJAX enabled website when you go to create a new web site.

Ajax Enabled Website

Ajax Enabled Website

Once you crate this type of project you will have your web site AJAX enabled (If you are trying to have an update panel you have to make it AJAX enabled which I have explained in my previous article)

Once you have created the project you will have;

· Web configuration created unlike on the ASP.net normal web site.

· There will be a tab called AJAX extinctions on design mode within your tool box.

 

 

AJAX Extinctions

AJAX Extinctions

There is something called script manager which should be included once and only once in an ASP.net page in the tool box AJAX extinctions, which you should see in your web page by default. If it is not there you can dag and drop it form the tool box to your page.

Then you can drag and drop an update panel form the tool box to your web page. You can include the components of your web page you need to partially update. Let’s say I want to update a label on button click form a text box without having my whole web page to post back.

There are couples of ways to do this;

· Have all the components with in a update panel

· Have only the components that you want to update within the update panel

1. In the first method you simply include the component you want to update on asynchronous post back within the update panel as well the component with the event that you want to update the panel.

2. In the next method I just place only the components I want to update within the update panel. Then add the events that I want the update panel to update on collection of triggers for the update panel.

Update Panel trigger collection

Update Panel trigger collection

Then I have to change the update mode from always to conditional. Because It would be necessary if one decides to have multiple update panels in the same web page so that the events want fire on always on partial updates. However it is recommended to have the conditional update mode.

Update panel properties

Update panel properties

After all these the advantage that I have by using the update panel is it allows me partial post back. So if I have a complex graphics or photos as the frame of the page I don’t need to reload them after each and every post back. So it drastically reduces that time that the user have to wit after a single click on the web page. It sounds great for me.

This is a frequently asked question? I also had this question few months back. Because I had my project developed in ASP.net web site which did not have any Ajax components. But as the time went my client wanted the web application to have Ajax features which would make it much faster in terms of performance.

So I was in a spot of bother how to do it. And as a matter of fact I have decided to publish this in my weblog so any one could learn from it. Actually there is couple of ways to build a Ajax enabled web site.

1. Create an Ajax enabled web site at the start of the project.

a. Open visual studio

b. Go to file menu and create a new web site.

Create project

 

 

 

 

c. Select form visual studio installed templates select Asp.net Ajax enabled web site. (If you don’t see this means that you don’t have Ajax in your machine. So you better install the Ajax extensions first.)

Ajax Project

d. Once this is done you have your first Ajax enabled web site.

e. You can see that the project already have a web configuration file unlike the normal Asp.net web site which asks to create the web configuration file at the run time. The configuration file has some coding already written in it.

 

 

2. Change the web configuration file to Ajax enabled web sites web configuration.

a. There is couple of ways to deal with the existing Asp.net project. First create a Ajax enabled web site and see what included in the web configuration file.

<configuration>

<configSections>…</configSections>

<system.web>…</system.web>

<microsoft.web>…</microsoft.web>

<system.webServer>…</system.webServer>

</configuration>

b. You can see the above tag appearing with its content.

c. In a normal Asp.net web site it doesn’t have a initial web configuration and ask to create a configuration at the first time when you run the project.

Web config

d. The configuration file has these tags.

<configuration>

<appSettings/>

<connectionStrings/>

<system.web>

<compilation debug=true/>

<authentication mode=Windows/>

</system.web>

</configuration>

 

e. As you can see only the tag <system.web>… </system.web> comman in both the configeation files.

f. You can copy the code within the above tag of the Ajax enabled web site and add it put it within the same tag put your Asp.net web site

Next copy the other three tags <configSections>…</configSections>,<microsoft.web>…</microsoft.web> and <system.webServer>…</system.webServer> from the Ajax enabed web site web configeration and put them within the

<configuration>…</configuration> tag of the web configeration file of the ASP.net web site

 

Believe me this will make your Asp .net web site in to a Ajax enabled web site.

Few tips of how to use Ajax:

· If you want to use Ajax components in a web page you should add the script Manager Component to your web site first.

· The most widely used simplest to use component is the update panel which is used to refresh a part of the web page without having the page to post back.

· You can trigger the even the events form a component outside the update panel to refresh the update panel.