Personal Blog of Mustafa Basgun

Archive for the ‘AJAX’ Category

Getting Syntax Error in ASP.NET Routing Due to WebResource.axd

with 6 comments

If you implement routing in an ASP.NET 4.0 web application and use the validation controls in it, it is good to keep in mind that you need to add an exception for the .axd files in your Global.asax file. Otherwise, you will keep getting a syntax error because the routing picks up the .axd files and not properly loads the JavaScript files needed for the validation controls.

mustafa-basgun-blog-aspnet-routing-error-1

mustafa-basgun-blog-aspnet-routing-error-2

If same issue occurs in an ASP.NET 3.5 SP1 application, you can use the StopRoutingHandler class which implements the IRouteHandler interface.

Written by Mustafa Basgun

October 25, 2010 at 9:51 PM

Posted in AJAX, ASP.NET, C#, Web Development

Tagged with ,

Want To Validate Username Availability Asynchronously?

leave a comment »

While I was reading my feed aggregator at the weekend, I was paid attention to the recent post from Encosia because of its title. Validating a username asynchronously would be a great functionality in almost every types of online registration scenarios. Right after reading the post, I downloaded the binary file from CodePlex and created a very simple demo in about half an hour. That was really easy to implement.

Implementation

Before starting to code, be sure that the dll that is downloaded from CodePlex is in the Bin directory:

mustafa-basgun-blog-aspnet-validate-username-1

My sample (yes, very simple) registration form is:

mustafa-basgun-blog-aspnet-validate-username-2

As it can be seen, the trick is with the ServicePath and ServiceMethod attributes. ServicePath is the path to the webservice housing the ServiceMethod, and ServiceMethod is the method checking the availability of a username. My sample (yes, again very simple) webservice is:

mustafa-basgun-blog-aspnet-validate-username-3

Details of other attributes of the control can be read via its Discussions page at CodePlex.

Finally, here is how the form looks like after all these implemenations:

mustafa-basgun-blog-aspnet-validate-username-4

Download

You can download this sample registration form from here.

Issue Tracker

I would encourage to write your comments to here if you face any issues about the control.

Written by Mustafa Basgun

October 6, 2008 at 9:51 PM

Implementing New Virtual Earth Map Control in ASP.NET

with 4 comments

When the July 2008 CTP of Live Tools were released a few weeks ago, I was kind of impressed with the Map control. I finally had a chance yesterday to read more about it and develop my own simple testing page. You may need to download this CTP release first before reading the rest of this post.

Implementation

Here is the 5 steps to implement this control into any ASP.NET page:

1. When you create a new website, select “ASP.NET Windows Live Web Site” as a template:

2. Be sure that “Microsoft.Live.ServerControls.VE.dll” is in the Bin directory:

3. Be sure that “Virtual Earth” tab is in the Toolbox:

4. Drag the “Map” control and drop it into the ASP.NET page, and play around with some of the attributes in it:

Note: Latitude and longitude of any location can be found in Terraserver. This sample demonstrates the aerial view of a mall that is very near to my house.

5. Press the magic key (F5) to build and view the sample page:

Download

This sample can be downloaded via here.

Written by Mustafa Basgun

August 15, 2008 at 8:05 AM

Maintain Scrollbar Position Inside UpdatePanel After Partial PostBack

with 41 comments

I have recently figured out that if there is a scrollbar’ed Panel control inside an UpdatePanel, it looses its scrollbar position after any type of partial postback within that UpdatePanel. There can be a GridView, a DIV container or another similar control instead of this Panel.

I have searched and found some workarounds at ASP.NET forums, and this specific one was the easiest one to implement into every situation in order to gain back the position of scrollbar. I enhanced it a bit by handling null cases and using the ClientID property. Here is the result:

mustafa-basgun-blog-maintain-scrollbar-inside-aspnet-updatepanel-1

Update

You can read the “Reusable JavaScript Component” version of this post in here. Thanks Matt!

Written by Mustafa Basgun

June 9, 2008 at 3:28 PM

Disable UpdatePanel’ed ListView with CSS and JavaScript While Sorting

with one comment

When a ListView, or GridView as well, allows sorting and is inside an UpdatePanel, it always bothers me that any of the sorting links in the header row are still clickable even though the initiated sorting progress is not being completed. Most of the time this situation may yield an error if the ListView is dealing with many records since everything happens inside an UpdatePanel asynchronously. As there are some other possible ways to beat this, here is my solution by utilizing a transparent image to cover up the ListView while it is being sorted.

• This link about CSS image transparency and opacity would be a good reading before jumping into the solution.

• I will be extending one of my former sample codes that I created here.

Solution

Instead of creating large volume of data for the sample code, I will just simulate 5 seconds sleeping inside the sorting event of ListView1:

Then, I will create the DIV which holds the image that will be made transparent via CSS at a later time and place ListView1 inside an UpdatePanel to have asynchronous postbacks:

Final nested code view with a global DIV named as “ListViewGlobalDIV” should be similar to the following:

I will make the “transparent.gif” transparent by using the following CSS code:

(“transparent.gif” is just a plain gray image having the approximate width and height of ListView1.)

This way of creating transparent images is not a CSS standard yet, but it works well in most of the modern browsers.

Notice the usage of absolute positioning in order to overlap TempTransparentDIV and UpdatePanel1.

Finally, time to write the JavaScript part:

If the JavaScript code refers to any objects from the ASP.NET AJAX Library, then it should be placed after the library has been loaded. Therefore, putting the above script to the end of the page would be a good practice since ScriptManager1 loads the library in this sample code.

As a result…

When you sort ListView1, it will be covered by “transparent.gif” with an 40% opacity and cursor will show the sandclock. All links would be unclickable till the sorting progresses are completed each time.

Download

Sample code can be downloaded via here.

Written by Mustafa Basgun

March 14, 2008 at 9:00 AM

Create A Simple Dynamic Clock by Using UpdatePanel of ASP.NET AJAX

with 23 comments

If you are developing web applications for different customer scenarios in which timestamping matters, there is a chance that you will be asked to put a real-time dynamic clock on the page depending on your real estate limitations on the UI. Any search result would give you several remedies to this purpose, but I wanted to have something short, neat and cross-browser compatible.

Here is the solution that I came up with by using an UpdatePanel and a few lines of JavaScript code.

First, create the UpdatePanel as in the following sample form:

OnLoad event of upDynamicClock will be handled in the server side:

Create a listener function (DisplayDynamicClock) by using the native setInterval function of JavaScript in order to update the content of lblDynamicClock and tell the page to run this function via window.onload:

Notice the usage of “__doPostBack” function as a bridge between JavaScript and ASP.NET for triggering a postback at upDynamicClock.

Conclusion

I have tested the outcome with the latest versions of IE and Firefox, and it worked fine with both of them:

Download

Sample code for this post can be found here.

Written by Mustafa Basgun

February 27, 2008 at 4:00 PM

“LINQ to XML” in ASP.NET – Ajaxified XML Document Filtering

with 6 comments

Introduction

LINQ to XML is a new way to play with the XML data in .NET 3.5. It is actually an XML programming API that simplifies dealing with XML documents without any need to know about additional syntaxes such as XSLT and XPath. It is designed to be a cleaner, faster and lightweight API which at the same time has the key features from XSLT and XPath. According to MSDN, its public data model is aligned as much as possible with the W3C XML Information Set.

Sample XML Data and Its Filtering with “LINQ to XML”

For sampling purposes, I just created the following XML data and add it to my demo project:

My purpose is developing a simple ajaxified web application that has a dropdown with the country names and a literal that shows the capital city of selected country name from this dropdown. For this purpose, I created my server controls with some AJAX flavor as:

Then, I organized the Page_Load event as in the following in order to query over Countries.xml:

Pay attention to the usage of XDocument class from System.Xml.Linq namespace (which is already defined in the web.config file as default) in order to load the local Countries.xml file and the new casting and access methods (such as .Descendants and .Element that I used above).

Finally, after compilation the result on the browser should be like:

When “Belgium” is selected from the dropdown, literal will show the following with a partial rendering:

Conclusion

I generally work with SQL Server or Access in the data layers of my web applications, therefore I barely had a chance to put my hands on XSLT and XPath deeply. But, I can say that “LINQ to XML” as a data provider seems enough even powerful for me to handle many common XML programming tasks inside my code.

Download

You can download the demo project via here.

Written by Mustafa Basgun

January 13, 2008 at 10:00 AM