Craig Shoemaker : ASP.NET

Lazy Loading JavaScript Files Using ASP.NET AJAX Script Loader

craigshoemaker — Wed, 09 Dec 2009 22:12:00 GMT

The ASP.NET AJAX Script Loader control will make your life easier. Gone are the days where you have to include a multi-line block of script includes on every web page. Gone are the days of double checking to make sure your script files are included in the right order. Now with the appropriate use of the Script Loader’s require function gone are the days of having to load scripts on your page whether you need them or not.

Since the Script Loader control programmatically loads scripts into the browser you get imperative control of when and where scripts are loaded. Consider a page that will only load the dataView scripts on to the page when a user tries to access an area of the page where an ASP.NET AJAX client template is used to display the data. The following code demonstrates how to accomplish this task.

Note: Make sure to see it in action by checking out the live working copy!

Script

<script src="http://weblogs.asp.net/Scripts/MicrosoftAjax/start.js" type="text/javascript"></script>
<script type="text/javascript">

Sys.require(Sys.scripts.ComponentModel);

Sys.onReady(function()
{
    Sys.addHandler($get("bindButton"), "click", function()
    {
        $get("bindButton").disabled = true;
        Sys.require([Sys.components.dataView], function()
        {
            Sys.create.dataView("#dv", { data: colors });
        });
    });
});

var colors = [
   { Name: "Black" },
   { Name: "Blue" },
   { Name: "White" },
   { Name: "Green" }
];
</script>

Markup

<input type="button" value="Get Colors" id="bindButton" name="bindButton" />
<ul id="dv" class="sys-template">
    <li>{{Name}}</li>
</ul>

Special thanks to Julian Dominguez (@juliandominguez) for helping me work out a few kinks in the first iteration of this code :)

Presentation: ASP.NET AJAX 4 at Inland Empire .NET User Group

craigshoemaker — Wed, 09 Dec 2009 02:30:00 GMT

Thanks to everyone who came to my ASP.NET AJAX 4 talk at the Inland Empire .NET User Group. Special thanks to James Johnson (@latringo) for organizing such a great group!

Here is the code download for the talk: ASPNETClientTemplates.zip

ASP.NET Simplicity and Performance with Scott Hunter

craigshoemaker — Fri, 04 Dec 2009 16:28:00 GMT

On this episode of Pixel8 Scott Hunter (@coolsch) joins us to discuss his team’s focus on simplicity and performance in ASP.NET. Scott was kind enough to surprise me with some talking points about what his team is thinking about for releases coming after ASP.NET 4! Please note, what’s discussed herein are un-implemented features of ASP.NET so your feedback is not only welcome, but encouraged!

Subscribe to the podcast!

Velocity Provider for Caching: This will allow developers to plug in caching scenarios based on their needs.
Automatic Generation of CSS Sprites: Adding images to the Content folder will trigger the ASP.NET framework to stitch together a single image which is later sliced up by inline styles. A helper method is responsible for generating markup of the appropriate CSS coordinates to wire-up the sprite. This feature will allow for groups so related images may be combined together.
Complex Helpers: There are scores of common features and functionality that many developers want to include in their applications, but unfortunately right now these features require a lot of code to implement. In the future you may have helpers available that provide a simple API to do the following:
- Resize images
- Watermark images
- Flip images
- Send Email - helpers for single method calls to send and mail or verify an address [ex: Email.Send() or Email.VerifyAddress()]
- Schedule Tasks - submit tasks to a background worker process (wouldn’t take down app domain if exception occurred)
- Posting status updates to Facebook, Twitter, etc.
- Polls
- Ratings
- Comments
- OpenID integration
* Many of these features will likely be released outside the formal ASP.NET framework
Data Simplicity: Active record implementation that features a code-first approach. Consider a blank database with no tables. The active record pattern would allow you to instantiate the Foo class and then add values to Foo.Bar1 and Foo.Bar2, then call Foo.Save(). If the Foo table does not exist in the database, then the table is created and the data is persisted. Also Foo.All() would return all the records of Foo, but the return type is an IQueryable so you could further filter on the server. The code-first won’t be the only direction the integration will work. Changes in the database can be reflected in the model by use of T4 templates.

Note: I ask the requisite question about the virtues of the repository pattern as opposed to active record. Scott demonstrates how the implementation they are considering would not hinder you from exposing your own DTOs and wrapping a repository around the active record objects.

Also make sure you check out my post 12 Ways to Simplify ASP.NET and Visual Studio I wrote after being inspired by this interview!

12 Ways to Simplify ASP.NET and Visual Studio

craigshoemaker — Fri, 04 Dec 2009 14:42:00 GMT

While at PDC this year I had an opportunity to interview a number of smart and engaging people. One of my guests was Scott Hunter (@coolcsh) who these days is responsible for WebForms, ASP.NET Data and seemingly much more. To my surprise Scott wanted to talk about what is coming after ASP.NET 4!

Taking a step back and looking at ASP.NET, tooling, data and the entire experience of working with the .NET stack Scott’s team and other groups in Microsoft are turning their attention to a single concept…

Simplicity

While I will refer you to the Pixel8 podcast, ASP.NET Simplicity and Performance with Scott Hunter, to hear the details about ideas his team is entertaining to make ASP.NET easer and perform even faster, I thought I would throw in my two cents as well. The following is my wish list of twelve improvements to ASP.NET and Visual Studio that would undoubtedly make development faster and easier.

1: Overload the DataBind Method

How often have you worked with data bound control and wrote code like this:

protected void Page_Load(object sender, EventArgs e)
{
  this.grid.DataSource = foo;
  this.grid.DataBind();
}

Wouldn’t it be simpler if you could just call the DataBind method and pass in the data source?

You can do this easily today by implementing an extension method as I did here, but it would be nice to have this as a first-class feature of the BaseDataBoundControl class.

2: Implement IsFirstRequest Property

The whole notion of the IsPostBack property always seemed a bit awkward to me. More often than not you are using this property to evaluate it’s negative state – in other words trying to figure out if the page is running under the context of the first request. I suggest the addition of a property that is no more than the reverse of IsPostBack:

It’s a small thing, but I think it makes code a little cleaner to read.

3: Implement Application Name

Often developers need a way to display the application name to users. While setting up a globally-scoped class to handle this task is trivial, but it would be nice if there was a “Name” property off the page’s locally scoped Application property:

The value for this property would likely be saved in the web.config or Global.asax. Adding this feature may also help sort out a common problem that arises in using the membership provider when developers forget to define an application name. Visual Studio could auto fill this value with the “application name” from the create project wizard and then allow an override at any time.

4: Option to Categorize IntelliSense Members

Ever wanted to tap into an event of an object, but weren’t sure what the event name was? Ever wanted to know just what an object methods were while trying to learn a new API? What about trying to find out if there is a property for X? IntelliSense is an invaluable tool in it’s current form and Visual Studio 2010 adds some needed filtering behaviors for C#, but we can do even better.

It would be nice if IntelliSense had a way to display members in a categorical format:

Obviously this isn’t a feature you would want enabled at all times, but it would make working with new APIs much easier.

5: Bring XAML Data Binding Syntax to ASP.NET

David Fowler (@davidfowl) has been churning out some amazing blog posts all around the topic of data binding in ASP.NET. One of his recent posts included an exposition of DataBinding 3.0. Basically the latest iteration of data binding brings the XAML syntax to ASP.NET data binding.

This addition makes life easier because then you don’t have to worry about when you use the Bind or Eval syntax. Plus making a homogenous binding syntax among WPF, Silverlight, ASP.NET AJAX and ASP.NET WebForms makes working with the controls a natural task regardless of the platform you are working.

6: Parameter Attributes

When working with QueryString parameters requires some repetitious boilerplate code. Consider the following listing, which you have probably written thousands of times:

private string UserName
{
  get
  {
    if(Request.QueryString["userName"] != null)
    {
      return Request.QueryString["userName"].ToString();
    }
    return string.Empty;
  }
}

How much simpler would it be if you could just decorate the property with an attribute and the retrieval code is implemented automatically?

This approach doesn’t have to stop with the query string either. The same types of attributes may be available for :

QueryString
Form Elements
Context Items
Session
Cache
Cookies

7: WebForms Model Binders

One of the features that I immediately fell in love with from the ASP.NET MVC framework was model binders. With the updates to ASP.NET 4 granting total control over the client IDs of server controls, now WebForms needs model binders!

The pages could be strongly typed like MVC strongly typed views, or the designer could interrogate the control hierarchy and build the view model on the fly. Obviously we’d also need some hooks to tap into the flow to implement custom bindings too.

8: JavaScript Model Binders

Just as the server can benefit from automatic mapping of input controls to a model object, Ajax scenarios could be greatly simplified if there was a function to run on the client that automatically created a JSON object with all input values.

Consider a form like this:

With markup like this:

A model, or DTO if you like, could easily be constructed by querying the form and building the object from input elements.

There could even be special rules for certain controls like a select list. Sending the selected index, text and value as a group for the single control should provide all the information necessary to consuming resource.

9: Select the Location of ViewState

While ASP.NET 4 makes great strides to trim down a page’s ViewState it would still be nice to have explicit control over where the ViewState is rendered on the page. I’d love to see a server control that allows you to place the ViewState containers at a location of your choosing:

Now more times than not the best approach is to simply move ViewState to the bottom of the page, but having explicit control of the placement seems like the best scenario.

10: Disabling the Post Back Button

The ASP.NET runtime will not recognize a post back initiated by a disabled button so developers have had to concoct some clever ways to protect users from themselves. It would be nice if ASP.NET had a way to reliably disable post back buttons out-of-the-box.

11: Implement ASP.NET Configuration Console as Portable Area

Eric Hexter (@ehexter) recently blogged about the concept of a “portable area” where you can compile single controls controls or even up to entire workflows into an assembly to later include in an ASP.NET MVC or WinForms application. This approach is perfect for implementing the ASP.NET configuration UI generated by Visual Studio.

The portable area approach would decouple the screens from the layout seen in this screenshot and allow the pages to reflect the layout of your website. This feature would be perfect for exposing the membership functionality to admins, power users or even just the development team.

12: Script-Based Post Backs

On occasion when working with WebForms under the traditional post back model you may need to implement a JavaScript function that initiates a post back. Right now, the approach for executing this a hack at best. One the best ways I have seen to accomplish this is to add a LinkButton to the page and hide it from the user using CSS. Then you can view source on the page and use the __doPostBack call the LinkButton was using in your custom script – like I said real hacky :)

It would make life much simpler for the times when this functionality is required to have a method off the Sys namespace (or wherever appropriate) that posts back a WebForm. This is how it could look:

Passing a string into the function would tell the page which handler to map to in the page event lifecycle.

So there you have it. These are some of my ideas about how to make ASP.NET and Visual Studio simpler to use. Now tell me, what are yours?

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.

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:

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

Exploring ASP.NET MVC 1.0

craigshoemaker — Wed, 29 Apr 2009 15:20:00 GMT

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

Our Guests

Join Jeffrey Palermo and Eric Hexter as they discuss the release version of ASP.NET MVC and some practical examples real-world development.

Action Filters

Action filters are extensibility points into the lifecycle of a controller request. There are many great resources that show how to use action filters:

... and the following is a list of the interfaces you can leverage to tap into the requests:

Action Selectors

Another way to gain control over a request is to pipe into action selectors. This gives you control to decide if an which HTTP verbs an action accepts. For more information on configuring action selectors, check out the following posts:

Pain Points? We Don't Have no Stinkin' Pain Points!

When I asked Jeffery and Eric what the remaining pain points of ASP.NET MVC were, I got a surprising response – none. Since the framework is interface-based
top-to-bottom features are pluggable at every level. If the framework doesn't provide something needed - you may extend any portion of framework when necessary.

After being pushed, Eric did mention that he would like to see areas in MVC. Areas will allow you to group controllers and they are likely to appear in MVC v2. For now Eric has extended Steve Sanderson’s implementation of areas (link is a Google cache link since the site seems to be having issues lately).

ASP.NET MVC in Action

Jeffrey Palermo, Ben Scheirman and Jimmy Bogard bring you the upcoming ASP.NET MVC in Action from Manning:

Headspring Development Stack

The guys at Headspring Systems have a full stack of open source software that they use to help start and support applications:

SolutionFactory: Visual Studio add-in that exports a solution into a multi-project template
Watin: .NET automated web application testing
AutoMapper: Object-to-object mapping strategy
Gallio: Test automation platform
MbUnit: Unit test framework
qUnit: jQuery unit test framework

Also on the Show

Why isn’t Learning ASP.NET MVC Pragmatic Advice?

Rob Conery and Joe Brinkman recently engaged in a lively conversation on the merits (and reasons) for learning the ASP.NET MVC framework. If you are not careful the exchange may sound a bit like a shouting match, but these guys seem to be pretty comfortable with one another. but in the end if you pull anything out of it, I think it’s best summed by by Rob:

You Should Learn MVC – not that you have to use it (although I wish you would – it’s tons of fun!)

The often hailed wisdom from page ‘Pragmatic Programmer’ states:

Learn at least one new language every year. Different languages solve the same problems in different ways. By learning several different approaches, you can help broaden your thinking and avoid getting stuck in a rut. Additionally, learning many languages is far easier now, thanks to the wealth of freely available software on the Internet.

While MVC is not a new language per se, but every ASP.NET developer should spend time with the framework – if not to use, then at least it to sharpen your development arsenal.

Secrets of Real World ASP.NET Dynamic Data Websites eBook Now Available

craigshoemaker — Wed, 25 Mar 2009 13:38:00 GMT

I am pleased to announce that Secrets of Real World ASP.NET Dynamic Data Websites is now available as a Wrox Blox ebook. The material for this book is largely pulled from the recent talks I’ve given at various user groups and developer conferences on the same topic.

In this book you learn the basics of Dynamic Data and quickly move into how to leverage the features in some practical scenarios. If you’ve ever looked at Dynamic Data and wondered:

How do I move the data context to a lower application level and out of the web layer?
How do I execute custom business layer logic against the Dynamic Data controls?
How do I build reusable and programmatically customizable field templates?
How do I secure Dynamic Data scaffolding using ASP.NET membership services?

... then this book is for you!

The price tag is reasonable – well under $10 – no too bad for a technology book!

If you are interested in the full talk, feel free to contact me ( @craigshoemaker or my contact page) and maybe we can work out a remote lunch-n-learn type presentation. Better yet, if you are local to Southern California perhaps we can work out something in person.

Enjoy!

ASP.NET 4.0 and Visual Studio 2010 Enhancements

craigshoemaker — Fri, 19 Dec 2008 13:48:00 GMT

Scott Hunter brings a summary of the new features coming in ASP.NET 4.0 and Visual Studio 2010. Learn why you'll never have to type runat="server" again!

Listen to the Show!

Visual Studio 2010

Visual Studio 2010 will feature expanded snippets available in the HTML editor window. These snippets will dramatically change the way you write ASPX markup. For instance, if you were to add a TextBox to the page as soon as you begin typing <asp:TextBox... the snippet will take over and add in the ID and runat attribute.

Further, consider adding a RequiredFieldValidator to the page and the amount of work required in the past to properly configure the control. With the new snippets if you add a validator directly next to the TextBox you created previously, the snippet will automatically fill out the markup for the control, populating the ControlToValidate attribute, add the id and runat attributes and position your cursor inside the ErrorMessage attribute. Hand-coding has never been so easy!

Note: You’ll never have to type runat="server" again!

Further enhancements include the ability to triple-click an expansive element like a table and the editor selects the entire table’s markup. Want to surround that table with some additional markup? Just start typing with the table selected and your markup is inserted around the selected code.

ASP.NET Innovation

The ASP.NET platform has enjoyed a number of out-of-band updates in the form of AJAX, Dynamic Data and MVC, but the core of WebForms has remained without an update for a while. The reason is that the core of WebForms is dependent on System.Web, which is loaded by IIS.

This limitation has the attention of the ASP.NET team and in the future they are looking for ways to ship out-of-band releases on the core of WebForms. Until then we wait for the official release of ASP.NET 4.0 which will include the follow updates to WebForms:

Control of Control IDs: ASP.NET developers will finally have total control over the ClientID that is rendered to the page for each control. For simple scenarios you simply provide the ID value and in a data-bound context you can provide the key and replacement tag. For instance if you have a control in a data-bound control and you want the key to be "lbl" then the controls will have IDs consistent with lbl1, lbl2, lbl3 and so on.

Scott Galloway has an excellent post on the upcoming client ID changes: Way too much information on Control IDs and ASP.NET 4.0 Client Id Enhancements
Humble ViewState: Programming on the web often requires storing state somewhere. Using session state is prone to timeouts and can create problems in a server farm/garden environment. Many times the best place to persist data is in the HTML document itself. This logic is what drove the ASP.NET team to first implement ViewState, but an eager implementation (requiring parent controls to enable ViewState and other requirements) created bloated pages with unnecessary ViewState shoved up to the client.

The next generation of ViewState allows for granular control over which controls require ViewState. The default template for "4.0" project may even have ViewState turned off by default.
Dynamic Image Support: ASP.NET will feature rich image support giving developers an easy way to manipulate and maintain images on the web. Features include an image handler base class that is responsible for converting byte arrays to images and back again. A server control that calls the handler and helps pass parameters for uniquely identifying image data as well as stamping for cache support. The cache may be configured to cache on the server, the client or in both locations. Images are manipulated by a set of transforms which include resizing and watermarking among others.
IQueryable BusinessLogicDataSource: This new data source will feature query blocks which expose a declarative LINQ syntax to help create dynamic where clauses to append to search queries. The SearchExpression query block allows you to easily add "starts with", "ends with" and "contains" type of constraints to a query. The RangeExpression will read minimum and maximum values to constrain the range of a field. The LINQ syntax is generated when the page data binds sends the fully-constrained to the query to the server once all the parameters are known. Attributes associated with methods on the business logic layer will tell the data source which methods to run to select, insert, update and delete objects. The data source will work against a provider to interface with Linq to SQL, Linq to Enties, POCOs and more.

Dynamic Data

The Dynamic Data updates are spread among solutions for WebForms as well as MVC. Really the term "Dynamic Data" does injustice to the features as really they are becoming simply features of existing and new controls which are really just ASP.NET data controls.

For what you think of today as Dynamic Data, expect to see further work in the following areas:

Entity Templates: Much like a field template, but more of a container for markup and DynamicControls which can provide templating for an entire row of data rather than a single field.
Database Inheritance: Provide scaffold pages that will recognize database inheritance and provide CRUD capabilities for these tables.
Many to Many Relationships: Scaffolding will render check box lists to allow selection of many to many related data. (David Ebbo writes about this new feature in: A ‘Many To Many’ field template for Dynamic Data)

Use the Dynamic Control in a non-List Scenario?

The team is working on strategies for using the DynamicControl in situations where you are displaying a single record (and are outside the context of a list control).

Today a single record would bind to the FormView which supports the DynamicControl. Unfortunately FormView renders as a table in order provide places to hook in CSS classes. The FormView will soon feature a mode where you can turn off markup rendering all together so only the markup you provide is rendered.

There is talk among Scott and his team of the creation of an ItemView which may be a more natural fit for this type of scenario to compliment the ListView control.

Dyanmic Data & MVC

Out of respect of the culture surrounding MVC the team has chosen to implement Dynamic Data support backward to MVC. They began with adding HTML helpers and implementations for field/entity templates and databinding logic, leaving scaffolding for the end. This will ensure that Dynamic Data will work under MVC for those who choose to opt out of the scaffolding features.

In a seemingly controversial move, the team is implementing a version of ViewState for MVC! While the implementation details differ from traditional ViewState found in WebForms the technique of state persistence in a hidden HTML element will find its way to MVC.

In the interview, Scott poses the question of how one might implement optimistic concurrency in an MVC application. You may choose to implement a time stamp field or set aside the previous values for later comparison. If you choose to review old values then the state of this object must persist somewhere. So the team is looking to support developers who may choose a number of different approaches to the same problem.

Future Dynamic Data implementations for MVC will feature a controller with virtual methods for insert, update and delete. Using virtual methods obviously means that developers will have the option to over-ride and replace any methods they see fit.

Update: Check out Dynamic Data Preview 2

Resources

Microsoft Pre-release Software Visual Studio 2010 and .NET Framework 4.0 CTP
ASP.NET Dynamic Data 4.0 Preview 1: Includes WebForms Dynamic Data futures and Dynamic Data/MVC blog sample
WebForms Updates
ASP.NET Codeplex Home
Dynamic Data Preview 2

Controlling HTML in ASP.NET WebForms

craigshoemaker — Tue, 02 Dec 2008 14:44:00 GMT

Listen to the Show!

Resources Mentioned in the Show

Developers want control. Developing for the web is seemingly more of a love/hate relationship with the tools at our disposal. Sometimes our tools and frameworks give us power, but not control. While we love the functionality and ease-of-use of many of the stock server controls found in ASP.NET WebForms, sometimes we find that the underlying HTML isn’t exactly what we need.

To address the growing need for more control over web page markup we’ve seen movements like the CSS Control Adapters and the emergence of ASP.NET MVC framework which give us 100% control over markup.

MVC and control adapters are not the only answer to gaining more control. For the sea of standard WebForm applications there are many techniques available for gaining more control.

Tame ViewState

One of the first places to exercise control over your HTML is to reign in ViewState. ViewState was once hailed as a huge time saver upon its introduction and now often the bedrock feature of ASP.NET is maligned for all manner of code bloat.

The fact is, though, ViewState is not inherently evil and is effective when used appropriately. The problem with ASP.NET is not that it features ViewState, but that the framework is cavalier in its use of ViewState. The problem is ViewState is turned on by default.

Consider a page that includes a data-bound ListView control using the default ASP.NET template. The page template and all controls automatically have ViewState enabled.

The following is a screen shot of the HTML generated by the ListView:

Notice that the control simply renders a table. There is no editing behavior implemented on this page therefore there is no need for ViewState. Disabling ViewState will change the source to look like this:

Note: Surprisingly, setting EnableViewState="false" does not get rid of ViewState entirely. If you have a HTML form set to run-at server, then you will always have at least one hidden control in your markup with some "ViewState" data. This data, though, is trivial in size.

Tip: Turn off ViewState by default and use it only when necessary. You can even turn off ViewState globally in your application by disabling it in the web.config in the pages element.

If you find ViewState is unavoidable in your application you may consider looking into the options of moving it to the web server or even down to the database.

Question the Form Tag

Another foundational control in ASP.NET is the run-at server form tag – but do you really need it?

As you just saw when working with ViewState, as long as a server-controlled form element is on your page, extra HTML in the form of ViewState and supporting JavaScript for post backs is emitted to the page. The default ASP.NET page template includes a form tag on every page, but often its presence is not necessary.

Returning to the example from the previous section, look at the HTML generated from placing a read-only ListView in a server form with ViewState disabled:

This page has no input controls and is simply a read-only page so having a form on the page doesn’t really make sense.

The next screen shot is how the page looks with the form tag removed:

Tip: Remove server-controlled forms from your page if they are not necessary.

You may even consider removing them from your page first and wait for the design to dictate whether or not you need a form on the page. Perhaps you are even so bold as to edit the Visual Studio template to remove the form tag from new pages?

The template is found under this location:

C:\Program Files\Microsoft Visual Studio 9.0\Web\WebNewFileItems\CSharp\WebForm.aspx

C:\Program Files\Microsoft Visual Studio 9.0\Web\WebNewFileItems\VB\WebForm.aspx

NOTE: If you edit this file you are tinkering with Visual Studio’s default templates, which under normal circumstances is probably a bad idea. The change suggested here, however is pretty benign. In any event make backups - be certain of what you are doing, and if something goes wrong don’t blame me :)

No-Markup Controls

Server controls are valuable because they create a layer of abstraction above HTML elements. This abstraction determines how controls render to different browser versions and save developers time from having to write code by hand. While these benefits are realized in many situations, sometimes server controls are just more than you need.

I have often seen developers use inappropriate controls just to get some text on the screen or to control the visibility of controls.

The Literal Control

Do you need to render a simple string to the page? Then don’t use a Label control unless you have plans for the extra SPAN tags that come with the data – instead try using a Literal control.

The Literal control’s purpose is to render a string literal to the page – and only the string literal.

Take a look at the next two lines of ASPX code:

The controls are effectively doing the same thing: rendering a name to the page. The resulting HTML from each of these controls is quite different:

The Label is rendered with wrapping SPAN tags. In this case, the control is on a page associated to a master page so the HTML bloats even further with the unique client ID generated by the server. Often when using a Label control developers do not use the accompanying HTML that’s rendered with the data.

Using the Literal control, however simply renders the text to the screen as desired.

Tip: Be aware of when you simply need text on the page and use the appropriate controls.

Note: Take care to not confuse the Literal control with a different control name LiteralControl.The LiteralControl exists to aid server control construction and is rarely used directly in code.

The Placeholder Control

Do you need to programmatically show or hide a group of controls? Don’t just make that DIV runat="server" or turn to a Panel control – instead try wrapping your controls in a Placeholder control.

The Placeholder control is a very useful control that doesn’t seem to get a lot of attention. What makes the Placeholder useful is that the control may contain children controls and it renders no HTML to the page.

Often Placeholders are used for template designs and other scenarios where you don’t know which controls are needed until runtime. There are a number of other applications for the Placeholder beyond its normal use. You can also use this control to help control what is shown and hidden on your page.

Consider the typical scenario where a message is initially hidden from the user, but is later displayed on the screen. A common approach to this problem is to create a server-controlled DIV on the page and set the Visiblity property to false:

For simple pages the markup that is rendered to the page is exactly what you would expect, but in more practical settings the HTML gets altered.

The next screenshot shows you how that DIV is rendered to the page when the markup lives inside a master page:

The age-old problem of ASP.NET changing a control’s ID creeps up. This is a problem because once you start interacting with style sheets and JavaScript the client IDs become very important. While there are a number of ways around this issue for both CSS and scripting, why not dodge the problem altogether?

Instead of making the DIV a server control, wrap your content inside a Placeholder and then you have the same programmatic control over the block of controls without having to worry about the HTML being affected.

You could also use the MultiView control to accomplish this same behavior without generating any extra markup.

Tip: Use controls that do not generate HTML wherever appropriate.

Expressions Have No Ego

If you truly don’t need extra markup created for you – consider skipping the use of a server control altogether and use in-line expressions. ASP.NET MVC makes heavy use of expressions and while some think heavy use can create messy co-mingled code – there is a good pragmatic reason for using them.

If you use a server control, you have to have some strategy for providing the control with data. Getting data into the control requires you to write code in the codebehind. Writing code is not a bad practice at all – it can just be time-consuming. Depending on where the control resides on the page you will often have to do most if not all of these steps:

Declaring a control in the ASPX
Finding the appropriate event method in the page lifecycle to tap into
Locating and cast the control to the appropriate type (in some cases)
Provide the control with data

If you opt for using expressions instead you can simply inject the data exactly where it need to go.

So instead of doing this:

Try doing this:

In the end you’ll find that not using server controls when they are truly unnecessary will help tame your rendered markup significantly.

Choose Controls Wisely

One of the best ways to control the HTML that your pages generate is to be familiar with what common controls with render. The following tables contain an abbreviated list of ASP.NET server controls and a summary of the type of markup they emit.

Standard Controls

Control Name	Renders
Label	SPAN elements surrounding Text property value
TextBox	HTML text input element
Button	HTML button input element
LinkButton	Anchor element
ImageButton	Anchor and image (IMG) elements
HyperLink	Anchor element
DropDownList	Select element with options for values
ListBox	Select element with option tags for values. (The ListBox renders a value for the SIZE attribute allowing more than one option to appear at a time.)
CheckBox	HTML checkbox input element
CheckBoxList	If RepeatLayout is set to Table, then the control renders standard table markup with the checkbox input elements. If RepeatLayout is set to Flow, then the control renders a series of Label and BR elements with the checkbox input elements.
RadioButton	HTML radio input element
RadioButtonList	If RepeatLayout is set to Table, then the control renders standard table markup with the radio input elements. If RepeatLayout is set to Flow, then the control renders a series of Label and BR elements with the radio input elements.
Image	IMG element
ImageMap	IMG element and MAP element
Table	HTML table
BulletedList	Series of LI elements inside a UL element
HiddenField	HTML hidden input element
Literal	N/A
Calendar	Complex series of elements including links and table markup
AdRotator	Anchor and image elements
Wizard	Complex series of elements including links and table markup
MultiView	N/A
Panel	DIV or Table element depending on the browser capabilities
Placeholder	N/A

Data Controls

Control Name	Renders
GridView	Table element with optional anchors
DataList	If RepeatLayout is set to Table, then the control renders standard table markup If RepeatLayout is set to Flow, then the control renders a series of Label and BR elements
DetailsView	Series of elements including links and table markup
FormView	HTML table
Repeater	N/A
ListView	N/A

ASP.NET SEO

Much of the talk surrounding taming HTML is often in the context of building website to be search-engine friendly. In some arenas ASP.NET is viewed as a sub-standard platform for creating search engine optimized websites. While this charge is categorically false, sometimes it’s not hard to see why some reach such an extreme conclusion.

ASP.NET is no better or worse platform for building sites optimized for search engine placement than a Java or Rails site – the problem is often the UI developer. While Microsoft and a host of third-party organizations work hard building tools and controls that aid in RAD development, using these techniques in their default states, may not always be the best approach for building public facing websites.

The bottom line is know the HTML you are generating and use the right tool for the right job.

Using jQuery to Call ASP.NET AJAX Page Methods – By Example

craigshoemaker — Fri, 07 Nov 2008 15:20:00 GMT

A commenter recently requested a more in-depth sample demonstrating the technique I used in my Using jQuery to Call ASP.NET AJAX Page Methods post. He wanted to see how you could use jQuery to send the contents of a GridView row to a WebMethod page.

Here are the steps:

Create template columns in the GridView and wrap the data you want to send to the server in some sort of tag that you can access via JavaScript
Create a link that calls the JavaScript function that extracts the data and prepares it for the Ajax request

The most interesting lines of code really are lines 41 – 45 of the ASPX markup. These lines are where the script formats the variables appropriately to use the CallPageMethod function that uses jQuery to call the page’s WebMethod.

The ASPX Markup

   1:  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridView.aspx.cs" Inherits="Test_GridView" %>

2:

   3:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

4:

   5:  <html xmlns="http://www.w3.org/1999/xhtml">

   6:  <head runat="server">

   7:      <title></title>

   8:      <style type="text/css">

   9:      .none {display:none;}

  10:      </style>

  11:      <script src="../jquery-1.2.6.min.js" type="text/javascript"></script>

  12:      <script type="text/javascript">

  13:      function CallPageMethod(methodName, onSuccess, onFail) {

  14:          var args = '';

  15:          var l = arguments.length;

  16:          if (l > 3) {

  17:              for (var i = 3; i < l - 1; i += 2) {

  18:                  if (args.length != 0) args += ',';

  19:                  args += '"' + arguments[i] + '":"' + arguments[i + 1] + '"';

  20:              }

  21:          }

  22:          var loc = window.location.href;

  23:          loc = (loc.substr(loc.length - 1, 1) == "/") ? loc + "default.aspx" : loc;

  24:          $.ajax({

  25:              type: "POST",

  26:              url: loc + "/" + methodName,

  27:              data: "{" + args + "}",

  28:              contentType: "application/json; charset=utf-8",

  29:              dataType: "json",

  30:              success: onSuccess,

  31:              fail: onFail

  32:          });

  33:      }

34:

  35:      function select(index) {

  36:          var id = $("#id" + index).html();

  37:          var title = $("#ttl" + index).html();

  38:          var author = $("#auth" + index).html();

  39:          var pubDate = $("#pubDate" + index).html();

40:

  41:          CallPageMethod("SelectBook", success, fail,

  42:              "id",id,

  43:              "title",title,

  44:              "author",author,

  45:              "publishDate",pubDate);

  46:      }

47:

  48:      function success(response)

  49:      {

  50:          alert(response.d);

  51:      }

52:

  53:      function fail(response)

  54:      {

  55:          alert("An error occurred.");

  56:      }

  57:      </script>

  58:  </head>

  59:  <body>

  60:      <form id="form1" runat="server">

  61:      <asp:GridView

  62:          ID="gv"

  63:          runat="server"

  64:          AutoGenerateColumns="False">

  65:          <Columns>

  66:              <asp:TemplateField HeaderText="Select">

  67:                  <ItemTemplate>

  68:                      <a href="javascript:void(0);" onclick="select(<%= this.index.ToString() %>);">Select</a>

  69:                  </ItemTemplate>

  70:              </asp:TemplateField>

  71:              <asp:TemplateField HeaderText="Title">

  72:                  <ItemTemplate>

  73:                      <span id="id<%= this.index.ToString() %>" class="none"><asp:Literal ID="id"

  74:                          Text='<%# Bind("ID") %>' runat="server" /></span>

  75:                      <span id="ttl<%= this.index.ToString() %>"><asp:Literal ID="ttl"

  76:                          Text='<%# Bind("Title") %>' runat="server" /></span>

  77:                  </ItemTemplate>

  78:              </asp:TemplateField>

  79:              <asp:TemplateField HeaderText="Author" SortExpression="Author">

  80:                  <ItemTemplate>

  81:                      <span id="auth<%= this.index.ToString() %>"><asp:Literal ID="author"

  82:                          Text='<%# Bind("Author") %>' runat="server" /></span>

  83:                  </ItemTemplate>

  84:              </asp:TemplateField>

  85:              <asp:TemplateField HeaderText="Publish Date" SortExpression="PublishDateShort">

  86:                  <ItemTemplate>

  87:                      <span id="pubDate<%= this.index.ToString() %>"><asp:Literal ID="dt"

  88:                          Text='<%# Bind("PublishDateShort") %>' runat="server" /></span>

  89:                      <% this.index++; %>

  90:                  </ItemTemplate>

  91:              </asp:TemplateField>

  92:          </Columns>

  93:      </asp:GridView>

  94:      </form>

  95:  </body>

  96:  </html>

The Codebehind

   1:  using System;

   2:  using System.Web.Services;

3:

   4:  public partial class Test_GridView : System.Web.UI.Page

   5:  {

   6:      protected int index = 0;

7:

   8:      protected void Page_Load(object sender, EventArgs e)

   9:      {

  10:          if (!this.Page.IsPostBack)

  11:          {

  12:              this.gv.DataSource = BookRepository.Instance.GetBooks(5);

  13:              this.gv.DataBind();

  14:          }

  15:      }

16:

  17:      [WebMethod]

  18:      public static string SelectBook(int id, string title,

  19:          string author, DateTime publishDate)

  20:      {

  21:          string msg = string.Format("You selected \"{0}\" by {1} " +

  22:              "published on {2}.",

  23:              title, author, publishDate.ToShortDateString());

  24:          return msg;

  25:      }

  26:  }

ASP.NET SEO

craigshoemaker — Tue, 14 Oct 2008 15:35:00 GMT

Listen to the Show!

Michael Neel joins us today to discuss search engine optimization specifically for ASP.NET websites. Michael C. Neel is a Digital Media Developer with Jewelry Television and independent consultant with ViNull Software. He is a board member and Vice President of the East Tennessee .Net Users Group (ETNUG) in his home town of Knoxville, TN. Michael has been published in asp.netPro magazine and continues to publish .NET focused articles on his blog (http://ViNull.com/) and at Devlicio.us with other community developers. An ASPInsider, Microsoft MVP, regular speaker at .Net conferences and user groups Michael has traveled to most of the states surrounding Tennessee and organizes CodeStock (http://CodeStock.org/).

SEO: What Matters?

Conventional wisdom states that HTML markup must be clean, and strict rules must be adhered to in order to have success with search engines. Michael suggests that these positions held by SEO “experts” may not be as accurate as some may think.

If the content is there…

Michael’s view is that if the content is found in key areas of the page, instances of inline styles and “extra” HTML do not seem to have a significant effect on search engine indexing.

The Drivers

The factors of a website that do drive SEO rankings are the URL, Title, contents of the h1 tag and the text content on the page. Dividends are awarded to consistency among the keywords among these factors. For instance if your title and h1 match and many of the keywords are found in the URL, then search engines will place your site at a higher favor.

Nice Guys Finish First

Meta-tags and meta-descriptions were the keys of the days of old in search engine placement, but now due to rampant abuse, search engines tend to lower the influence of these tags.

Be careful how to craft your site. If the search engines think you are trying to cheat the system your site may be de-valued or even de-listed. As your site proves to the search-bots that you can be trusted, then your site is more easily able to benefits from the SEO placement formulas.

Crafting Content

Often SEO placement is a simple function of how well you write your content. If you write headlines and other SEO relevant elements based off of what people search for, your site will easily gravitate to viewers. For instance, Michael’s most popular blog post is title Adding a Total to a GridView. A post with such a succinct title is bound to get heavier traffic than posts titled like You'll have my SQL when you pry my keyboard from my cold dead hands.

When ASP.NET is Invisible to Google

Some ASP.NET websites have suffered from invisibility to Google. At first the cause is not apparent, but with some digging the culprit was often bug in ASP.NET 2.0 runtime (which is resolved in .NET 3.5 SP1).

When requests come in the ASP.NET pipeline, the rendering engine will choose a text writer that is appropriate for what seems like is the correct browser level. The HTML32TextWriter class will target an HTML3 level browser – so you will never see the result of this rendering in contemporary UI client. (Even pages viewed with the Lynx web browser receive a HTML level 4 rendering)

Calling the HttpContext.RewritePath method would throw an exception resulting in a 500 error. Virtually the only time the site would encounter this problem was when the search engine bots attempted to crawl and index the site since the user agent of the spider would trigger a low-level text writer version.

Note: Setup ASP.NET health monitoring to let you know when errors happen on your site.

Is My Site at Risk?

The simple way to know is to search for your site. If your website appears in a search result – then you are not suffering from this problem.

Since this is a problem you will never see first-hand using modern browsers you need you will only know about the problem if you notice your site not appearing in search engine results or you tool your website to report all exceptions via ASP.NET health monitoring or some other exception management solution.

What’s the Fix?

There a number of ways to shield your website against this error:

Enforce Cookies to bypass the need for doing RewritePath
Create Browser Files and up-version the Google bot to a higher browser version

SiteMaps for Better Rankings

Use ASP.NET site maps to help guide search engines to the content in your website

ASP.NET Site Maps
Exercise the Cache pattern in the provider: The SQL Site Map Provider You've Been Waiting For

What you want to try to avoid is creating different URLs that result in the same content. This practice may flag the search engine that you are trying to cheat the system.

For instance a URL pointing to the services page of a site may look like this

http://site.com/services/default.aspx?s=seo

...and also like this...

http://site.com/services/?s=seo

...but maintaining both of these URLs will reduce your SEO potency. Building sitemaps can help you alleviate these types of problems by keeping your URLs consistent.

Sitemap Protocol

The sitemap protocol is an open standard method for describing and directing search engines around your website.

The protocol includes a number of meta-data elements that give you control over how your website is indexed:

Location : The URL to the pages in your site
Priority Weight: A relative priority in the context of the entire site. For example you may weight blog post pages a higher priority over the blog homepage in the event of an indexing conflict.
Change Frequency: Indicates to the search engines how often to return to pages for re-indexing
Lastmod: Date of last change

Some say that a well-structured website won’t need a site map, but there is a lot of value in the meta-data giving site owners power over how the crawlers will interpret the website.

Resources

Michael Neel’s blog
Google Can You Hear Me?: Michael’s article originally published in ASP.NET Pro Magazine
Google Webmaster’s Central: See how Google sees your site
Google Webmaster’s blog: Hear directly from Google what helps your site perform to its potential
Google analytics: See traffic and ad conversion statistics on your website
ASP.NET Health Monitoring: Configure your site to tell you about any problems encountered
ASP.NET Routing with WebForms: Use the routing features to craft SEO-friendly URLs in WebForms

Congratulations

Congratulations to our distinguished guest Michael Neel, Jess Chadwick and Grant Hinkson for joining the Microsoft MVP program!

Upcoming Engagments

If you would like to catch up in person I am speaking at the following:

VSLive! Las Vegas – 10/15/08
LA.NET – 11/03/08
San Diego .NET User Group – 01/20/09