Fredrik Normén

Fluent-API to add ActionFilters to Controllers – ASP.NET MVC Part 2

2009-11-07T09:39:30Z

I’m working with my Fluent-API for adding Action Filters to Controllers and Action Methods. In my previous post, I created a new instance of each Action Filter and add it to an Action Method or Controller. Based on how the Action Filters are often implemented they don’t or shouldn’t keep any state, so in that case I don’t need to create a new instance of the same Action Filter with the same configuration for each Action Method I want to add it to. I also want to have an option to have a better overview of which Action Filter is added to which Controllers and Action Methods. I have added to methods, AddFilterToControllers and AddFilterToActions:

            .AddFilterToActions(new HandleErrorAttribute(),
                                c=> c.About(),
                                c=> c.Index());
            .AddFilterToActions(new OutOfMemoryException(),
                                c=> c.About());
             .AddFilterToActions(new HandleErrorAttribute() ...,
                                c=> c.MyMethod());

            .AddFilterToControllers(new HandleErrorAttribute(),
                                    typeof(HomeController),
                                    typeof(Controller));

The code is not yet available due to some more changes and testing.

Fluent-API to add ActionFilters to Controller in ASP.NET MVC

2009-11-07T00:45:00Z

Note: The name of the classes and the methods are just temporary and may change, I’m so bad when it comes to naming classes and methods. The source code is simple and haven’t done so much refactoring etc. Just wanted to see if I could get it to work, so please have that in mind.

EDIT: Working with new methods to get a better overview of Action Filters added and also reusing AcitonFitlers, you can read about it here.

When we create controllers for our ASP.NET MVC application we can also add Action Filters to handle cross-cutting concerns, like Authorization, Error handling and Caching etc. If we want to have Error handling on every controller we need to add the HandleErrorAttribute to all controllers, like this:

[HandleError] 
public MyController : Controller 
{ 
}

By adding Action Filters by using attributes it can be hard to get a good overview of which controllers that has the HandleErrorAttribute. The same regarding Action methods, for example if we have a lot of Controllers and want to see see all the Action methods that uses for example the OutputCacheAttribute, we need to go through all Controllers and methods, there is no easy way to get a simple overview of them.

Adding Action Filters to Action methods and Controllers also add some sort of “dependency” to action filters (not a big deal, though). I decided to try a way to add Action Filters to Controllers and Action methods in one single file, so I could get a better overview of which Controllers and Action methods uses what ActionFilter etc. Because ActionFitlers contains cross-cutting concerns I also wanted to move it away as attributes from the Controllers and Action methods so developers don’t need to care about the cross-cutting concerns during the creation of Controllers. instead add them later.

I sort of used a Fluent-API for the configuration of ActionFilters, and the configuration is added to the Global.asax’s Application_Start event. Here is an example where I add the ErroHandler Action Filter to all Controllers Action Methods:

ConfigActionFilter.ConfigController<Controller>() 
                  .AddFilterToController(new HandleErrorAttribute());

If I want to add an Action Filters to a specific Controller I just use the type of the Controller:

ConfigActionFilter.ConfigController<HomeController>()
                              .AddFilterToController(new HandleErrorAttribute());

Note: The reason I don’t use XML and a XML meta data provider as a configuration is because I wanted to make the configuration type safe. If we use XML we can only get an exception if we spell something wrong at runtime.

If I want to add Action Filters to Action Methods I can write something like this:

ConfigActionFilter.ConfigController<HomeController>()
                              .AddFilterToController(new HandleErrorAttribute())
                              .AddFilterToAction(c => c.About(),
                                                 new MyActionFilterAttribute(),
                                                 new MyOtherActionFilter() { Metadata=10 })
                              .AddFilterToAction(c => c.Index(),
                                                 new MyActionFilterAttribute());

I didn’t wanted to use a string for the ActionMethod (AddFilterToAction(“About”)) because it would not be type safe. I want to get a warning or error while typing the code, so instead I created an Expression. The AddFilterToAction takes a params of FilterAttributes, so I can easy add several of Action Filters to an Action Method. The AddFilterToController method will add Action Filter to the Controller, just like adding an Action Filter attribute to the class definition, so all Action Methods within the Controller will use the Action Filter.

I created a Custom ControllerFactory so I could add my Custom ControllerActionInvoker to the Controller:

 public class ActionFilterConfigControllerFactory : DefaultControllerFactory
 {
        public override IController CreateController(RequestContext requestContext, string controllerName)
        {
             ...

                controllerInstance.ActionInvoker = new ActionFilerConfigControllerActionInvoker();

            return controller;
        }
 }

The custom ControllerActionInvoker will make sure the Action Filter added by using my solution is added to the FilterInfo class. This is done by overriding the GetFilters method:

public class ActionFilerConfigControllerActionInvoker : ControllerActionInvoker
{
        protected override FilterInfo GetFilters(ControllerContext controllerContext,
                                                 ActionDescriptor actionDescriptor)
        {
            var filters = base.GetFilters(controllerContext, actionDescriptor);

            ...

            if (ConfigActionFilter.Config.ContainsKey(controllerName))
                AddFiltersToFilerList(actionDescriptor, filters, controllerName);

            return filters;
        }

}

This project only a fun thing to do and I like the idea of having different options to add Action Filters, and this solution will make the Controller clean from Attributes and also have one place to add them. When I create my Controller I don’t need to worry or think about the cross-cutting concerns, I just add them later and into the Global.asax.

I want to thanks Mikael Söderström for taking time to discuss this solution with him, and get some feedback and also “host” the source code for me.

You can download the source code with an example here: http://vinkr.net/misc/ActionFilterConfig.zip

Visual Studio 2010 Launch Countdown Sidebar Widget

2009-11-04T10:15:00Z

Here is a sidebar widget that will show the countdown for Visual Studio 2010, launching on March 22, 2010.

div#widget { position: relative; width: 250px; height: 155px; }

body ul#cntdwn { width: 250px; height: 80px; background: transparent url(http://toysfortweets.com/visualstudiowidget/cntdwn-bg.png) no-repeat scroll left top; list-style-type: none; text-align: center; padding: 74px 0 0 0; margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

body ul#cntdwn li { float: left; margin: 0 8px 0 0; background: transparent url(http://toysfortweets.com/visualstudiowidget/number-bg.png) no-repeat scroll left top; padding: 0 0 5px 7px; }

body ul#cntdwn li.first { margin-left: 20px; }

body ul#cntdwn li em { display: block; color: #111; font-size: 1.6em; font-style: normal; font-weight: bold; background: transparent url(http://toysfortweets.com/visualstudiowidget/number-cap.png) no-repeat scroll right top; padding: 3px 7px 0 0; height: 35px; margin-bottom: -5px; }

div#widget a#link { display: block; width: 250px; height: 155px; position: absolute; top: 0; left: 0; }

</style>
<script language="javascript" src="http://toysfortweets.com/visualstudiowidget/countdown.js" mce_src="http://toysfortweets.com/visualstudiowidget/countdown.js"> </script>

Introduction to Templates in ASP.NET MVC 2 Screen cast

2009-11-02T20:05:16Z

I have recorded some screen casts during the last week for Microsoft, one is was published today on Channel 9 (The Screen cast is in Swedish, I will eventually try to record screen casts also in English, but when that happens, I don’t now). You can found the screen cast here:

http://channel9.msdn.com/posts/MSDNSweden/Introduktion-till-Template-i-ASPNET-MVC-2/

For those who can’t understand Swedish, here is a short summary of the screen cast.

With ASP.NET MVC version 2.0 we can use templates. It will help us rendering forms etc out form the Model we passed to the View. We can easy modify templates to satisfy our needs. The simples way to use the Template feature is to use the Html’s DisplayForModel method:

<%= Html.DisplayForModel() %>

This method will iterate through the ViewData.ModelMetadata.Properties to render the Model. The ModelMetadata hold information about the model, such as properties etc. The result will remind us about the DetailView control shipped with ASP.NET 2.0, but will put the name of the property at top, and then a new line with the value of the property, like this:

FirstName

John

LastName

Doe

There is also a method to render a editable from, EditorForModel. By default the methods will use a default template, we can easy override the template. We do that by adding a ASP.NET MVC User Control to the ~/Views/ControllerName/DisplayTemplates or EditTemplates folder. If you want to override how a String should be “rendered”, then you simply add a String.ascx file to the Templates folders, here is an example of a DisplayTemplate:

   
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl"%>

<i><%= Html.Encode(Model) %></i>

The above template will make the value of the rendered property to use italic:

FirstName

John

LastName

Doe

We can do several more stuffs with template, for more information check out the following blog post from Brad Wilson:

Part 1: Introduction

Part 2: ModelMetadata

Part 3: Default Templates

Part 4: Custom Object Templates

Part 5: Master Page Templates

You can find me on twitter: http://www.twitter.com/fredrikn

Distributing domain entities over the wire

2009-10-31T18:12:46Z

When we design our domain entities we don’t have a presentation layer or database in mind. The domain entities are core business objects located on the server or client side based of what kind of application we are building. Domain entities aren’t designed for distribution. When we realize that we need a distribution, we shouldn’t distribute the entities, instead collect the data we need to distribute and create a data transfer object (DTO) instead. Have the network in mind, a domain entity aren’t designed with a network in mind and of that reason not suitable for distribution. When we create our domain entities, they aren’t designed for presentation purpose, they are designed to fulfill business needs. You should be careful when you start thinking about returning a domain entity to the View when using a patterns like MVC, instead use DTO or a ViewModel, because once again the domain entities aren’t designed with presentation in mind, and aren’t often suitable for presentation purpose. It’s often better to map them to a DTO or ViewModel, objects that are suitable for presentation purpose or passed over the wire.

I often see demos and example codes where models are generated out from a database. Remember it you do that, your application’s design is driven by a relational database schema, do you really want a database to set the limit in your application design? I don’t. Developers are good at one thing, implementing business logic, that is what they do, that is what they are good at, that is what they should focus on (if we live in the perfect world ;)). We should work against our model. We shouldn’t care about how the database schema looks like. A database is a way to store information, and we have database administrator that are experts in the database area, let them handle the database schema and together with developers map the domain model to the database schema, with the use of an ORM, like Entity Framework 4.0 or nHibernate etc.

When it comes to WCF or Web Services, never distribute the domain entities, they aren’t designed for that kind of purpose in the first place(if we don’t use Distributed Domain Driven Design). There is a reason why we call the data sent from a Service as a message. A message is created with network in mind, that is why we use data contracts. When it comes to .NET RIA Services, don’t distribute the Entity Framework generated object or LINQ to SQL, they are generated out from a database schema, and it’s so easy to select whole tables and related tables to get what we want and then we distribute it and forget about the network between the client and server. In some cases we don’t even want to think about the network existence because it adds limit to the information and how we would like to work with objects. But we can’t hide the complexity how much we try, we have to realize that we do have a network, and have that in mind when we design our RIA. We can still on the server-side create our perfect domain model, but we shouldn’t distribute it. Instead transform peace of it into DTOs and only make sure we send the data we are needed. I have seen several examples where developers generate codes from Entity Framework or LINQ to SQL and returns it with .NET RIA Services. When I look at the examples I can see big object graphs passed over the wire and developers are using it as it was local objects, they start to requesting about Lazy Loading support in .NET RIA Services etc. Either they forgot about the network, or they have lack of experience. For intranet, small database driven applications it can be ok to create a model out from a database schema and distribute it with .NET RIA Services, they don’t often even use business logic, and they don’t need a domain model. But when it comes to large application it’s not often an good idea to generate object out from a database schema and distribute it. In that case DTO is much better option. Not only to limit the data passed, but also because of separation of concerns. The best thing with .NET RIA Services is that it does support DTOs :) Microsoft are good at creating frameworks for developers, but sometimes they want to satisfy everyone, and that often leads to people will use the frameworks in a wrong way. WCF is probably one of the better technologies made from Microsoft, they have learned from the fail of DCOM. When we use WCF we have to create a data contract, which force us to think about what we are distributing, they have also add a small limit of how much data we can by default pass over the wire. I know that some developers think WCF is complex to use and not so easy to learn, but sometimes it shouldn’t be easy to create things that are complex, the complexity is there by some reasons, and it can’t be hidden.

VS 2010 Beta 2 and .Net 4.0 is now available for downloading from MSDN Sub.

2009-10-21T11:39:00Z

Oh, I'm late.. but better late then never.. you can now download VS 2010 nad .Net 4.0 Beta 2, if you are a MSDN Subscriber.. You can read more about VS 2010 Beta 2 on Scott Guthrie's blog.

Wow, my shortest blog post ever!

ASP.NET 4.0 Web Form routing

2009-10-14T07:43:26Z

One of hundreds things I like about ASP.NET MVC, is the routing, a way to use clear and friendly URLs like: www.server.com/Customer/List, instead of something like www.server.com/Customers.aspx.

The routing part is now also added to the ASP.NET Web Form 4.0, so we can now use routing to avoid pointing to a .aspx file and ugly query stings. Scott Guthrie have wrote a blog post about it here. I will only write a short post to introduce it.

To define a route, we will use the Application_Start event of the Gloabal.asax file (a file which will be “executed” every time we visit a .aspx page). The Application_Start event will only be executed one time, and that is when the application starts (the first user visit our app). By using the static RouteTable class, we can add routes to the RouteTable’s Routes collection. This is done by using the MapPageRoute method. The MapPageRoute method can take some parameters, for example the name of the Route (to give a route an identifier so we can get and create routes in our code), the new URL where we also can specify parameters and route constraints etc. So for example if we have a URL look like this: www.server.com/Customer.aspx?id=10, we can use the Route feature to use a URL like this instead: www.server.com/Customer/10. The following code will setup this route:

void RegisterRoutes(RouteCollection routes)
{
      routes.MapPageRoute(
          "viewCustomerDetails",
         "Customer/{ID}",
        "~/Customer.aspx");
}

void Application_Start()
{
       RegisterRoutes(RouteTable.Routes);
}

I like this feature and will use it in all of my Web apps, where I need to use Web Forms, I will mostly use the ASP.NET MVC framework ;)

Some features I love in VS 2010

2009-10-08T12:12:00Z

This post will not be so long, I want to write a little about some Visual Studio 2010 features I love. First of all the changes made to C# is great, the default value on parameters rocks! When I implement Frameworks, I often ended up with something like this:

public void Log(string message)

public void Log(string message, string category)

public void Log(string message, string category, .......)

The last method is the one that have the most of the code, the other method with few parameters, only calls the last one, and pass null or an empty string as values to the extra arguments:

Log(message, null, ......)

Note: The code above is not taken from a real example, only used as pseudo code.

Now with C# 4.0, we can instead set a default value on a argument, which will get rid of the extra methods, for example:

public void Log(string message, string category = null, .....)

The dynamic feature in C# is ok, but at the moment I will not use it. When we use the dynamic when we declare a varible, it will be evaluated first at runtime. It's a nice feature when we want C# to use stuff from other dynamic languages.

dynamic something = ....

something.Hello();

Entity Framework 4.

Will be great now when it will support POCO (Plain old clr object):

public class Customer
{
      public string FirstName
      {
             get { ... }
             set { ... }
      }
}

There are so many other features improvements to EF, need a new blog post for that, but the POCO support and the model first approached is better supported than the first version.

ASP.NET AJAX 4.0

I love the client-side binding, I have some blog post about it, so you can read about it here:

http://weblogs.asp.net/fredriknormen/archive/2009/09/16/asp-net-ajax-4-0-preview-5-working-with-converters-and-the-new-cdn.aspx

http://weblogs.asp.net/fredriknormen/archive/2009/09/11/keep-the-first-empty-item-in-a-listbox-when-using-asp-net-ajax-4-0-preview-5-and-observer.aspx

http://weblogs.asp.net/fredriknormen/archive/2009/09/11/asp-net-ajax-4-0-preview-5-available.aspx

Silverlight designer

Visual Studio 2010 have now enabled the Silverlight designer, it was not enabled in the previous Visual Studio, so we can now easier and faster create our Silverlight apps, and no need to run Expression Blend and VS at the same time.

Improvements for web developer

Better Java-script intellisense. Easier to add Server controls to the .aspx file. Something we need to add before was the runat="seerver" attribute, it's now directly added when we add a Server control in the source mode (not talking about to drag a control, it when we write the code).

Code Contract

I like design-by-contract, think everyone should read about it. We can now use code contract in our code. What I have heard, we need the VSTS version for static checking. You can read more avout Code contract here: http://msdn.microsoft.com/en-us/devlabs/dd491992.aspx

Create an automatic scrollable image slider in Silverlight

2009-09-18T10:37:00Z

I guess someone will send me an comment and say something like: “Why not simply use XXXX, why write your own control” ;) I know there are a lot of controls out there that will do stuff for me, but I want to know how they are created, and try to create my own solution to learn more etc.

I’m working on a small and relative simple Silverlight app for my brother, and I wanted to make it possible for the users to see the images as thumbnails (he is a photographer on his spare time and want a site to show his works). The thumbnails should be placed after each other horizontal in a scrollable list, the list should be scrollable automatically.

You can see the list of Thumbnails at the bottom of the image above. I wanted the list of Thumbnails to be scrollable, but not by moving a scrollbar, instead an automatic scrolling when the mouse is heading to the right or left side of the list. I was first thinking of using a Canvas and use the Canvas.Top and Left attached property to scroll the thumbnails, but I decided to take advantage of the ScrollViewer control. The problem with the ScrollViewer is that we don’t have a property to set the scrollers’s position, instead we have to use the ScrollToHorizontalOffset method. So I couldn’t define an animation for handling the scrolling, instead I decide to use the DispatchTimer class and handle the “animation” on my own.

private DispatcherTimer _thumbnailScrollTimer = new DispatcherTimer();

public AutomaticImageSlider()
{
      InitializeComponent();

       _thumbnailScrollTimer.Interval = new TimeSpan(0, 0, 0, 0, 1);
       _thumbnailScrollTimer.Tick += new EventHandler(_thumbnailScrollTimer_Tick);
}

The reason I used the DispathTimer is because every time it ticks based on an interval an event is trigged, the event handler for the Tick will be executed on the UI thread. I set the interval of the Timer control to 1 millisecond, this value can of course be changed, based on how fast and often I want to update the ScrollViewer. I put my ScrollViewer inside of a StackPanel, and hooked up to the StackPanel’s MouseMove event.

<StackPanel
        x:Name="thumbnailViewer"
        MouseMove="thumbnailViewer_MouseMove"
        HorizontalAlignment="Center"
        VerticalAlignment="Bottom"
        Background="Black">

            <ScrollViewer
                x:Name="thumbnailViewerScroller"
                Padding="0"
                BorderThickness="0"
                VerticalScrollBarVisibility="Hidden"
                HorizontalScrollBarVisibility="Hidden">
                
               <!-- Images here, I add the images dynamically -->
            
            </ScrollViewer>

</StackPanel>

I only wants to start the timer when I move the mouse over a specific part of the StackPanel, so when the mouse are in the middle part of the ScrollViewer the timer should be idle (stopped). The MouseMove event will check if the mouse is within a specific position and if it is, the ScollViewer should start to scroll until it reached the end of its content or the mouse is leaving the area.

private void thumbnailViewer_MouseMove(object sender, MouseEventArgs e)
 {
      var x = e.GetPosition(sender as UIElement).X;

       if (x >= 300 && x <= 700)
       {
            _acceleration = 0;
            _thumbnailScrollTimer.Stop();
            _thumbnailScrollTimerStarted = false;
       }
       else
       {
            if (x > 700)
                 _acceleration = (int)(Math.Pow((x - 512), 1.5) / 1200);
            else if (x < 300)
                 _acceleration = -(int)(Math.Pow((512 - x), 1.5) / 1200);

            if (!_thumbnailScrollTimerStarted)
                 _thumbnailScrollTimer.Start();

            _thumbnailScrollTimerStarted = true;
        }
  }

By using the MouseEventArgs’s GetPosition method, I can get the position of the mouse. If the mouse is between X 300 and 700, the ScrollView should stand still and the timer should be stopped. If the mouse X position is between 0 – 300, the ScrollViewer should start to scroll to the right direction, if the mouse X position is larger than 700, the ScrollViewer should start scrolling to the Left direction. I have a private field with the name _acceleration, it’s how fast the ScrollViewer should be moving. The acceleration will increased based on the mouse X position. This will create a smother and more user friendly scrolling. My acceleration calculation code is based on a fixed width of the ScrollViwer, the width is set to 1024 pixels. I use Math.Pow to make sure the acceleration should not be linear. As you can see, the MouseMove will start the timer. The Tick event of the timer will make sure to move the ScrollViewer’s scroller.

void _thumbnailScrollTimer_Tick(object sender, EventArgs e)
{
     thumbnailViewerScroller.ScrollToHorizontalOffset(thumbnailViewerScroller.HorizontalOffset + _acceleration);

     if (thumbnailViewerScroller.HorizontalOffset + _acceleration <= 0)
        _thumbnailScrollTimer.Stop();
}

I use one if statement to make sure the Timer will stop when the ScrollViewer’s scroller is at the beginning of the ScrollViewer. I should also have one if it reaches the end of the ScrollViewer, but I don’t really know when it reaches the end, the HorizontalOffset value it’s based on the ScrollerViewer’s content, and that content can vary.

Here is the code of a full working example:

MainPage.xaml

<UserControl x:Class="SilverlightApplication7.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">


        <StackPanel
        x:Name="thumbnailViewer"
        MouseMove="thumbnailViewer_MouseMove"
        Background="Black" Height="208" Width="1024">

            <ScrollViewer
                x:Name="thumbnailViewerScroller"
                Padding="0"
                BorderThickness="0"
                VerticalScrollBarVisibility="Hidden"
                HorizontalScrollBarVisibility="Hidden">

                <StackPanel Orientation="Horizontal">
                    <Rectangle Width="200" Height="200" Fill="Red" Margin="4"></Rectangle>
                    <Rectangle Width="200" Height="200" Fill="Red" Margin="4"></Rectangle>
                    <Rectangle Width="200" Height="200" Fill="Red" Margin="4"></Rectangle>
                    <Rectangle Width="200" Height="200" Fill="Red" Margin="4"></Rectangle>
                    <Rectangle Width="200" Height="200" Fill="Red" Margin="4"></Rectangle>
                    <Rectangle Width="200" Height="200" Fill="Red" Margin="4"></Rectangle>
                    <Rectangle Width="200" Height="200" Fill="Red" Margin="4"></Rectangle>
                    <Rectangle Width="200" Height="200" Fill="Red" Margin="4"></Rectangle>
                    <Rectangle Width="200" Height="200" Fill="Red" Margin="4"></Rectangle>
                </StackPanel>
            
            </ScrollViewer>

        </StackPanel>
  </Grid>
</UserControl>

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Threading;

namespace SilverlightApplication7
{
    public partial class MainPage : UserControl
    {
        private int _acceleration = 0;
        private bool _thumbnailScrolltTimerStarted;
        private DispatcherTimer _thumbnailScrollTimer = new DispatcherTimer();

        public MainPage()
        {
            InitializeComponent();

            _thumbnailScrollTimer.Interval = new TimeSpan(0, 0, 0, 0, 1);
            _thumbnailScrollTimer.Tick += new EventHandler(_thumbnailScrollTimer_Tick);

        }

        void _thumbnailScrollTimer_Tick(object sender, EventArgs e)
        {
            thumbnailViewerScroller.ScrollToHorizontalOffset(thumbnailViewerScroller.HorizontalOffset + _acceleration);

            if (thumbnailViewerScroller.HorizontalOffset + _acceleration <= 0)
                _thumbnailScrollTimer.Stop();
        }


        private void thumbnailViewer_MouseMove(object sender, MouseEventArgs e)
        {
            var x = e.GetPosition(sender as UIElement).X;

            if (x >= 300 && x <= 700)
            {
                _acceleration = 0;
                _thumbnailScrollTimer.Stop();
                _thumbnailScrolltTimerStarted = false;
            }
            else
            {
                if (x > 700)
                    _acceleration = (int)(Math.Pow((x - 512), 1.5) / 1200);
                else if (x < 300)
                    _acceleration = -(int)(Math.Pow((512 - x), 1.5) / 1200);

                if (!_thumbnailScrolltTimerStarted)
                    _thumbnailScrollTimer.Start();

                _thumbnailScrolltTimerStarted = true;
            }

        }
    }
}

Feel free to send me any comments and feedback, you can also find me on twitter: http://www.twitter.com/fredrikn

ASP.NET AJAX 4.0 Preview 5 – Working with Converters and the new CDN

2009-09-16T21:01:00Z

In this blog post I’m going to show you how you can use the new Converter feature during data binding, to make this post more special I have used the new Microsoft AJAX CDN (Content Delivery Network), so I don’t need to have the AJAX 4.0 script on my server. The example code I use in this post, will use the ASP.NET AJAX DataView and also Microsoft ADO.NET Data Services to retrieve data from the server. My fantasy isn’t so special good, but I decided to make a little “rental” application, where I will use ASP.NET AJAX to simply show a list of cars and the current rental status. The status of a rental car will be sent to the client as a string and can be of the following values, Approved, Not Approved and Pending. The little app I’m building for this post, will show the rental status as different colors for the user.

Green color will show that the rental of the car is approved, red will indicate not approved and yellow will indicate a pending status. My little database have one simple table, called Rental (lack of fantasy), with three columns, ID, Description and Status. I have used Entity Framework together with ADO.Net Data Source to get the data from the database. Here is the ADO.NET Data Service, I have added a Rental operation to only enable access to the operation to get Rental entities.

public class RentalWebDataService : DataService<RentalModel.RentalEntities>
{
    public static void InitializeService(IDataServiceConfiguration config)
    {
        config.SetEntitySetAccessRule("Rental", EntitySetRights.AllRead);
        config.SetServiceOperationAccessRule("Rental", ServiceOperationRights.AllRead);
    }

    [WebGet]
    public IQueryable<RentalModel.Rental> Rental()
    {
        return this.CurrentDataSource.Rental;
    }
}

To use ASP.NET AJAX 4.0 Preview 5, I have not used my local scripts, instead use the new Microsoft AJAX CDN. The Microsoft CDN service provides caching support for AJAX libraries (including jQuery and ASP.NET AJAX) and are composed of “edge cache” servers, they are strategically placed around the world to make sure your application will use the nearest server to get the ASP.NET AJAX scripts, isn’t that cool?! The service is free and both for commercial and non-commercial purpose. To get a JavaScript from the Microsoft CDN, you can simply use the <script> tag to include the script from ”http://ajax.microsoft.com/ajax”. Microsoft CND will use sub folders to versioning the different kind of scripts. The ASP.NET AJAX 4.0 Preview 5.0 script can be found under the /0909/ folder (the name of the folder represents the year and month when the ASP.NET AJAX was released). You can find the JavaScript and URLs here: http://www.asp.net/ajax/cdn/

Note: ScriptManger can automatically request JavaScript files form the Microsoft CDN if the EnableCdn property of the ScriptManager is set to true.

I have used the following code to include the ASP.NET AJAX 4.0 Preview 5.0 script in my demo, to make sure I can use Templates, and ADO.NET DataServices:

<script src="http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjax.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjaxTemplates.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjaxAdoNet.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjaxDataContext.js" type="text/javascript"></script>

To use the ADO.NET Data Service (RentalWebDataSerivce) on the client-side, the ASP.NET AJAX $create shortcut can be used to create a ADO.Net DataContext object, the DataContex is the proxy class to access the ADO.Net Data Service:

var RentalService = {};

RentalService.dataContext = $create(Sys.Data.AdoNetDataContext,
                                         {
                                             serviceUri: "RentalWebDataService.svc",
                                             mergeOption: Sys.Data.MergeOption.appendOnly
                                         });

The following is the template I have used to list the cars:

 <table sys:attach="dataview"
        class="sys-template"
        dataview:dataprovider="{{ RentalService.dataContext }}"
        dataview:fetchoperation="Rental"
        dataview:autofetch="true">

        <tr sys:if="$index==0">
            <td>Booking No</td>
            <td>Description</td>
        </tr>
        
         <tr sys:style-background-color="{binding Status, convert=convertStatusToColor, ColorType=Name}">
             <td>{{ ID }}</td>
             <td>{{ Description }}</td>
         </tr>
</table>

Yes, I know, I use a table instead of a DIV, shame on me..

To create a template the class=”sys-template” must be applied to the root element of the template, the sys:attached=”dataview” will indicate that I will use the ASP.NET AJAX 4.0 DataView features together with the template. To make sure the DataView will get its data from the RentalWebDataService, the dataview:dataprovider attribute is used and its value is set to the RentalService.dataContext object, the DataView’s autofecth property is also set to true, to automatically fetch data. The fetchoperation property will specify which operation of the RentalWebDataServices should be used when the DataView fetches the data.

There are two ways to bind data within a template, for example the short {{ field }} expression or the {binding field} expression. As you can see I have used both expressions in the template, one for the background-color style (to bind a value to a specific style attribute, the sys:style-<style> attribute is used). The {{ ID }} and {{ Description }} shortcut will make sure to get the data from the Rental’s (The entity returned from the Rental operation of the RentalWebDataService ) ID and Description property. Take a look at the binding expression used for the <tr> background-color style:

<tr sys:style-background-color="{binding Status, convert=convertStatusToColor, ColorType=Name}">

There is now an option to specify a Converter, a method which will take the bounded value and pass it as an argument to the specified method and do a conversion and return a new whole value. The Status property in my case returns a string with different kind of status, Approved, NotApproved and Pending. What I want to do, is to convert those values into different colors as I mention earlier in my post. To do that I have used the new Converter feature. To set up a converter is easy just use the Sys.Binding.converters property and assign a method to it with two arguments, the value to convert and a binding argument (holds information about the binding).

Sys.Binding.converters.convertStatusToColor = function(status, binding)
{
     //do something then return the converted value
}

One great thing with the converter, is the possibility to use expandos, for example in my code I have added a ColorType expando to specify if the color that returned from the converter should be a name or not. The binding argument of the converter method can be used to get the expando, for example:

"{binding Status, convert=convertStatusToColor, ColorType=Name}"


Sys.Binding.converters.convertStatusToColor = function(status, binding)
{
    if( binding.ColorName == 'Name')
          //....
     //do something then return the converted value
}

I have created the ugliest converter method ever made, here it is:

Sys.Binding.converters.convertStatusToColor = function(status, binding)
{
       if (binding.ColorType == 'Name')
      {
             if (status == 'Approved')
                    return 'green';
                else if (status == 'NotApproved')
                    return 'red';
                else if (status == 'Pending')
                    return 'yellow';
                else
                    return 'white';
        }
        else
       {
             if (status == "Approved")
                 return '#00ff00';
             else if (status == "NotApproved")
                 return '#ff0000';
             else if (status == 'Pending')
                 return '#ffff00';
             else
                 return '#ffffff';
        }
}

Well, it’s a simple method to convert the incoming string, and return a color for the <tr>’s background-color. Here is the whole client-side code:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjax.js" type="text/javascript"></script> 
    <script src="http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjaxTemplates.js" type="text/javascript"></script>
    <script src="http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjaxAdoNet.js" type="text/javascript"></script>
    <script src="http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjaxDataContext.js" type="text/javascript"></script>


    <script type="text/javascript">

        var RentalService = {};

        RentalService.dataContext = $create(Sys.Data.AdoNetDataContext,
                                         {
                                             serviceUri: "RentalWebDataService.svc",
                                             mergeOption: Sys.Data.MergeOption.appendOnly
                                         });


        Sys.Binding.converters.convertStatusToColor = function(status, binding) {

            if (binding.ColorType == 'Name') {

                if (status == 'Approved')
                    return 'green';
                else if (status == 'NotApproved')
                    return 'red';
                else if (status == 'Pending')
                    return 'yellow';
                else
                    return 'white';
            }
            else {
                if (status == "Approved")
                    return '#00ff00';
                else if (status == "NotApproved")
                    return '#ff0000';
                else if (status == 'Pending')
                    return '#ffff00';
                else
                    return '#ffffff';
            }
        }

    </script>
    
    <style type="text/css">
        .sys-template { display:none; }
    </style>

</head>
<body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView">
    
    <table sys:attach="dataview"
        class="sys-template"
        dataview:dataprovider="{{ RentalService.dataContext }}"
        dataview:fetchoperation="Rental"
        dataview:autofetch="true">

        <tr sys:if="$index==0">
            <td>Booking No</td>
            <td>Description</td>
        </tr>
        
         <tr sys:style-background-color="{binding Status, convert=convertStatusToColor, ColorType=Name}">
             <td>{{ ID }}</td>
             <td>{{ Description }}</td>
         </tr>
    </table>
    
</body>
</html>

Summary

In this blog post you have seen how to data bind and use the DataView to do client-side binding to a ADO.NET Data Service, you have also got introduced to the Microsoft AJAX NDC, if you want to get more information about the NDC, check out Scott Guthrie's blog: http://weblogs.asp.net/scottgu/archive/2009/09/15/announcing-the-microsoft-ajax-cdn.aspx, you have also seen the new Preview 5 converter feature.

To find more information about ASP.NET AJAX 4.0 Preview 5.0, you can check out my two earlier posts:

http://weblogs.asp.net/fredriknormen/archive/2009/09/11/asp-net-ajax-4-0-preview-5-available.aspx

http://weblogs.asp.net/fredriknormen/archive/2009/09/11/keep-the-first-empty-item-in-a-listbox-when-using-asp-net-ajax-4-0-preview-5-and-observer.aspx

Jim, Dave and Bertrand Le Roy’s posts on Preview 5:
http://weblogs.asp.net/jimwang/archive/2009/09/11/asp-net-ajax-preview-5-and-updatepanel.aspx

http://weblogs.asp.net/infinitiesloop/archive/2009/09/10/microsoft-ajax-4-preview-5-the-dataview-control.aspx

http://weblogs.asp.net/bleroy/archive/2009/09/14/building-a-class-browser-with-microsoft-ajax-4-0-preview-5.aspx

Use a ResourceDictionay and an external resources located in an assembly

2009-09-16T12:09:00Z

I have notice that some developers are asking questions about how to use a ResourceDictionary and reference it to a resource located in a separate assembly. Here is a simple step by step guide to make it possible, I assume you already have a Silverlight project created:

1) Create a new Silverlight Class Library

2) Add a Silverlight Resource Dictionary file to the Class Library project

3) Add your styles to it and build

4) From your Silverlight Application, add a reference to the Silverlight Class Library Project or assembly file

5) In the Resource property of the App, or UserContorl etc add a ResourceDictionary element, set the source property by using the following pattern ”/<assembly>;component/<resource>.xaml”. If the name of your Silverligth Class Library is ”MyClassLib” and have a Resource Dictionary file called MyDictionary.xaml in the root folder of the Silverlight Class Library, the Source property should have the following value:

6) You can now use the styles.

If you don’t have more than just a Dictionary Resources added to the Assembly, and want to share the resources to other Silverlight app, just use a simple .xaml file which you copy and share among the different Silverlight apps, easier to add and use, and you can avoid extra dependencies to an assembly and adding references. Only use an assembly with a resource if you want to protect the resource so others can’t change your original resource, or have controls or other logic added into your assembly which you are going to use in your Silverlight app.

Silverlight and scaling

2009-09-15T14:00:00Z

I have tried so many different ways to scale a Silverlight app while resizing the browser. When I almost got everything to work, the Grid control start to behave really strange, start to clip my app. Why should it be so hard to get scaling to work, why not just add a property to the Silverlight host, scaling=”enable”, and it will automatically scale our Silverlight app. After some time I got everything to work perfectly and thought maybe some other people would be interested in how to create a Silverlight app that can scale, so here is my solution. This post will ONLY focus on scaling the whole Silverlight host content with the ScalingTransform feature, to make the app fit into any kind of resolution. The code is tested on Silverlight 3.0.

To get scaling to work we need to have a Canvas as our root element, if not, we can’t get it to work perfectly, if we for example should have used the Grid layout control as our root element, it will start cutting your app like a cutting machine, the worst possible scaling enemy. Best way to get an app scale perfectly is to not have a fixed size on the User Control and let the host control have the size set to 100%. We need to have a default size of our app, for example 1024x768 to make sure we have a number to use in our calculation to get the correct width and height ratio. Make sure to only add one child element to the Canvas, and that should be the “root” element of your content. For example:

<Canvas>
        <Grid x:Name="contentRoot">
            <!-- Add your content here -->
        </Grid>
</Canvas>

The child element of the Canvas, don’t need to be a Grid layout control, we can instead for example use a StackPanel or other layout control which we want to be our new “LayoutRoot” element (referring to the default Silvelright template, where the User Control’s first element is named “LayoutRoot”). If we want to set the first child element of the Canvas to a specific size, we must also make sure it will be our default (idle) size which will be used in the scaling calculation in our code. We can use different events to perform our scaling calculation and set the scaling, for example a FrameworkElement’s SizeChanged event, such as the UserControl.SizeChanged event (as long as the User Control doesn’t have a fixed size), we can also use the Application.Host.Content.Resized event (will only work if we don’t have a fixed size on our Silverlight host, will execute the first time the app is started, but will not be trigged when we resize the browser window). In this post I will use the Application.Host.Content.Resized event. We can hook up to the Resized event in the constructor of our app.

public ScaleableContent()
{
      Application.Current.Host.Content.Resized += new EventHandler(Content_Resized);
}

void Content_Resized(object sender, EventArgs e)
{
}

For our default (idle) size for the scaling calculation we can either use a private field or get the information from our Canvas’s child element if we have given it a size. For a normal web page, the recommended size seems still to be 1024x768, so why not use that. I decided to use a private field of type Size.

private Size _contentActualSize = new Size(1024, 768);

When we resize our browser we need to get the ratio between our idle size and the browser window’s size. The formula for this is really simple, everyone should have learned it in school ;) We add the calculation code to the Resized event.

var hostContentActualHeight = Application.Current.Host.Content.ActualHeight;
var hostContentActualWidth = Application.Current.Host.Content.ActualWidth;

var heightRatio = hostContentActualHeight / _contentActualSize.Height;
var widthRatio = hostContentActualWidth / _contentActualSize.Width;

The Application.Current.Host.Content.ActualHeight and ActualWidth will give us the browser’s content size (or to be correct the size of the host content). We divide it with our default size to get the ratio between our default size and the browser's content size. We use this ratio to create a ScalingTransform and set it the RenderTransform property of Canvas’s child element.

var ratio = 1.0;

if (heightRatio < widthRatio && heightRatio < 1)
   ratio = heightRatio;
else if (widthRatio < 1)
   ratio = widthRatio;



contentRoot.RenderTransform = new ScaleTransform() { ScaleY = ratio, ScaleX = ratio };

The ScaleY and ScaleX property uses a decimal value, where 0.5 is 50% of the original size, and 1 is 100%, 2 is 200% etc. We only want to apply the smallest ratio, that is why we do a check if heightRatio is lesser than the widthRatio. If we don’t do this check, our resizing will not work correctly, because we do the calculate of the X and Y scaling separately. In the code above there is also a check to only set the scaling if the width or height ratio is lesser than 1, it will only make sure our app will stay on 100% or less in scaling, to not expand the app. If you want it to expand and be larger than the default size, just remove the check form the code. Here is the final code:

private Size _contentActualSize = new Size(1024, 768);

public ScaleableContent()
{
      Application.Current.Host.Content.Resized += new EventHandler(Content_Resized);
}

void Content_Resized(object sender, EventArgs e)
{
    var hostContentActualHeight = Application.Current.Host.Content.ActualHeight;
    var hostContentActualWidth = Application.Current.Host.Content.ActualWidth;

    var heightRatio = hostContentActualHeight / _contentActualSize.Height;
    var widthRatio = hostContentActualWidth / _contentActualSize.Width;

    var ratio = 1.0;

    if (heightRatio < widthRatio && heightRatio < 1)
       ratio = heightRatio;
    else if (widthRatio < 1)
       ratio = widthRatio; 

     contentRoot.RenderTransform = new ScaleTransform() { ScaleY = ratio, ScaleX = ratio };
}

This code is kind of boring to add to every app where we want to use scaling, isn’t it? So what I did was to create a ScalableContent control. The ScalableContent control inherits from the Canvas control and only want one child element, the new “LayoutRoot” element, the element to add the ScaleTransform to. I also need to take care about some alignment issues, for example if we set the Canvas’s HorizontalAlignment property to center, it will start render the content from the center to the right, not align the content into the middle of the screen. So solve this I decided to use the Left margin, I could have used the Canvas.Left attached property, but didn’t. Here is the code of the Scalable control:

public class ScalableContent : Canvas
{
     private FrameworkElement _scaleableElement;


     public ScalableContent()
     {
          this.Loaded += (o,e) =>
                 {
                     if (this.Children != null && this.Children.Count > 0)
                    {
                        if (this.Children.Count > 1)
                            throw new SystemException("ScalableContent can only have one child element");

                        _scaleableElement = this.Children[0] as FrameworkElement;

                        if (_scaleableElement != null)
                            Application.Current.Host.Content.Resized += new EventHandler(Content_Resized);
                    }
                };
     }


     public Size IdleSize { get; set; }


     void Content_Resized(object sender, EventArgs e)
     {
            var contentActualWidth = Application.Current.Host.Content.ActualWidth;
            var contnetActualHeight = Application.Current.Host.Content.ActualHeight;

            var heightRatio = contnetActualHeight / IdleSize.Height;
            var widthRatio = contentActualWidth / IdleSize.Width;

            var ratio = 1.0;

            if (heightRatio < widthRatio && heightRatio < 1)
                ratio = heightRatio;
            else if (widthRatio < 1)
                ratio = widthRatio;

            var margin = new Thickness(0);

            if (HorizontalAlignment == HorizontalAlignment.Center)
                margin.Left = -((IdleSize.Width * ratio) / 2);
            else if (HorizontalAlignment == HorizontalAlignment.Right)
                margin.Left = -(IdleSize.Width * ratio);

            if (VerticalAlignment == VerticalAlignment.Center)
                margin.Top = -((IdleSize.Height * ratio) / 2);
            else if (VerticalAlignment == VerticalAlignment.Bottom)
                margin.Top = -(IdleSize.Height * ratio);

            _scaleableElement.RenderTransform = new ScaleTransform() { ScaleX = ratio, ScaleY = ratio };;
            _scaleableElement.Margin = margin;
        }
}

Here is how to use it in a XAML file:

<uc:ScalableContent VerticalAlignment="Top" HorizontalAlignment="Center" IdleSize="1024,880">
    
    <Grid x:Name="LayoutRoot" VerticalAlignment="Center" HorizontalAlignment="Center">
    
         <!-- Content here -->

    </Grid>

</uc:ScalableContent>

The control has a IdleSize property, which can be used to set the default (idle) size. To make this control work perfectly, make sure to not give the UserControl a fixed size, nor the Host object or surrounding divs etc on the page where you host the Silverlight app.

I hope this blog post will give some value to some people, the scaling can be tricky to solve if we don’t know where to look etc.

Keep the first “empty” Item in a listbox when using ASP.NET AJAX 4.0 Preview 5 and Observer

2009-09-11T15:09:00Z

I got a question as a comment on my previous post about the new features and changes to ASP.NET AJAX 4.0 Preview 5. I hope I understood the question right ;) It was about using a listbox and add an empty item at the top of the list, and keep it there when adding new items to an array that is bounded to the list, and by using the Observer feature. Maybe some more have or will have the same question, so I decided to write a blog post about it.

In this blog post I will use a sys-template for the listbox, here is an example of a listbox template by using HTML <select> element:


<select sys:attach="dataview"
        class="sys-template"
        dataview:data="{{ customers }}">
        <option sys:value="{{ID}}">{{ Name }}<//option>
</select>

I will in this example use the dataview feature to simply fill the Listbox with values form an array.

If we want to use ASP.NET AJAX 4.0 and the dataview feature, we need to add the sys and dataview namespace to the <body> tag:


<body
    xmlns:sys="javascript:Sys"
    xmlns:dataview="javascript:Sys.UI.DataView">

Note: We don’t need to add the sys:activate=”*” attribute to the <body> element anymore.

I will in this post use a simple hard coded javascript array for the customers bounded to the listbos, and here is my simple array together with a AddCustomer method:

<script type="text/javascript">

    var customers = [
                      { ID : "JD", Name : "John Doe" },
                      { ID : "JD2", Name : "Jane Doe"}
                    ];

    function AddCustomer()
    {
        Sys.Observer.add(customers, { ID: "JD2", Name: "Some Doe" });
    }
    
</script>

The AddCustomer method will make sure to add a new customer to the customers array. The Sys.Observer is used to make sure the listbox which is bound to the customers array should be updated automatically when a new customer is added to the customers array.

Here is the code for the whole solution so far:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/MicrosoftAjax.debug.js"></script>
    <script type="text/javascript" src="Scripts/MicrosoftAjaxTemplates.debug.js"></script>

    <script type="text/javascript">

        var customers = [
                            { ID : "JD", Name : "John Doe" },
                            { ID : "JD2", Name : "Jane Doe"}
                        ];

        function AddCustomer()
        {
            Sys.Observer.add(customers, { ID: "JD2", Name: "Some Doe" });
        }
    
    </script>
    
    <style type="text/css">
    
        .sys-template { display:none; }
    
    </style>
</head>

<body
    xmlns:sys="javascript:Sys"
    xmlns:dataview="javascript:Sys.UI.DataView">
    
    <form id="form1" runat="server">
    <div>
    
    <select sys:attach="dataview"
        class="sys-template"
        dataview:data="{{ customers }}">
            <option sys:value="{{ID}}">{{ Name }}<//option>
    </select>
    
   <input type="button" onclick="AddCustomer();" value="Add item" />
   
    </div>
    </form>
</body>
</html>

As you may already notice there is no empty item at the top of the listbox items. So we add one to the template:


<select sys:attach="dataview"
        class="sys-template"
        dataview:data="{{ customers }}">
            <option value=”” selected="selected">Select an Item<//option>
            <option sys:value="{{ID}}">{{ Name }}<//option>
    </select>

If we run the code, we will notice that several “Select an Item” will be added to the listbox. What we want to do is to keep the first and “empty” item when a new customer is added to the customers array, we don’t want to have the “empty” list repeatable for each item in the list. To solve this we can use the sys:if attribute. We simply use it to see if the index of the currently bounded item is 0, if so, we add the “empty” item. By doing that we will make sure to only have one “empty” item added, and it will only be added when the index is 0.

<select sys:attach="dataview"
        class="sys-template"
        dataview:data="{{ customers }}">
            <option sys:if="$index==0" sys:value="" selected="selected">Select an Item<//option>
            <option sys:value="{{ID}}">{{ Name }}<//option>
</select>

I hope this post may be useful for some of you, but I will be so happy to see more Silverlight developers ;)

ASP.NET AJAX 4.0 Preview 5 available

2009-09-11T07:39:00Z

Microsoft have recently released the Preview 5 of ASP.NET AJAX 4.0 on CodePlex.

In Preview 5 of ASP.NET AJAX 4.0 you can see some improvements to the lient-side data story introduced in previous previews of ASP.NET AJAX. In this release, Microsoft have add support for the following features:

Dynamic and recursive templates

Binding Converters

UpdatePanel support

Here are some changes made from Preview 4 to 5

Declarative Attribute Changes

There is no need to include the sys:active attribute on the <body> element of a page containing declarative markup.


<body
    xmlns:sys="javascript:Sys"
    xmlns:dataview="javascript:Sys.UI.DataView"
    sys:activate="*">

When binding to attributes before we could write something like this:

<ul sys:attach="dataview"
    class="sys-template"
    dataview:data="{{ imagesArray }}">
    <li>
        <h3>{{ Name }}</h3>
        <div>{{ Description }}</div>
        <input type="text" value="{{Name}}" />
    </li>
</ul>

Now all attributes that contain the {{..}} or {binding ..} must now use the “sys” prefix:


<input type="text" sys:value="{{Name}}" />

Some changes has also been made to the “code” and “class” attributes, they are moved to into “Sys”

code:if -> sys:if


<thead code:if="$index==0" sys:if="$index==0">
  <tr>
    <th>Image</th>
    <th>Description</th>
 </tr>
</thead>

code:before -> sys:codebefore
code:after -> sys:codeafter

The ‘class’ attributes have been moved into ‘sys’.

class:foo -> sys:class-foo

The ‘style’ attributes have been moved into ‘sys’.

style:font-size=”8” -> sys:style-font-size=”8”

Top Level Binding

In the previous version of ASP.NET AJAX 4.0, we could only use binding by using a template marked with sys-template, we can now instead use the sys:value=”{binding field, source={{source}}}” attribute, for example:


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/MicrosoftAjax.debug.js"></script>
    <script type="text/javascript" src="Scripts/MicrosoftAjaxTemplates.debug.js"></script>

    <script type="text/javascript">

        var customer = { Name : "John Doe" };
    
    </script>
    
</head>

<body xmlns:sys="javascript:Sys">
    
    <form id="form1" runat="server">
    <div>

         <input type="text" sys:value="{binding Name,source={{customer}} }" />
    
    </div>
    </form>
</body>
</html>

If we have two input field which is bound to the same source, for example

<input id="text" type="text" sys:value="{binding Name, source={{customer}}}"/>
<input id="Text1" type="text" sys:value="{binding Name, source={{customer}}}"/>

and we change the value of field “Text1”, the value of “text” will be automatically changed.

We can also use the Sys.Observer to update the binding value:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/MicrosoftAjax.debug.js"></script>
    <script type="text/javascript" src="Scripts/MicrosoftAjaxTemplates.debug.js"></script>

    <script type="text/javascript">

        var customer = { Name: "John Doe" };
        
        function clickMe()
        {
            //Will not update the fields
            customer.Name = "Hej";

            //Will update the fields
            Sys.Observer.setValue(customer, "Name", "Jane Doe");
        }
    
    </script>
    
</head>

<body   xmlns:sys="javascript:Sys">
    
    <form id="form1" runat="server">
    <div>
    
    <input id="myTemplate" type="text" sys:value="{binding Name, source={{customer}}}"/>
    <input id="Text1" type="text" sys:value="{binding Name, source={{customer}}}"/>
    
    <input type="button" onclick="clickMe()" value="Click Me" />
    
    <div id="form" />
    
    </div>
    </form>
</body>
</html>

Binding Converters and Expandos

Bindings now support converters by using the Sys.Binding.converters field.

{ binding foo,convert=myconverter }

Note: There are no Converters out of the box

Here is an example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/MicrosoftAjax.debug.js"></script>
    <script type="text/javascript" src="Scripts/MicrosoftAjaxTemplates.debug.js"></script>

    <script type="text/javascript">

        var customer = { Name: "John Doe", Age : 31 };
        
        Sys.Binding.converters.myconverter = function(valueToConvert, binding) {
            if (valueToConvert >= 18)
                return "checked";
            else
                return "";
        }
    
    </script>
    
    <style type="text/css">
    
        .sys-template { display:none; }
    
    </style>
</head>

<body
    xmlns:sys="javascript:Sys"
    xmlns:dataview="javascript:Sys.UI.DataView">
    
    <form id="form1" runat="server">
    <div>
    
    <input id="isAdult" type="checkbox" sys:checked="{binding Age, source={{customer}}, convert=myconverter}" />
    
    </div>
    </form>
</body>
</html>

We can also set expandos, for example:

{binding foo,convert=format,format=MM/dd}

Sys.Binding.converters.format = function(value, binding) {
// binding.format === MM/dd
}

Binding Updates

We can now use the sys:innettext and sys:innerhtml to make sure it will show us the HTML code in the browser or as pure HTML. For example if we have a variable “foo” and withthe value “<p>Silverligth Rocks!</p>”, we maybe want it to be displayed as normal text in the browser, if that is the case we can use sys:innettext:


<div sys:innertext=”{{ foo }}”></div>

If we want it to result as a normal HTML we can instead use the innerhtml:


<div sys:innerhtml=”{{ foo }}”></div>

Compatibility with the ASP.NET UpdatePanel

Preview 4 of the ASP.NET AJAX 4.0 didn’t support UpdatePanel in ASP.NET 3.5. But in the preview 5 will now work with either 3.5 or 4.0 on the server. To make sure the Preview 5 should work with an UpdatePanel, you need to replace the partial rendering script MicrosoftAjaxWebForms.js wtih the 4.0 version.

<asp:ScriptManager runat=”server”>
    <Scripts>
        <asp:ScriptReference Name=”MicrosoftAjax.js” Path=”~/scripts/MicrosoftAjax.js” />
        <asp:ScriptReference Name=”MicrosoftAjaxWebForms.js” Path=”~/scripts/MicrosoftAjaxWebForms.js” />
    </Scripts>
</asp:ScriptManager>

Supported Browsers

The ASP.NET AJAX 4.0 Preview 5 is tested on the following browsers (I know a lot of people are asking this kind of questions ;))

Microsoft Internet Explorer 6

Microsoft Internet Explorer 7

Microsoft Internet Explorer 8 RC1

Mozilla Firefox 3 and 3.5

Apple Safari 4

Opera 10

Chrome 2

How to use the ASP.NET AJAX 4.0 Preview 5 in your applications

If we want to use the ASP.NET AJAX 4.0 Preview 5, we need to reference to the new script files, we can do this by using the <script> tag or adding ScriptReferernces to the ScriptManager control:

<asp:ScriptManager ID="sm" runat="server">
    <Scripts>
        <asp:ScriptReference Name="MicrosoftAjax.js" Path="~/scripts/MicrosoftAjax.js" />
        <asp:ScriptReference ScriptMode="Inherit" Path="~/scripts/MicrosoftAjaxTemplates.js" />
        <asp:ScriptReference ScriptMode="Inherit" Path="~/scripts/MicrosoftAjaxAdoNet.js" />
        <asp:ScriptReference ScriptMode="Inherit" Path="~/scripts/MicrosoftAjaxDataContext.js" />
    </Scripts>
</asp:ScriptManager>

Example using <script> tags:

<script type="text/javascript" src="../scripts/MicrosoftAjax.debug.js"></script>
<script type="text/javascript" src="../scripts/MicrosoftAjaxTemplates.debug.js"></script>
<script type="text/javascript" src="../scripts/MicrosoftAjaxAdoNet.debug.js"></script>
<script type="text/javascript" src="../scripts/MicrosoftAjaxDataContext.debug.js"></script>

.NET RIA Services Exception handling

2009-08-20T09:30:00Z

Note: This post is based on the July preview of the .NET RIA Services, so changes may happen in a future release of the framework

At the moment I’m updating a code example for my Silverlight 3.0 course and have added some exception handling to the code. I also got a question about how to handle exception while calling the Load operation of the DomainService class. So I decided to write a blog post about it, maybe someone more have the same question.

By default if you make a call to a DomainService query method, you will not get an exception on the client-side, if you don’t adding some extra code. Lets pretend that the following code is your DomainService and Query method:

public class MyDomainService : DomainService
{
      public IEnumerable<Customer> GetCustomers()
      {
           //Code that can throw an exception;
       }
}

The method above will throw an exception. If you on the client-side want to “call/use” the GetCustomers method, you will use the generated DomainContext class’s Load method:


var d = new MyDomainContext();

var loadOperation = d.Load<Customer>(d.GetCustomersQuery(), MyCallBack, null);

LayoutRoot.DataContext = d.Customers;

When this code is executed, you will not get any exception, so the user or you may think that no exception have occurred. But that isn’t the case. So what I’m going to write about now, is different way you can check if an exception occurred (Wouldn’t it be nice if we only could get an exception instead of adding extra code to check if an exception is thrown ;)).

The LoadOperation class has two properties we can use, HasError and Error. To check if we got an exception we can use the HasError property, if we want to get information about an exception, we can use the Error property. The first example I’m going to use, will only display an exception for the client.

On the client-side I have a StackPanel called myErrorPanel, it also have a TextBlock where the Text property is bound to a property path “Error.Message”.


<StackPanel x:Name="myErrorPanel">
      <TextBlock Text="{Binding Path=Error.Message}"></TextBlock>
</StackPanel>

In the code-behind we can now write the following code which will bound the LoadOperation to the myErrorPanel:


var d = new MyDomainContext();

var loadOperation = d.Load<Customer>(d.GetCustomersQuery());

LayoutRoot.DataContext = d.Customers;
myErrorPanel.DataContext = loadOperation;

If the Load method of our DominContext has an error, the Error Message will be displayed for the User. By using this solution, we will not have any idea if an error has occurred during the Load operation, if it does it will only be shown for the User. The StackPanel will also take up some space on the user interface, so to solve it we can for example add a Converter, and bound the HasError to the StackPanel’s Visibility property. The following two other solution will instead show us, how we can use a callback method and the LoadOperation’s Complteted event to have a better control if an exception is thrown during the Load operation.

The DomainContext’s Load method can take a callback as an parameter, by using a callback, we will get a notification when the Load operation is completed, and we can also see if there was any error during the Load operation. The following code will use a callback and check if an error has occurred:


var d = new MyDomainContext();

var loadOperation = d.Load<Customer>(d.GetCustomersQuery(), MyCallBack, null);

...


void MyCallBack(LoadOperation<Customer> loadOperation)
{
       if (loadOperation.HasError)
            //Handle the error
}

The following solution will use the LoadOptions’s Completed event to check if an error has occurred:


var d = new MyDomainContext();

var loadOperation = d.Load<Customer>(d.GetCustomersQuery());
loadOption.Completed += new EventHandler(loadOption_Completed);

...


void loadOption_Completed(object sender, EventArgs e)
{
      if (((LoadOperation)sender).HasError)
            //handle the error
}

If you wonder what solution I prefer, it would be the one that uses a callback. I do want to see some changes to the .NET RIA Services Load operations, like specifying a callback just for handling exceptions, and a default generated callback added to the DominaContext, which will be called if no callback is used, by doing so, we could get an exception when the Load fails without adding some extra code.