Infragistics NetAdvantage and Dynamic Data

For those of you who keep a close watch on the off cycle ASP.NET projects that Microsoft has been working on, you're probably already familiar with Dynamic Data.  Well, today Dynamic Data just went from a cool beta, to a real product.  As Scott Gu mentions in his blog, Dynamic Data is being included in VS2008 SP1 (the beta is now available to download!)

One of the questions that I've heard lately is - "Will Infragistics' controls work with Dynamic Data?"  So I figured I would publish some information to my blog.  The neat thing is that the Dynamic Data project has some really great extensibility built into it.  You know the saying - "The sky is the limit", well that's quite fitting in this case. 

What is Dynamic Data?

If you haven't seen dynamic data in action, head over to ASP.NET and take a look at the videos and other quick start materials.  The basic concept behind Dynamic Data is that it will allow you to quickly put a front end on a Database structure.  You might be saying - well, what about my business logic?  Aren't single tier data applications bad?  Again, take a look at some of the quick starts on ASP.NET, you'll see that they've built quite a comprehensive model into Dynamic Data which allows you to validate data, enforce constraints and all of the other details you would normally rely on a 3 tier model to do. 

How does Infragistics make Dynamic Data better?

Pictures are better than words, so take a look at the before and after shots.  The before shot is a Dynamic Data website straight out of the box.  The After shot is after attaching a few of the Infragistics edit controls.

How do I use Infragistics With Dynamic Data?

After working with Dynamic Data for about 2 minutes, I'm sure the question above popped into your head.  You've got all of these cool editor controls in NetAdvantage for ASP.NET - how can you use them with Dynamic Data?

It's all about FieldTemplates and UIHints.  A UIHint is an attribute that you add to your code which tells the Dynamic Data framework which edit template to use for a given property.  UIHints are added to properties defined in partial classes.  The reason they are defined in a partial class, is to allow you to add content to existing entities (Linq to Sql..) with out having to write gobs of code.  To put it into an actual code example, if you wanted to bind to Order and OrderDetails in the northwind database, you would first create your DBML using Linq To Sql classes.  Then you would create a partial class for Order and one for OrderDetails.  Now you simply add your attribute makers.  Below is an example of the OrderDetails class

using System.Web.DynamicData;
using System.ComponentModel.DataAnnotations;

/// <summary>
/// Summary description for OrderDetails
/// </summary>
[MetadataType(typeof(OrderDetailsMetaData))]
public partial class Order_Detail
{

}

public partial class OrderDetailsMetaData
{
    [Range(0,1000)]
    [UIHint("IG_Integer_WebSlider")]
    public object Quantity;

    [Range(0,100)]
    [UIHint("IG_Decimal_WebPercent")]
    public object Discount;

    [UIHint("IG_Decimal_WebCurrency")]
    public object UnitPrice;
}

In the example above, I'm using an external OrderDetailsMetaData class, to contain all of my attribute.  Ideally the attributes could all be added to the Order_Detail class directly, but the C# language doesn't support this scenario at the moment (maybe sp2? <grin>) 

The UIHint attribute is used to connect a property with an editor.  In this case, we're connecting the Quantity property to the "IG_Integer_WebSlider" editor. 

Editors, or more specifically FieldTemplates are nothing more than fancy WebUserControls.  They contain a bit of ASPX, and one or two methods.  In the WebSlider example, the ASPX and C# are shown below

ASPX/HTML

<%@ Control Language="C#" CodeFile="IG_Integer_WebSlider_Edit.ascx.cs" Inherits="Integer_EditField" %>

<ig:WebSlider
    ID="WebSlider1"
    runat="server"
    ValueAsString="<%# Convert.ToDouble(FieldValueEditString) %>"
    LargeChangeAsString="10.00" ShowPlusMinusButtons="True"
    ValueType="Int" Width="200px">
    <ValueLabel Location="FloatTopOrLeft" />
</ig:WebSlider>

CODE

public partial class Integer_EditField : System.Web.DynamicData.FieldTemplateUserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        RangeAttribute attr=this.Column.Attributes[typeof(RangeAttribute)] as RangeAttribute;
        if (attr != null)
        {
            WebSlider1.MinValue = attr.Minimum;
            WebSlider1.MaxValue = attr.Maximum;
        }
        WebSlider1.ToolTip = Column.Description;
    }
    protected override void ExtractValues(IOrderedDictionary dictionary)
    {
        dictionary[Column.Name] = ConvertEditedValue(Convert.ToInt32(WebSlider1.Value).ToString());
    }
}

In the code above, we're setting the webslider's min and max values to the values defined in our metadata (RangeAttribute).  Since we defined Range(0,1000) in our OrderDetailsMetaData class, the Slider will constrain the user to entering values between 0 and 1000.  It's that easy! 

If you want to get started today, I've posted the source for this example up on codeplex.com.  Let me know if you have any problems, or if you created a killer FieldTemplate that you'd like to add to the CodePlex project.  Also, there's a discussion tab available on the project that you should feel free to use - or you can always post comments here.