Craig Shoemaker

Integrating Infragistics Drag & Drop with jQuery and Microsoft Ajax Preview 6

craigshoemaker — Tue, 10 Nov 2009 21:15:00 GMT

The Concept

I created “Ugly Outfitters” to showcase the interaction between Infragistics Drag & Drop, jQuery and Microsoft Ajax Preview 6.

Why Ugly Outfitters? Well, I decided that rather than just dragging around some bland icons on the screen why not attempt to inject a little bit of humor into the process. Like I said... attempt ;)

If you want to jump right in take a look at this short video demonstrating the application with a quick overview of the code:

Note: Also available are higher quality versions of the video.

What follows is an excerpt of the discussion of what’s found in Ugly Outfitters. The best way to get acquainted with the details is always to download the code and review it’s design.

The Approach

The page is constructed to have a list of shirts on the top of the page, a list of pants along the bottom and a large “outfit designer” area to preview combinations. Along with the coupling of the garment images, when an image is dropped on the page the garment title and description are updated.

A typical approach of constructing a page like this is often to include a server-side repeater to generate the HTML required to list the shirt and pant images. Instead of explicitly rendering HTML for each list item, this page uses a series of client templates to create the thumb nail lists. The data for the page is served to the client in JSON arrays, rather than being embedded into blocks of HTML. Using the JSON arrays make coding interaction on the page easy as all the required data is available in a programmatically accessible format.

Variations

The sample is available in three different variations. The first sample uses the ASP.NET ScriptManager control to bring in the required scripts and leverages the code behind to render the JSON array to the page.

The second sample is exactly the same as the first except instead of using a ScriptManager, the JavaScript files are loaded into the page using the Microsoft Ajax Preview 6 Script Loader control. The Script Loader is used to bring in ASP.NET AJAX, the Client Templates, jQuery and the Infragistics Drag and Drop Framework.

The final variation extends the second sample, but removes the dependence on the code behind and is a static HTML file. Data is injected into the page by referencing a dynamic JavaScript file. This script file is added as a custom script and then loaded into the page using the Script Loader.

To read the full write-up including code samples, please check out: Integrating Infragistics Drag & Drop with jQuery and Microsoft Ajax Preview 6 on my Infragistics blog.

Serialize and Deserialize JSON

craigshoemaker — Fri, 06 Nov 2009 16:28:00 GMT

On one of the projects I am working on I needed a way to work get the JSON string generated from some sort of serialization process. If you are working Ajax or MVC controller actions, this work is done for you automatically, but I wanted the string all by itself. After some searching I ran across this article How to: Serialize and Deserialize JSON Data. The article is great, and gave me everything I needed to know, but I thought I would make it a little cleaner and wrap it all up in a class.

Below is the a generic class that will serialize and deserialize JSON:

using System.IO;
using System.Runtime.Serialization.Json;

public class JsonSerializer
{
    public JsonSerializer() { }

    public string Serialize(T instance)
    {
        using (MemoryStream stream = new MemoryStream())
        {
            DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(T));
            ser.WriteObject(stream, instance);
            stream.Position = 0;

            using (StreamReader rdr = new StreamReader(stream))
            {
                return rdr.ReadToEnd();
            }
        }
    }

    public T Deserialize(string json)
    {
        using (MemoryStream stream = new MemoryStream(System.Text.ASCIIEncoding.ASCII.GetBytes(json)))
        {
            DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(T));
            T result = (T)serializer.ReadObject(stream);
            return result;    
        }
    }
}

Update: For a more robust solution, Javier Lozano suggests checking out Json.NET

VM Workshop: Model View ViewModel (MVVM) and the Presentation Model Pattern in 5 UI Platforms

craigshoemaker — Tue, 03 Nov 2009 16:51:00 GMT

For some reason the family of design patterns that exist around the Model View Controller pattern seem to be an elusive band of characters. The first time I encountered Model View Controller I studied the text hard trying to understand how the Strategy, Observer and Composite patterns worked together to accomplish some goal that – try as I might - remained fuzzy. Somehow I have a sense that I am not alone.

Model View Controller (MVC) is the parent pattern to a number of contemporary patterns that seem to find a natural home in Microsoft development. Variations of MVC have appeared over the years in an attempt to work within the construct of modern event-driven programming models. One of most distinguishing differences among MVC and some of the derivative patterns is that with MVC the controller executes first, where with the other patterns the view tends to execute first and then delegates control to some sort of “presentation” class.

A few years ago I did a series on Model View Presenter (MVP) [Design Patterns Bootcamp: Model View * Patterns] in an attempt to discuss how to completely abstract away the user interface layer. MVP proves to be an effective pattern, but can be confusing to some with the heavy use of interfaces and events.

The recent popularity of XAML applications has brought focus to the Model View ViewModel (MVVM) pattern, which is technically a fine-tuned version of Presentation Model that takes advantage of .NET’s data binding framework. Further, the advent of ASP.NET MVC has created a strong push for some sort of presentation strategy into the realm of ASP.NET WebForms.

So this history lesson is great, but how do you do you write the code to implement the patterns?

Introducing VM Workshop

The VM Workshop is a simple reference application demonstrating the Model View ViewModel and Presentation Model pattern in a number of different UI platforms.

The project includes examples in:

Silverlight
WPF
WebForms
ASP.NET MVC
Ajax
WinForms

…and as an open source project, you are invited to help add examples of how to deal with a myriad of different UI use cases!

The purpose of the VM Workshop is to be a working programmer’s reference, not an exposition in pattern purity. Therefore you may see small details that may not fit the textbook definition of the patterns, but the point is to provide a template for effective pattern use. For instance there is an example in ASP.NET MVC is included in VM Workshop. Obviously the pattern being implemented is Model View Controller, but the construction of a “view model” class is still relevant in this context. While referring to ViewModel class in a ASP.NET application may be technically inappropriate, I use the term “view model” to interchangeably refer to a ViewModel or Presentation Model class for simplicity.

I recently messaged John Gossman, arguably one of the most visible proponent of MVVM, to ask whether or not MVVM is exclusive to XMAL applications or if the pattern may be applied to any UI platform. John replied saying:

I think the pattern is completely applicable to any UI technology. There are some details around the use of commands and data-binding that tend to be XAML specific, so I tend to use MVVM for the XAML version of the pattern and to keep from having religious wars with Patterns zealots. The more general pattern is called PresentationModel by Fowler. OTOH, one of the nice things is if you design your Model and ViewModel’s correctly you should be able to reuse them between XAML-based and other UI technologies.

VM Workshop is meant to be a learn-by-example project showcasing different styles of implementation.

Examples in C# and VB.NET

Often discussions surrounding design patterns tend to only be available in C#. In order to extend the conversation to as many developers as possible, I’ve include a VB.NET solution that operates in complete parity to the C# version. The only difference in the VB.NET version is that due to lack of lambda support some of the places AutoMapper is leveraged in the C# version are removed and objects are mapped manually.

A Grid, a Form and an Action

The initial example is provided for all the UI platforms. Each implementation features the same UI and workflow composition. First a grid is presented to the user:

Upon selecting an individual item, an edit form becomes available allowing the user make changes to the item:

Note: These screen shots here are taken from the WebForms sample, but the UI reflects the appropriate look for each of the respective UI technologies.

Once changes are complete, and the ‘Save' button is pressed, the persistence operation is initiated. After persistence is complete, each implementation tells the UI to how to response respond to the action.

Please note that true persistence is not implemented in VM Workshop. In an effort to avoid using a database (which keeps the code more portable) persistence functions are simply stubbed out in the code. In the end, the project includes the same messages that would be sent among the application layers in any real-world application.

Minimizing Code in the View

The motivation for using these patterns is often creating a more testable user interface layer, decoupling your application from UI technologies or perhaps to promote better application composition. No matter what the motivation, the overarching goal is to remove application logic from the view layer. The examples in VM Workshop use a number of general concepts to achieve a thin view.

Lazy Loading

The grids are populated through a lazy loaded property on the view model class. This ensures that the request for data is restricted to only the times when the data wasn’t previously prepared. Another benefit is that a call to somehow ‘get stuff’ is not required. When the grid binds to the 'Products' property the property’s implementation knows where to get the data if it doesn’t have it.

Visibility Properties

Visibility properties (in XAML implementations) or boolean properties on the view model classes are used to control whether or not controls, messages or other UI elements appear to the user. Binding the state of these properties to the appropriate elements on the screen relieves the view of having to decide what is shown to the user and what is hidden.

No Logical Operations

While taking great care to remove all logical operations from the view, even seemingly benign tasks such as casting input into primitive types is delegated to the view model or some other class for execution. Even simple operations like type casting can quickly cascade into a series of business rules. Consider how convoluted validation scenarios can become when the application is expecting a currency value, but is one way or another served a string. While the validation does have UI implications, this type of logic is best handled in a lower level than the view.

Presentation Objects and Data Transfer Objects

The use of presentation objects or data transfer objects, or DTOs, (I tend to flip between terms depending on my mood) is used to accomplish at least two goals:

Hide the domain model from the rest of the application. Concealing the full-fledged Products class from the view makes sure unnecessary pressure is not exerted on the model to mutate at the whim of the view.
Make custom mapping the responsibility of the type. The presentation object’s job is to prepare the data coming from the domain model into a form that is natural to the view. This mapping or conversion responsibility is best placed in the hands of the presentation object and not within the procedure of an operation.

Get Acquainted

Check out the video that will get you oriented with VM Workshop:

Get Involved

The code for VM Workshop is available on CodePlex and you are encouraged to submit your implementations into the workshop!

Resources

VM Workshop uses nBuilder create data objects and AutoMapper for DTO to domain object mapping.

Thanks

Thanks to Infragistics for providing the time to develop the VM Workshop.

ASP.NET AJAX Preview 6 with Stephen Walther

craigshoemaker — Mon, 02 Nov 2009 23:12:00 GMT

Stephen Walther, Microsoft Product Manager for ASP.NET AJAX, joins the show to discuss the recent advancements in the AJAX toolset found in Preview 6. Listen or download below!

Full Speed:	download
Fast Version:	download

Just about all the details discussed in our conversation are available from the following links:

A Changed Landscape: ASP.NET AJAX

If you are in the Southern California area and would like to see some of the latest AJAX bits in action I am giving my talk to the following user groups:

Magic, Mind-Controlled Interfaces and What Makes an Experience Architect

craigshoemaker — Wed, 14 Oct 2009 17:13:00 GMT

Rick Barraza returns to Pixel8 to discuss magic, storytelling, mind control interfaces and even a little development! According to Rick, true experience design mixes elements you may not automatically attribute to software design. Using these unexpected elements along with the tried-and-true principals of user interface design, usability and information design help you craft polished experiences.

Rick explores the concepts of what it takes to turn raw technology into something compelling for end users and accessible for busy developers. He uses two of his research projects as object lessons for these concepts.

Project Maestro

A working example of the final product of an experience architect’s work is embodied in the Maestro Project. If you are a long time follower of Pixel8, you’ll remember our interview highlighting Maestro: 8 Days, 1 Dev = MS Surface *Minority Report* Style in WPF. If you have yet so see this video, please take the time - it is a half hour very well spent!

The initial work conducted by Johnny Chung Lee and Brian Peek created the foundation for Maestro, but the additions of a simple WPF layout and the use of some familiar gloves gave Maestro the hook to be truly compelling.

Emotiv Thought Control Demo

The Emotiv thought control device is an input device that allows the user to provide input data using while using their thoughts exclusively. Much like voice recognition input the thought “reader” must first be trained to the user to establish a baseline of brain activity. Once this baseline is established then changes in brain activity are read and recognized by the hardware eventually translating to events that may be programmatically handled.

One of the first demonstrations to appear on the web of such a device is the Emotiv Stonehenge Demo.

While technically sufficient, Rick saw and opportunity to improve on the experience using the input device while creating a much more compelling demonstration of the technology. Check out Rick's take on conducting the same type of demonstration:

The key to this execution is the use of a pixel shader effect. When Rick first started to give this demonstration some observers were dubious. Were the transitions timed? Did Rick have a Wii controller hidden somewhere? The addition of a warp effect as a transition between photos echoed the same effects moviegoers are conditioned to see when space and time are manipulated with one’s mind finally produced a believable result.

Because everyone knows that when you control matter with your mind the result is a rippled environment ;)

‘Hollywood Draws First Blood’

Rick establishes the concept that Hollywood has created visual cues for thought control, so preserving them helps make the experience more enjoyable and understandable. The real-world technology may be new, but the concept is often simulated in the movies and on TV where storytellers have set expectations on what the experience might be like in real life.

A perfect everyday example of this concept is found on the iPhone. When you snap a picture, what do you hear? That shutter sound is not only unnecessary, but in a sense it is a lie told to the user. There is no exposing film or shutter in a digital camera! It’s the addition of this familiar sound, however that gives users a recognizable source of feedback to know when the picture taking is complete.

Support or Reject Assumptions?

So the question remains, should you support false assumptions? Should you tell these little lies? Perhaps for a while general affordances in user design are possible by embracing these assumptions, while striving to change them as the product evolves.

The Prestige

Finally Rick discusses how the movie ‘The Prestige’ is an excellent metaphor of the aspirations of an experience architect.

15 Desktop Backgrounds to Support .NET Development (and pay homage to the Gu)

craigshoemaker — Tue, 06 Oct 2009 14:00:00 GMT

Update: I created a Windows 7 theme pack with all of these backgrounds. You can download it here.

This weekend was one of those times I just couldn't get “that thing” out of my head. After a short conversation on Twitter earlier in the week about desktop backgrounds I kept thinking about how much fun it would be to just sit down and do some design work.

The rubber hit the road after being inspired by the Smashing Magazine’s themed desktop wallpapers. Then it hit me - how about a series of desktop wallpapers themed toward the .NET developer – and who better to represent the community than ScottGu!

So, with all apologies to Mr. Guthrie here are my backgrounds for your pleasure:

So, which one is your favorite?

If you decide to use one, I’d love to know! You can send a reply to @craigshoemaker on Twitter, and you can even use the #showmeyourdesktop hash tag if you like.

Bonus Backgrounds

This all got started as I was creating Wandering Lights and Overkill, if you want to check out some non-Gu backgrounds ;)

Updated Video for ‘Using Firebug and jQuery’ Post

craigshoemaker — Fri, 18 Sep 2009 21:41:51 GMT

Dave Ward and I recently recorded a video demonstrating Dave’s techniques for quickly working with jQuery on any webpage. Dave does a great job quickly showing you how you can work with tools like jQuerify and SelectorGadget to easily prototype functionality and work with the host of jQuery features.

Unfortunately the original video source was a little distorted so the final compressed video suffered even further. To better the viewing experience, we decided to record the video and fix the production issues.

You can watch the video in the following ways:

On YouTube (make sure to click the HQ or High Quality button in the player)
Download the original WMV
Watch in the embedded player below

Enjoy!

Expression Blend Design Time Data Using MVVM

craigshoemaker — Tue, 11 Aug 2009 22:12:00 GMT

Today’s show features Microsoft MVP and Identity Mine integrator Laurent Bugnion. Laurent discusses his experience with working in XAML applications that use MVVM and working with developers and designers to create beautiful applications.

Full Speed:	download
Fast Version:	download

The interview includes the following topics:

Origins of MVVM
Advantages of using Blend
Role of integrator
Providing design time data to Blend with MVVM includes the answers to these questions:

Who prepares the data?
What are the mechanics that Blend uses to display design time data?
Where does the data live in the program?
How is the data provided to Blend?

Ways to overcome paint points in Blend

Applications must pass the “Blendability” test

Failure is often dictated by poorly abstracted dependencies on databases, services etc.

Test often in Blend

Resources

The following links are resources mentioned in the show:

Using Firebug and jQuery

craigshoemaker — Tue, 04 Aug 2009 18:54:00 GMT

A recent episode of the Polymorphic Podcast includes jQuery Secrets with Dave Ward. During our discussion Dave mentioned some techniques and tools to use alongside Firebug and jQuery. After our interview we got together again to record this video that demonstrates:

How to install Firebug
Firebug basics
How to inject jQuery into just about any page using jQuerify
Building selectors with SelectorGadget
How to interactively manipulate pages on the fly

Dave is a powerhouse of knowledge and experience in this area – enjoy the video!

Update: Dave and I re-recorded the video and made it available in higher-quality formats. Check out Updated Video for ‘Using Firebug and jQuery’ Post for details.

Professional Activity August 2008 to Date

craigshoemaker — Fri, 24 Jul 2009 16:36:00 GMT

Every year around this time I turn my attention to what I’ve done over the past year in order to update my MVP profile. While the engine Microsoft provides has many ways to list accomplishments and activities, I’ve always had a difficult time trying to find the right way to list my activities over the year.

Often at the end of the year bloggers will list links to the “greatest hits” posts for readers to review. I thought I’d turn it up a notch. The following links represent just about everything I’ve done from August 2008 to date.

Hopefully you’ll find something fun or valuable below that you may have missed this last year :)

Podcast Episodes

Polymorphic Podcast

Pixel8

Video Interviews

Screencasts

eBook

Secrets of Real World Dynamic Data Websites, Wrox, March 2009, 34 pages

Presentations

Secrets of Real World Dynamic Data Websites
- Southern California Code Camp, 1/09
- Orange County .NET User Group, 9/08
- Los Angeles .NET User Group, 11/08
- San Diego .NET User Group, 1/09

Blogs

ASP.NET Blog

Infragistics Blog: (excludes cross-posted items from above)

Articles

Forums

Occasional contribution to the Infragistics support forums

Twitter

You can always find me on Twitter too ;)

7 Dos and Don'ts in Getting Started in User Centered Design

craigshoemaker — Tue, 23 Jun 2009 22:47:00 GMT

This week’s Pixel8 episode continues the series of user experience fundamentals with Dr. Tobias Komischke Director of User Experience at Infragistics. Tobias shares seven user-centered design concepts and the associated “dos” and “don’ts” with each point.

1: Orientation

Try to answer the three fundamental questions for every screen:
- Where am I?
- Where have I come from?
- What's next?
Employ UI patterns (often implemented by controls) to answer these questions
- Bread crumb and outlook bars do an excellent job of orienting a user

Don’t

Provide a blank context for a screen

2: Visual Attention

Group items that go together
Make important elements stick out using size and color
Use relative white space as a way to draw attention

Don’t

Give all visual elements the same “weight” in size and color
Use motion or animation unless you have a good reason to do so

3: Visual Structure and Flow

Think about how people consume visual information (often top to bottom and left to right)
Provide visual clues to guide users what to look at first, next and so on
Place controls that finalize actions at the end of the flow
Pay attention to consistent alignment
Try to adhere to established conventions

Don’t

Add components to a screen simply because there is space to fill
Place submit buttons at the top of a form - we’re looking at you, SharePoint :)
Require users add in un-necessary data

4: Scrolling & Paging

Employ paging when data is 3x or more larger than the available view area
Give ways for users to jump to specific pages when dealing with a lot of data

Don’t

Scroll horizontally unless you absolutely must
Scroll endlessly

5: Text

Vary font sizes to bring attention to important text
Choose font sizes that people can read

Don’t

Select text colors that are hard to read
Use text when it obstructs the meaning or a function of an operation – consider using an icon

6: Icons

Use icons to save screen real estate
Provide a legend to explain meaning of icons
Define tool tips to give context and meaning to icons

Don’t

Use icons to represent complicated concepts
Use icons inconsistently throughout the application

7: Graphs

Bar charts when possible
- Research indicates bar charts are easiest to interpret as the X axis doesn’t convey meaning relative to the value
Label chart scales
Use appropriate scale values

Don’t

Rely solely on ability of the user to interpret volumes
- For example, 3D pie charts may prove difficult to understand as volumes are difficult for users to rate

Reference Books

In the interview Tobias mentions a number of books that you may find useful when building data visualization screens:

jQuery Secrets with Dave Ward

craigshoemaker — Mon, 22 Jun 2009 13:53:00 GMT

Dave Ward specializes in writing about ASP.NET, jQuery and ASP.NET AJAX. He is a contributing author to ASP.NET Ajax in Action, Second Edition from Manning, Nerd Dinner’s JavaScript secret weapon, listed on the Programming homepage of Alltop and newly inducted ASP Insider.

Full Speed:	download
Fast Version:	download

Note: Be sure to check out the Fast Feed if your are looking for the same content in 3/4ths the time!

What is jQuery?

The jQuery movement is seemingly everywhere, but if you still remain curious what jQuery is, Rick Strahl has an excellent introduction to library here: An Introduction to jQuery.

The jQuery Wikipedia page tells us that jQuery contains the following features:

DOM element selections using the cross-browser open source selector engine Sizzle, a spin-off out of jQuery project

DOM traversal and modification (including support for CSS 1-3 and basic XPath)

Events

CSS manipulation

Effects and animations

Ajax

Extensibility

Utilities - such as browser version and the each function.

JavaScript Plugins

Dave’s jQuery Tips for Web Developers

Learn the selectors -they are crucial!
- :even and :odd – zebra striping is the classic example
- :not – Powerful when using classes as flags.
- :text – Often overlooked. Easier/cleaner than ‘input[type=text]’.
- attribute$=ID – One way to overcome the ClientID issue. (Be careful about performance)
Leverage CSS classes instead of element IDs
- Avoids the ClientID issue
- Good for selecting groups, like GridView rows.
Look for plugins before reinventing the wheel
- jQueryUI covers the basics
- plugins.jQuery.com for more
Conversely, be sure you need a plugin
- Classic example is using an accordion when slideToggle is all you really needed.
- Similarly, a lot of people don’t realize they can use $.each()
Don’t be afraid to use fake CSS classes as “flags”
- Blackjack game example: .card.flipped and .card:not(.flipped)
Write Unobtrusive JavaScript
- ASP.NET conditioned us to think OnClientClient and Attributes.Add is proper, but wiring up unobtrusive event handlers is much cleaner and more maintainable
  - $(‘#element’).click() is the same as $addHandler($get(‘element’), ‘click’) in ASP.NET AJAX
- Anonymous functions are the norm in most jQuery code examples. Nothing to be scared of. More syntactical sugar than anything
Use Firebug
- The inspect and console help you learn faster
- IE8’s developer toolbar works pretty well too
Take advantage Bookmarklets
- jQueryify – inject jQuery into any page, for testing through Firebug
- SelectorGadget – Very helpful for learning selectors interactively
Minify and Combine your scripts
- When using many plugins, you’ll end up with the same “bloat” that is often associated with ASP.NET AJAX (due to the Toolkit, not the base library)
- Read Automatically minify and combine JavaScript in Visual Studio
Boost Serving Time
- Use the Google hosted version of jQuery for public facing sites
Take advantage of JavaScript IntelliSense
- Get the jQuery vsdoc file
- Read Jeff King’s great FAQ detailing how common issues when configuring JavaScript IntelliSense
- If all else fails, just /// <reference path=”~/path/to/jquery-1.3.2.vsdoc” /> in a JS include

Other Resources Mentioned in the Show

New Features in ASP.NET 4 AJAX
Why ASP.NET AJAX UpdatePanels are dangerous
Controlling HTML in ASP.NET WebForms
jQuery 1.3.2 Cheat Sheet
dotnetIQ: Learn .NET on your iPhone
Polymorphic Podcast FastFeed
JsMag is offering a discount (listen to the show for the coupon code!)

NetAdvantage ASP.NET in ASP.NET MVC

craigshoemaker — Thu, 11 Jun 2009 17:01:00 GMT

When I reported for Infragistics booth duty at TechEd 2009 the first person to walk up to me smiled and said, “So... what do you guys have for MVC?” Now I am pleased to announce I can do more than smile back.

The following is a set guidance for working with the Infragistics NetAdvantage ASP.NET toolset in ASP.NET MVC. This guidance comes with articles (this being the first of many), how-to videos, a support forum, a downloadable sample application and a live version of the sample in the Infragistics Labs.

To be clear this is not a set of new controls created for MVC. The example you see here, in the videos and the sample application were built using the NetAdvantage ASP.NET 2009 Vol. 1 release of the toolset. What we are making available includes samples, guidance and a new control that helps decouple our server controls from WebForms dependencies.

As long as you focus on areas of the controls that do not initiate post backs or rely on ViewState, you soon find many behaviors and functions that work perfectly in an ASP.NET MVC application.

As what is presented here is the meeting of two widely different architectures, we encourage and look forward to you feedback and suggestions. Please feel free to tell us how our existing controls may work better in MVC as well as ideas for new controls to more naturally fit the MVC approach.

Respecting the Culture While Keeping it Real

Simply put - server controls were never supposed to work in the MVC framework. In fact, some might consider it a bit of an unholy union to have declarative WebForms markup in a view page. While you can’t help but respect the spirit of these perspectives, sometimes there are exceptions.

We recognize that there are many thousands of existing Infragistics customers who may want to use ASP.NET MVC. These developers want to get the most out of their investment by using the toolset wherever possible, regardless of the type of application they are building. Therefore Infragistics is extending the reach of our traditional toolset while looking toward the future of building some new controls that do not rely on ViewState or post backs.

Brace yourself - the examples that follow include ASPX markup in the view. The markup is necessary to host WebForms controls in MVC, but the purpose is limited. The purpose of this code serves to merely instantiate the UI objects on the page. What you do not see are big blocks of logic in the UI – separation of concerns is preserved.

In the end what the markup is fulfilling an equivalent role of HtmlHelper extension methods.

Hello World

To get you acquainted with what’s involved, consider a page that has an instance of the WebDataGrid that renders a list of contacts to the user.

View Model

This class simply models the data that the view page needs to render correctly. A list of Person types is expected in the People property.

public class WdgBasicView
{
    public IList People { get; set; }
}

Controller

The controller creates a new instance of the view model and fills the object with the appropriate data objects.

public class WdgController : Controller
{
    public ActionResult Index()
    {
        var vm = new WdgBasicView();
        vm.People = FakeRepository.Create().Add(10).GetAll();
        return View(vm);
    }
}

View

The markup for the WebDataGrid is just like what you are accustomed to find in a WebForms page. Having this markup on the page gives you the flexibility to easily change the appearance and behavior of the control.

Notice the declaration of the IGMvcScriptManager control. This control is responsible for interrogating any Infragistics controls on the page for the script references the ASP.NET AJAX ScriptManager would normally generate. The script references are then generated and emitted to the page. This control must be placed after any Infragistics controls in the markup so the controls are available in the DOM by the time the references are rendered.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcTest.Models.WdgBasicView>" %>
<%@ Register Assembly="Infragistics.Web.Mvc" Namespace="Infragistics.Web.Mvc" TagPrefix="cc1" %>
<%@ Register Assembly="Infragistics35.Web.v9.1, Version=9.1.20091.1015, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
    Namespace="Infragistics.Web.UI.GridControls" TagPrefix="ig" %>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <%
        wdg.DataSource = this.Model.People;
        wdg.DataBind();
    %>

    <ig:WebDataGrid ID="wdg" 
        runat="server" Width="50%" 
        EnableViewState="false">
    </ig:WebDataGrid>
    
    <cc1:IGMvcScriptManager ID="sm" runat="server" />
    
</asp:Content>

Adding Behavior

While the grid produced above is interesting, the real benefit comes when you begin to add some of the behaviors of the grid. Adjust the markup slightly by adding the following behaviors, and now your users may interact with individual grid cells on the client and adjust the column width.

<ig:WebDataGrid ID="wdg"
    runat="server" Width="50%"
    EnableViewState="false">
    <Behaviors>
        <ig:ColumnResizing />
        <ig:Activation />
    </Behaviors>
</ig:WebDataGrid>

Watch the Video

This above sample is implemented in this video.

The Next Step: Issue Tracker Sample Application

To go beyond the simplicity of the Hello World sample above, we’ve created a sample issue tracker application that brings together a number of the Infragistics controls with ASP.NET MVC.

You may get acquainted with the sample in the following ways:

The first page you encounter is the Issue List page. The WebDataGrid is responsible for rendering the table, and the WebChart control creates the pie graph visualizing the Issue Severity data.

To add issues to the list, the New Issue page features the WebDropDown, WebHTMLEditor and WebSlider controls.

The drop down has a list of the Issue Types available to the user. These types are presented in the drop down with a custom item template.

The Issue Types are maintained on a page that include the WebDataGrid with the RowEditTemplate enabled.

By double-clicking on the left-most column of the grid you have access to the grid’s data for editing.

By clicking on the Add button, the same template is made available to add items to the list.

For a more in-depth code review of the sample application watch the video on the Infragistics Community Site: Issue Tracker Sample: Using the WebClient Controls in ASP.NET MVC.

Support and Testing

There is no official support through the Infragistics Developer Support for the toolset in MVC at this time. We do, however, have a new support forum available for your questions surrounding NetAdvantage for ASP.NET in ASP.NET MVC.

Let Us Know

Please let us know what you think! Leave comments here, email me at cshoemaker [at] infragistics.com, or find any other to get in contact with us. We want to know about your experiences with this approach as well as your suggestions for new controls that more naturally fit the MVC model.

Resources

Surprising Ajax Adoption Stats

craigshoemaker — Mon, 25 May 2009 14:52:00 GMT

My friend Simone Chiaretta is hosting a short poll looking to find out what type of Ajax adoption exists and what client frameworks and tools you use.

He has an interesting post on some of the preliminary results. According to his sample 8% of people are still hand-crafting Ajax calls! (Now there's one that took me by surprise)

Make your voice heard and take his super-short survey here:

http://www.zoomerang.com/Survey/survey-intro.zgi?p=WEB22973CYKW2H

AutoMapper with Jimmy Bogard

craigshoemaker — Wed, 20 May 2009 17:49:00 GMT

Jimmy Bogard, lead developer for the AutoMapper project, joins us today to discuss the inner workings and applications of the object-to-object mapper AutoMapper.

AutoMapper is an object-to-object mapper that helps you prepare objects to cross application boundaries.You can get examples and documentation on Jimmy’s post that introduces AutoMapper.

Resources

Here are some further resources to help you get started with AutoMapper:

DimeCast: Introduction to AutoMapper
Official project home: www.codeplex.com/AutoMapper
AutoMapper and IoC

Tribute

If you wish to stick around after the end of the show I’ve included a special tribute to my friend Monica Rodriguez. Monica is the wife of Sol Rodriguez who’s band Greenleaf Avenue provides bumper music for the show. Her battle with cancer recently ended and I wanted to do something special to honor her. If you would like to read her story and send some encouragement to Sol, please check out www.solandmonica.com.

Craig Shoemaker

Integrating Infragistics Drag & Drop with jQuery and Microsoft Ajax Preview 6

The Concept

The Approach

Variations

Serialize and Deserialize JSON

VM Workshop: Model View ViewModel (MVVM) and the Presentation Model Pattern in 5 UI Platforms

Introducing VM Workshop

Examples in C# and VB.NET

A Grid, a Form and an Action

Minimizing Code in the View

Lazy Loading

Visibility Properties

No Logical Operations

Presentation Objects and Data Transfer Objects

Get Acquainted

Get Involved

Resources

Thanks

ASP.NET AJAX Preview 6 with Stephen Walther

A Changed Landscape: ASP.NET AJAX

Magic, Mind-Controlled Interfaces and What Makes an Experience Architect

Project Maestro

Emotiv Thought Control Demo

‘Hollywood Draws First Blood’

Support or Reject Assumptions?

The Prestige

15 Desktop Backgrounds to Support .NET Development (and pay homage to the Gu)

Morning

Priceless

Minimum Speed

Caution

Population

Calligraphy

Granny

Bird

Bubbles

Brilliant

Base

Hello

Rated Gu

Your Father

May the Gu

Bonus Backgrounds

Updated Video for ‘Using Firebug and jQuery’ Post

Expression Blend Design Time Data Using MVVM

Resources

Using Firebug and jQuery

Professional Activity August 2008 to Date

Podcast Episodes

Video Interviews

Screencasts

eBook

Presentations

Blogs

Articles

Forums

Twitter

7 Dos and Don'ts in Getting Started in User Centered Design

1: Orientation

2: Visual Attention

3: Visual Structure and Flow

4: Scrolling & Paging

5: Text

6: Icons

7: Graphs

Reference Books

jQuery Secrets with Dave Ward

What is jQuery?

Dave’s jQuery Tips for Web Developers

Other Resources Mentioned in the Show

NetAdvantage ASP.NET in ASP.NET MVC

Respecting the Culture While Keeping it Real

Hello World

View Model

Controller

View

Adding Behavior

Watch the Video

The Next Step: Issue Tracker Sample Application