Archive for June, 2011

Filtering an ASP.NET GridView control with jQuery

 As I’ve been swimming in the great jQuery lake I discovered the jQuery QuickSearch Plugin,

As WebForms developers we often display lots of data using a gridview control.

I though it would be neet to set up using the jQuery QuickSearch plugin with the Gridview.

Here’s how it works.

Ihave a GridView wired to some sample data. For demo simplicity I’m using an XMLDataSource and reading from an XML file in my App_Data directory.

When the user starts to type into the Filter Text Box the rows in the table are filtered, meaning rows that don’t match the character(s) entered are hidden from view.

As the user continues to type, the list is filtered further.

The ASPX Page Markup is as follows.
Read the rest of this entry »

Visual Studio 2010 Web Standards Update

clip_image002Over the last several months the “new wave” of web standards have been  moving at an accelerated pace,

All the popular browsers are pushing the envelope including Microsoft’s own IE9 and the new standard open up exciting new opportunities for developers.

Microsoft at large and the ASP.NET and Visual Studio teams are heavily invested in supporting the new wave of web standards in our tools and platforms.

ASP.NET developers have been asking for HTML5 & CSS3 support and yesterday we announced the public availability of Visual Studio Web Standards Update which brings a ton of HTML5 & CSS3 support to Visual Studio 2010 SP1.  

The VS Web Standards Update is a free extension available for anyone who is using Visual Studio 2010 SP1 and it provides HTML5 & CSS3 support based on current W3C specifications.

clip_image002[4]

Here are some highlights of what’s included !

HTML5

clip_image002[6]

VS Web Standards Update provides you intellisense and validation for most common HTML 5 features like:

Browser APIs

  • Geo-Location – Having location aware websites is growing trend and now you will have full intellisense and validation within Visual Studio for creating websites which are location aware.  For sample view the source for the IE9 test drive demo.
  • Local Storage – IE has been supporting local storage from IE8 onwards, now Visual Studio will provide you with full fidelity intellisense to create sites which can save state within browser.  For sample of try view source on HTML5 Demo Site

CSS3

clip_image002[8]

This update supports intellisense and validation for most of the CSS3 modules including:

Also, if you are trying to make websites which work well on a variety of platforms and browsers you will love the fact that Web Standards Update not only supports IE specific prefixes like –ms; but also other browser prefixes like –webkit and –moz.

Some links :

NOTE:  The Web Standards Update works on both VS 2010 SP1 and VWD Express 2010 SP1.  As this is a Visual Studio Extension,certain CSS3 selector syntax & Browser API intellisense may not be supported in Visual Web Developer Express. .

Implementing Mutually Exclusive CheckBoxes with jQuery

The ASP.NET Ajax Control Toolkit contains a control extender for making a set of ASP.NET CheckBoxes mutually exclusive [ See HERE ]. In this post I’ll demonstrate implementing Mutually Exclusive CheckBoxes with jQuery.

ASP.NET Checkboxes are, of course, server-side controls. If you’ve been following along with this series, or you using ASP.NET WebMatrix or MVC instead of WebForms, you may want to be leveraging HTML elements instead of server-side controls so my sample code will demonstrate doing this with both HTML input elements (checkboxes) as well as ASP.NET CheckBox controls.

This requires two slightly different methods because of the way ASP.NET emits markup for the ASP.NET CheckBox controls.

Here is a screen shot :

Read the rest of this entry »

Replacing the ACT PagingBulletedList with the jQuery ListNav Plugin.

The Ajax Control Toolkit includes a control extender [ The Paging Bulleted List Control Extender ] that lets you create a list that the user can filter by clicking on an index indicator.

This can be very useful, especially when your list is very large.

The jQuery ListNav Plug-In lets you do this with any unordered list.

What’s more, since the list is a standard HTML element, we could dynamicaly add items to the list in our client side JavaScript code.

When you run my sample application the whole list looks like this :

Then when I click on the “B” in the navigation bar the list is reduced to only those items that begin with the letter “B”.

The code is long but simple:

Read the rest of this entry »

I recently received this email from an MSJoe blog reader.

Hi Joe, thanks for the posts about jquery..

 

I’m now wondering, we are using the ms ajax toolkit. I like the simple use of it. Now doing jquery you will have to write javascript, which will have the advantage that all cpu cycles are spend on the client side for rendering the validation controls (the toolkit does something on serverside first)

 

Do you see any advantage of doing the jquery way instead of the ajax toolkit? Or is it just releasing yourself from a dependency on the toolkit and the minimal extra rendering effort for the server with the toolkit?

 

Thanks,

With the senders permission, I thought it would be interesting to answer here, it’s a great question and one that I’ve received many times. .

To be clear, Microsoft continues to support the Ajax Control Toolkit. Support though, means bug fixes.

If the Ajax Control Toolkit works for you, you certainly can continue to use it. I certainly wouldn’t spend a bunch of time retrofitting pages that use the Ajax Control Toolkit if just to switch to jQuery.

But, in my opinion,  for new development there are a number of advantages to using jQuery.

Not the least of which is that the Ajax Control Toolkit is “frozen”. Not only will there be no new controls / extenders, but there are no feature enhancements planned for any of the controls. Most of the controls are “version one" at best. There will not be a version 2 (or even a version 1.1).

Even thought the ACT (Ajax Control Toolkit) is “Open Source”, folks have adopted it as a “Microsoft Product” and it hasn’t really enjoyed much up-take by community contributors.

Since it’s open source, you could modify or extend it yourself, but it’s a pretty big time investment to come up to speed.

jQuery, jQuery UI, and the plethora of jQuery Plug-Ins offer a great alternative, but not a seamless one.

While jQuery is new, frequently updated, rich and elegant, and has a vibrant active community who contributes new plugins every day, for the Classic ASP.NET Developer, there is a big perspective change to tackle.

jQuery is JavaScript. There is no server-side technology involved.

Many  “WebForms”  developers are new to JavaScript, CSS, and the DOM.

When you use jQuery for your ASP.NET User Interface, there are no “server-side” events for you to code against and no “server-side” properties either (like the user entered value of a text box).

In a WebForms application, basically all control events cause a form post-back.

Using jQuery (CSS and HTML) the UI elements run entirely on the CLIENT. When you need to execute code on the server (C#, VB.NET etc.) you have two options.

  1. Submit the complete form back o the server.
  2. Connect a JavaScript function to an event handler for the user interface element and make a JavaScript Ajax call back to a service method on the server.

That’s a pretty different model that the one WebForms developers are used to.

Apart from the above, what are the advantages of moving to this web application development model?

Well, I think there are several.

  1. The browser doesn’t have to be dumb. Browsers can run CODE, but when we don’t implement anything in JavaScript we haven’t federated any logic. Even though we have a powerful processor on the user’s computer where the browser is running, we’re not using any of that computer’s processing power. That means we’re consuming more resources on the server than we need to. This has a negative impact on your performance and scalability.
  2. A UI that responds to user input and executes logic, updates the user interface and interacts with the server without the user needing to wait for a page post back makes for a better User Experience.
  3. This type of experience is increasingly expected by web application users.
  4. JavaScript has become ubiquitous. Your JavaScript skills can be useful on the client, server and desktop.
  5. Everything is Open Source JavaScript so you can modify to your heart’s content.

Does that make sense ?

Cyra Richardson is a Principal Program Manager Lead in Microsoft’s Server & Tools On-Line group and is primarily responsible for driving the strategy for almost all of Microsoft Developer and ITPro community properties.

In this episode I talk with Cyra about the challenges and direction of Microsoft’s on-line communities. I once described Cyra as the most cerebral woman that I know and her long career at Microsoft coupled with her willingness to “rock the boat” makes her a frequent choice to tackle especially difficult issues at Microsoft.

Resources

Listen

Subscribe

MP3 WMA M4A Zune iPod

Download

3GP File
3GP
iPod File
iPod
MP4 File
MP4
MP3 File
MP3
M4A File
M4A
M4V File
M4V
PSP File
PSP
WMV File
WMV
ZIP File
Zip
WMA File
WMA
Zune File
Zune

Orchard 1.2 Released

Version 1.2 of Orchard is now officially available.

You can find the download and release notes here:

http://orchard.codeplex.com/releases/view/65184

This release is mainly about bug fixes and performance improvements, but it is also introducing a couple of nice features.

Creation date is now the date that we use for everything in the front-end, which should bring more consistency. That date can now be made editable on your content types by modifying the settings of the Common part.

Shapes are now much easier to use from the debugger thanks to our new debugger visualizers (available in full trust only).

For a list of bugs fixes that this release brings, please go to http://orchard.codeplex.com/workitem/list/advanced and leave everything to “All” except for the Release that should be set to “Orchard 1.2”.

Migration instructions can be found on this page: http://orchardproject.net/docs/Upgrading-a-site-to-a-new-version-of-Orchard.ashx. This page will soon be updated with a new set of instructions for Azure and in-place upgrades but the instructions found there should work for most of you.

Localization (available from http://orchardproject.net/localize) is not yet updated for 1.2 but will be soon.

Many thanks for supporting Orchard and for building a great community!

ASP.NET Dropdown Search with jQuery

The Ajax Control Toolkit includes a ListSearch [ see HERE ] control extender that can me used to extend a list or drop down list with a filtering feature by which the control will start to narrow the available options in the list to the ones that include the characters that the user has entered.

So when we use a drop down list for the selection of an item, and we enter (set focus) on the control, then the control expands. 

Then when we start to type, we want the list to hide items that do not contain the character sequence that we have typed.

I’ve implemented this feature using Unobtrusive Fast-filter Dropdown

Implementing this plugin (abbreviated UFD) with an ASP.NET DropDownList is easy.


<%@ Page Title='Home Page' Language='C#' MasterPageFile='~/Site.master' 
    AutoEventWireup='true' CodeFile='Default.aspx.cs' Inherits='_Default' %>

<asp:Content ID='HeaderContent' runat='server' 
                                ContentPlaceHolderID='HeadContent'>
    <link href='Content/themes/redmond/jquery-ui.css' rel='stylesheet'
                                                      type='text/css' />
    <link href='Styles/udf/ufd-base.css' rel='stylesheet' type='text/css' />
    <link href='Styles/udf/plain/plain.css' rel='stylesheet' 
                                            type='text/css' />
    <script src='Scripts/jquery-1.4.4.js' type='text/javascript'></script>
    <script src='Scripts/jquery-ui-1.8.13.js' type='text/javascript'></script>
    <script src='Scripts/jquery.ui.ufd.js' type='text/javascript'></script>
</asp:Content>
<asp:Content ID='BodyContent' runat='server' 
                              ContentPlaceHolderID='MainContent'>
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit 
        <a href='http://www.asp.net' title='ASP.NET Website'>www.asp.net</a>.
    </p>
    <p>
        You can also find 
        <a href='http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409'
            title='MSDN ASP.NET Docs'>documentation on ASP.NET at MSDN</a>.
    </p>
    <hr />

    <label for='SelectCountry'>Choose a country:</label><br /><br />
    
    <asp:DropDownList id='SelectCountry' name='SelectCountry' runat='server' 
                      ClientIDMode='Static'>
        <asp:ListItem Text='Afghanistan' Value='Afghanistan'></asp:ListItem>
        <asp:ListItem Text='Albania' Value='Albania'></asp:ListItem>
        <asp:ListItem Text='Algeria' Value='Algeria'></asp:ListItem>
        <asp:ListItem Text='Bahrain' Value='Bahrain'></asp:ListItem>
        <asp:ListItem Text='Bangladesh' Value='Bangladesh'></asp:ListItem>
        <asp:ListItem Text='Barbados' Value='Barbados'></asp:ListItem>
        <asp:ListItem Text='Cambodia' Value='Cambodia'></asp:ListItem>
        <asp:ListItem Text='Cameroon' Value='Cameroon'></asp:ListItem>
        <asp:ListItem Text='Canada' Value='Canada'></asp:ListItem>
    </asp:DropDownList>

    <br/>

    <script type='text/javascript' >
        $(function () {
            $('#SelectCountry').ufd({ log: true });
        });    
    </script>

</asp:Content>


You can garb the working example [ HERE ]


Bjorn Rettig is the Director of Microsoft Developer Guidance.

In this episode I talk with Bjorn about how he is growing and adapting Microsoft Developer Guidance to best meet Deverloper’s needs.

Listen

Subscribe

MP3 WMA M4A Zune iPod

Download

3GP File
3GP
iPod File
iPod
MP4 File
MP4
MP3 File
MP3
M4A File
M4A
M4V File
M4V
PSP File
PSP
WMV File
WMV
ZIP File
Zip
WMA File
WMA
Zune File
Zune