At the end of the last month (September 2008) Microsoft announced that it will be shipping jQuery with Visual Studio going forward. It was a great news for all ASP.NET developers who are jQuery fans as well as jQuery and ASP.NET AJAX folks like me. Before and after that, there were many posts made around the same subject. It will take a full post to list all these posts. But it would be easy for me to list ASP.NET jQuery heroes around such Rick Strahl, Dave Ward and Matt Berseth. There are many other heroes around such as Bill Beckelman who made a great collection of ASP.NET with jQuery Demos.

For specific posts around ASP.NET AJAX and jQuery I recommend to refer to the following posts by Dave Ward's blog:

• Using jQuery to display a modal UpdatePanel confirmation.
• Using jQuery to enhance ASP.NET AJAX progress indication.
• Avoid this tricky conflict between ASP.NET AJAX and jQuery.
• Use jQuery and ASP.NET AJAX to build a client side Repeater.

Introduction:

We all heard about and maybe worked with ASP.NET AjaxControlToolkit! A set of wonderful controls, but they are heavy, maybe not all of them but many of of them. Beside they require lots of script files which increase the response size.

I was thinking of building jQuery UI Widgets to clone some of AjaxControlToolkit controls. And after Microsoft announcement about jQuery I had another idea! I always liked how ASP.NET AJAX component model, both client and server models. It is easy to build ASP.NET AJAX Enabled Controls especially for ASP.NET control developers. ASP.NET AJAX client and server architecture really ease the development ASP.NET AJAX Enabled Controls and also the core ASP.NET AJAX client library has no massive performance issues, and it is widely used.

On the other hand, I loved the ease of using jQuery as well, how fancy it provides UI Effects and manipulation of DOM. Many many things I wished to have in ASP.NET AJAX were exist in jQuery. So I though of building an ASP.NET AJAX Enabled Control to clone the existing AjaxControlToolkit's control CollapsiblePanelExtender. And use ASP.NET AJAX client and server component model while using jQuery for UI Effects. In this case it would be collapsing (Slide Up) and expanding (Slide Down). [View Demo]

More...

Amr Elsehemey started to blog about ASP.NET MVC. He picked up a good subject to blog about; Building ASP.NET MVC Blog Engine using ASP.NET MVC and jQuery, he named it "jBlogMvc" Yesterday he posted his first post in the series, and myself I am waiting for the rest of the series as for it is going to be very interesting, because I have couple of ideas in mind.

He is going to explore the code and posting samples as he developing this simple blog engine. We have been talking about this subject for few days now, and really he has some cool ideas to present. Keep tuned with Amr, I am sure he is going to amuse us with some kicking posts just as he did in his Design Time Support post series.

UPDATE: ALWAYS DOWNLOAD LATEST SOURCE CODE FROM PROJECT PAGE ON CODEPLEX

Few weeks ago Dave started the Advanced ASP.NET AJAX Server Controls book giveaway contest. And yesterday he announced that the control is almost completed, but the contest door is still open. So I thought to grape the bits and start testing it and build a simple sample. [View Demo]

The sample that I am going to demonstrate here will use ASP.NET Create User Wizard control with UserName Availability Validator. In this sample I'll show the important properties of this control as well as the current issues exist.

Prerequisites:

I'll assume that you already know how to configure and use the existing built in ASP.NET Membership provider. You'll need a sample database with ASP.NET Membership services installed on it.

The sample provided has ASP.NET Membership already installed and configured, you can download the sample and start explore it.

You page must have ScriptManager control on it, of course this is an ASP.NET AJAX control at the end.

More...

I've been worked with localization and globalization for a while now. During that period I faced issues and learned many things about the subject. Here I am going to share some of my own ideas and tips to avoid falling in certain issues. It worth to mention that I am talking from GUI point of view and not Application Data point of view.

Consider using Resource Files ".resx" or Database:

Well this is a matter of your needs. But I highly recommends to always consider ASP.NET Resource Provider. Then it doesn't matter to work with ".resx" of Database. By default ASP.NET has a provider for XML based resources which is resource files ".resx" But also you can get a great Database Resource Provider for free from here.

Actually to choose between both you should think about that all your UI localizable terms should be stored in one central location. I mean, do not put some in resource file and some other in Database. Like you define labels on resource files and grid headers in database!! or maybe error or information messages. Just build it right from the beginning and define one central location.

More...

Last year, Matt posted a cool post about How To: Use the HoverMenuExtender for GridView RowCommands. Last month I got an e-mail from Justin Riggs, he was trying to combine to things. The usage of HoverMenuExtender as described in Matt's post, and the Master\Detail GridView with CollapsiblePanelExtender I posted about few months ago.

He already made the sample which ease the job for me in this post, but he had and issue that the functionality wasn't work properly. So I fixed that and thought to share it here in case anyone would love to apply same feature. You can view demo here.

It is a must that you return to How To: Use the HoverMenuExtender for GridView RowCommands by Matt, and Building a grouping Grid with GridView and ASP.NET AJAX toolkit CollapsiblePanel by me before you go a head in this post.

More...

Well, I'm done with this article that show in details how to build on demand loaded details from master data using GridView and CollapsiblePanelExtender control. Read the article.

Earlier this year Matt Berseth posted about Building a Grouping Grid with the ASP.NET 3.5 LinqDataSource and ListView Controls. Then I followed his post with 2 other posts discussing same idea but with different implementation:

• Building a grouping Grid with GridView and ASP.NET AJAX toolkit CollapsiblePanel
• Building a grouping Grid with GridView and JQuery

Later I got few comments about how to implement that using AJAX, in order to display the details data on demand. At that time Dave was demonstrating the usage of jQuery AJAX on his post Using jQuery to consume ASP.NET JSON Web Services. So I came up with another demo to apply on demand loading of details data in my post GridView Grouping Master/Detail Drill Down using AJAX and jQuery.

Again I got few other comments on how to apply same approach, but using ASP.NET AJAX Control Toolkit CollapsiblePanelExtender control. So here I'm going to provide how to do that using CollapsiblePanelExtender and ASP.NET AJAX PageMethods call to apply on demand loading of details from the master data. You can read my article and view Demo here.

Comments can be left on this post as currently pages feature of BlogEngine.Net doesn't support comments.

I've seen different type of tooltips around. And actually jQuery tooltip plugin was one of the best I ever seen. And then I thought to build some tooltip similar to those tooltips available on asp.net learning items. Just simple one to be displayed on left or right of the tooltiped item (element). And I decide to build that using jQuery.ui widgets.

Very simple and straight forward, all I needed is the following:

• A tooltip fully UI customizable to be displayed to the right or left of the desired element. And it should detect if the desired element is closer to right or left on the screen; so the tooltip to be displayed correctly to the right or left of the element.
• Ability to control when the tooltip to be displayed, on hover or focus on the element or manually using tooltip widget methods such show and hide.
• Callback upon on show and hide of the tooltip.
• Optional fancy show/hide animations.

I built a sample which you can download to demonstrate how this tooltip should work and you can view the demo here.

Before go through the code, I recommend first to read the following posts:

• jQuery.UI ProgressBar Widget
• jQuery.UI Messenger\Outlook like message notification Widget

More...

Today, Matt posted a cool progressbar widget using jQuery.UI. He gave a good introduction and explanation about how to build a widget using jQuery.UI.

Here, I'm following his sample to build my own one, which is Messenger\Outlook like message notification [view demo]. So for reference and how to build one please return to jQuery.UI ProgressBar Widget by Matt Berseth.

Messenger like message notification widget is something I wished to do long time ago, and was lazy to think and code it, because I thought it would take to much coding. And I read Bilal's article How to Show Messenger-Like Popups Using AJAX but it wasn't a reusable component. So I just used his styles for demonstration.

After going through Matt's post, I decided to build it up right away. So Let's dive into the code. Below is the init method for the widget, I just initialize some local variables with to store current bottom position and height of the popup message element.More...

Yesterday, I was reading Efficient Paging in SQL Server 2005 post by Justin Etheredge, then in the comments I found Kevin Hazzard pointing to his Efficient LINQ to SQL custom paging approach. I liked his way, which reflects Justin's method which I already seen before but never apply it. I think it is more efficient than my method I provided in an earlier post. And if you googled about custom paging with LINQ to SQL you'll find few more implementation.

Today, I'm updating my method and provide the same sample I made last month with Kevin's method. I made an extension method to IQueryable Interface and called it KavinPage. You can view a demo here

Here is the code for the Extension Method:

   1: public static IQueryable<T> KevinPage<T, TResult>(this IQueryable<T> obj, int page, int pageSize, System.Linq.Expressions.Expression<Func<T, TResult>> keySelector, bool asc, out int rowsCount)

   2: {

   3:     rowsCount = obj.Count();

   4:     if (asc)

   5:     {

   6:         return obj.OrderBy(keySelector).Skip(page * pageSize).Take(pageSize);

   7:     }

   8:     else

   9:     {

  10:         return obj.OrderByDescending(keySelector).Skip(page * pageSize).Take(pageSize);

  11:     }        

  12: }

It is all about Extension Methods and how to use them to build SQL Queries. You can return for Kevin's post for detailed explanation. Also you can return to my previous post about this subject for more details about how to put it all together to build Paging ASP.NET ListView using LINQ to SQL and ObjectDataSource.

Download the updated sample.

Last week I posted about building custom paging with LINQ to SQL. And I wrapped the functionality with Extension Method to IQueryable<T> Interface.

Today I'm going to put the custom paging in a practical sample using ASP.NET ListView, DataPager and ObjectDataSource Control. Click here to download the sample. View demo here.

The sample is using Northwind Database. So first I created a Northwind LINQ to SQL class ".dbml"

More...