Kazi Manzur Rashid's Blog

Telerik Extensions for ASP.NET MVC Survey

kazimanzurrashid — Mon, 16 Nov 2009 19:19:05 GMT

Dear readers, as you know that we have released our beta few weeks back, we are currently looking for your feedback on the existing features as well as the features that you would like to see in our next release. This is a very short survey only 4/5 screens to complete, click here to submit your valuable feedback.

Thanks in advance for your precious time.

ASP.NET MVC View and Transaction

kazimanzurrashid — Wed, 11 Nov 2009 07:19:05 GMT

Scott showed how to render the Grid in a Transaction. Certainly it does the job but in my opinion view component should not be responsible for this kind of cross cutting concerns, instead we can use the Action Filters. Lets see how we can utilize the Action Filter in this scenario instead of modifying the Grid code. What Scott is trying to do is encapsulate the data access operation in a transaction, the Action Filter has several methods which the ASP.NET MVC framework executes in different stages of a request. In this case, we will use the OnActionExecuting which fires before the code enters into the controller method to start a transaction and OnResultExecuted which fires when the view is processed, we will commit/rollback based upon the status, here is the code that would process the action result in a transaction:

namespace AltNorthwind
{
    using System.Web.Mvc;
    using System.Transactions;

    public class TransactionAttribute : ActionFilterAttribute
    {
        private CommittableTransaction transaction;

        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            transaction = new CommittableTransaction();

            base.OnActionExecuting(filterContext);
        }

        public override void OnResultExecuted(ResultExecutedContext filterContext)
        {
            base.OnResultExecuted(filterContext);

            try
            {
                if ((filterContext.Exception != null) && (!filterContext.ExceptionHandled))
                {
                    transaction.Rollback();
                }
                else
                {
                    transaction.Commit();
                }
            }
            finally
            {
                transaction.Dispose();
            }
        }
    }
}

Next, we will decorate the Controller Action method with this attribute like the following:

[Transaction]
public ActionResult Index()
{
    return View(repository.All());
}

Hope, you would find it useful.

Web Asset Enhancements in Telerik Extensions for ASP.NET MVC

kazimanzurrashid — Mon, 09 Nov 2009 07:28:38 GMT

[Updated: Source code attached]

In the recent release, there has been few enhancements in the Web Asset Management. One of the new thing that we introduced which was actually requested by the community is Shared Web Asset. In this post, I will show you, how to use it in your ASP.NET MVC Application.

In the previous version, you can only define the web assets either in the ScriptRegistrar or StyleSheetRegistrar like the following:

<% Html.Telerik()
       .ScriptRegistrar()
       .Scripts(scripts =>
                scripts.AddGroup("myScripts",
                                  group => group.Add("script1.js")
                                                .Add("script2.js")
                                                .Add("script3.js")
                                                .Combined(true)
                                                .Compress(true)
                                )
               )
       .Render();%>

if you want to reuse it in another page, you have to copy the exact same thing. Also the url that it generates is bit cryptic and very long, for example for the above the following html snippet is generated:

<script type="text/javascript" src="http://weblogs.asp.net/asset.axd?id=rgAAAB-LCAAAAAAABADtvQdgHEmWJSYvbcp7f0r1StfgdKEIgGATJNiQQBDswYjN5pLsHWlHIymrKoHKZVZlXWYWQMztnbz33nvvvffee--997o7nU4n99__P1xmZAFs9s5K2smeIYCqyB8_fnwfPyJ-8UfT9qNHH2WrVVlMs7aolnffbf90dpk107pYtR-NPrqkr_d2dh6O7413d3fujXfos-lHj9p6ndMvs48e3fv0_ugj-vm9X_zRitq-5hcbanXOn1UfPdoZfbSkbwTk7vinm49-yYi_2PW_2PO-2PO_uMdffP-XfP-X_D-iwlMArgAAAA%3d%3d"></script>

After evaluating quite a different scenarios, we found that we have to include the complete details of the web assets in the script/stylesheet url and this is the reason the url becomes long and cryptic. Behind the scene, we are serializing and compressing the web asset group and then writing it as a base64 encoded string in the page.

With our new Shared Web Asset, you will not only be able to share the same web assets across the different pages, you will also be able to control the generated urls. There are two ways you can define the shared web assets, through the configuration file or with the fluent syntax. First, lets see, how you can define it the in the configuration file.

For example, for the above web assets we can declare it in the web.config file like the following:

<configuration>
    <configSections>
        <sectionGroup name="telerik">
            <section name="webAssets" type="Telerik.Web.Mvc.Configuration.WebAssetConfigurationSection, Telerik.Web.Mvc"/>
        </sectionGroup>
    </configSections>
    <telerik>
        <webAssets>
            <scripts>
                <add name="myScripts" combined="true" compress="true" enabled="true">
                    <items>
                        <add source="script1.js"/>
                        <add source="script2.js"/>
                        <add source="script3.js"/>
                    </items>
                </add>
            </scripts>
        </webAssets>
    </telerik>
</configuration>

Or you can place it the global.asax like the following:

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

    SharedWebAssets.Scripts(scripts =>
                            scripts.AddGroup("myScripts",
                                              group => group.Add("Script1.js")
                                                            .Add("Script2.js")
                                                            .Add("Script3.js")
                                                            .Combined(true)
                                                            .Compress(true)
                                            )
                           );
}

Now, use the AddSharedGroup of the ScriptRegistrar like the following:

<% Html.Telerik()
       .ScriptRegistrar()
       .Scripts(scripts => scripts.AddSharedGroup("myScripts"))
       .Render(); %>

And it would render the following:

<script type="text/javascript" src="http://weblogs.asp.net/asset.axd?id=myScripts"></script>

You can also mix the configuration file and fluent syntax, in that case, the configuration file assets will be registered first and then the fluent syntax.

Before completing this post, I would like to mention one more feature, though it was available from the CTP release. If you have downloaded the release zip file, in the Example Project, you have seen, we have placed the css and js files under the “2009.3.1103.0” folder in there corresponding assets folders. The “2009.3.1103.0” is actually the version number of our component. When locating any asset the version number folder is first scanned for the requested asset name, if it does not exist, it search its parent folder which is Content for css and Scripts for the js files. The next rule is whether the application is running in debug or release mode (compilation debug="true" in web.config file), when the application is running in debug mode, and lets say the assets is script1.js, then it will be searched in the following order:

1. script1.debug.js
2. script1.js
3. script1.min.js

and in the release mode:

1. script1.min.js
2. script1.js
3. script1.min.js

And this is the reason our examples, we did not mention the actual file name, instead we depend on the framework to resolve it based upon the runtime environment and don’t worry about the performance, in the release mode the resolve logic gets only executed when the asset is accessed for the first time and then we cache the resolve path for the consequent request.

That’s it for today.

Download: SharedWebAsset.zip

Using Telerik MVC Grid in CRUD Scenario

kazimanzurrashid — Thu, 05 Nov 2009 11:41:19 GMT

I am proud to inform you that yesterday we released our Q3 2009 version of Telerik Extensions for ASP.NET MVC. As promised this release includes:

Grid
Menu
PanelBar
TabStrip

You can find the live version and source codes in the following locations:

Also checkout the product home page and part-II of Tod’s unofficial faq.

In this post, I will show you how to create a basic CRUD(Create/Read/Update/Delete) application with our new MVC Grid. I will be using both Entity Framework v1.0 with the default web form view engine and NHibernate with Spark to create the CRUD screens for the Customer table of Northwind database.

Lets start with the Entity Framework and Default View Engine.

First, lets create a new ASP.NET MVC application and name it as Northwind, when Visual Studio prompts you for the Unit Test project, just skip it. Now, right click the Models folder and add an Entity Data Model and name it as Database. Next, drag the Customers table of the Northwind database from Server Explorer in the VS design surface.

Now, we will create a generic repository to access the database, lets define the interface first.

public interface IRepository<TEntity, TId>
{
    void Add(TEntity entity);

    void Delete(TId id);

    TEntity Get(TId id);

    IEnumerable<TEntity> All();
}

And the implementation:

public class Repository<TEntity, TId> : IRepository<TEntity, TId>
{
    private readonly Database database;

    public Repository() : this(EntityFrameworkObjectContextPerRequest.CurrentDatabase)
    {
    }

    public Repository(Database database)
    {
        this.database = database;
    }

    public void Add(TEntity entity)
    {
        database.AddObject(TypeName(), entity);
    }

    public void Delete(TId id)
    {
        database.DeleteObject(Get(id));
    }

    public TEntity Get(TId id)
    {
        var typeName = TypeName();

        var keyName = database.MetadataWorkspace
                              .GetItems<EntityType>(DataSpace.CSpace)
                              .Single(meta => meta.Name == typeName)
                              .KeyMembers[0].Name;

        var param = Expression.Parameter(typeof(TEntity), "x");
        var left = Expression.Property(param, keyName);
        var right = Expression.Constant(id);
        var equal = Expression.Equal(left, right);

        var predicate = Expression.Lambda<Func<TEntity, bool>>(equal, param).Compile();

        return All().SingleOrDefault(predicate);
    }

    public IEnumerable<TEntity> All()
    {
        return database.CreateQuery<TEntity>("[" + TypeName() + "]");
    }

    private static string TypeName()
    {
        return typeof(TEntity).Name;
    }
}

Very basic stuff,except the Get() method, since we are creating a generic repository which entity’s identifier is not known, we are using the Entity Framework meta data for building the identifier lambda expression. Please note that the stuffs that I have shown in the above has nothing to do with our Grid, we can directly use the Entity Framework ObjectContext in our Controller instead of this repository.

Now, right click the Controllers folder and a new Controller named CustomerController with the following code:

[HandleError]
public class CustomerController : Controller
{
    private readonly IRepository<Customers, string> repository;

    public CustomerController() : this(new Repository<Customers, string>())
    {
    }

    public CustomerController(IRepository<Customers, string> repository)
    {
        this.repository = repository;
    }

    public ActionResult Index()
    {
        return View(repository.All());
    }

    public ActionResult Details(string id)
    {
        return View(repository.Get(id));
    }

    public ActionResult Create()
    {
        return View();
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Create([Bind(Exclude = "CustomerId")]Customers customer)
    {
        customer.CustomerID = CreateNewId();
        repository.Add(customer);

        return RedirectToAction("Index");
    }

    public ActionResult Edit(string id)
    {
        return View(repository.Get(id));
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Edit(string id, FormCollection collection)
    {
        var customer = repository.Get(id);

        UpdateModel(customer, collection.ToValueProvider());

        return RedirectToAction("Index");
    }

    public ActionResult Delete(string id)
    {
        return View(repository.Get(id));
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Delete(string id, string confirm)
    {
        repository.Delete(id);

        return RedirectToAction("Index");
    }

    // Not a bullet proof method, but it should work for the demo
    private string CreateNewId()
    {
        Func<int, string> generateId = length =>
                                       {
                                           string generatingId = string.Empty;
                                           Random rnd = new Random();

                                           for (int i = 1; i <= length; i++)
                                           {
                                               int characterCode = rnd.Next(65, 90); // Only uppercase;
                                               generatingId += Convert.ToChar(characterCode).ToString();
                                           }

                                           return generatingId;
                                       };

        string id = generateId(5);

        while (repository.Get(id) != null)
        {
            id = generateId(5);
        }

        return id;
    }
}

There are one more thing we have to do before we start working on the Views, as you can see in the above the Repository uses a special class EntityFrameworkObjectContextPerRequest in the constructor to get the Database reference. EntityFrameworkObjectContextPerRequest is a HttpModule which creates a new instance of the Database in the BeginRequest and stores it in the HttpContext.Items to reuse it in the same request and in the EndRequest it commit the changes and Dispose the Database instance. Here is the code:

public class EntityFrameworkObjectContextPerRequest : IHttpModule
{
    private static readonly string key = typeof(Database).FullName;

    public static Database CurrentDatabase
    {
        get
        {
            return HttpContext.Current.Items[key] as Database;
        }
    }

    public void Init(HttpApplication context)
    {
        context.BeginRequest += OnBeginRequest;
        context.EndRequest += OnEndRequest;
    }

    public void Dispose()
    {
    }

    private static void OnBeginRequest(object sender, EventArgs e)
    {
        var database = HttpContext.Current.Items[key] as Database;

        if (database == null)
        {
            database = new Database();
            HttpContext.Current.Items[key] = database;
        }
    }

    private static void OnEndRequest(object sender, EventArgs e)
    {
        var database = HttpContext.Current.Items[key] as Database;

        if (database != null)
        {
            database.SaveChanges();
            database.Dispose();
        }
    }
}

Now, add the Telerik.Web.Mvc.dll from the binary folder that you have downloaded previously.

Once you include the dll, the first thing you should do is register the HttpHandler for the Web Assets, lets put these lines in the web.config file (I am only showing the relevant section of the web.config):

<?xml version="1.0"?>
<configuration>
    <system.web>
        <httpHandlers>
            <add verb="GET,HEAD" path="asset.axd" validate="false" type="Telerik.Web.Mvc.WebAssetHttpHandler, Telerik.Web.Mvc" />
        </httpHandlers>
    </system.web>
    <system.webServer>
        <handlers>
            <remove name="AssetHandler" />
            <add name="AssetHandler" preCondition="integratedMode" verb="GET,HEAD" path="asset.axd" type="Telerik.Web.Mvc.WebAssetHttpHandler, Telerik.Web.Mvc" />
        </handlers>
    </system.webServer>
</configuration>

Now, Copy the telerik.common.min.css, telerik.vista.min.css and Vista from the download Content folder to your project Content folder. We also have to copy few javascripts files, please copy the telerik.common.min.js, telerik.grid.min.js and telerik.grid.filtering.min.js from the downloaded Scripts folder to your project Scripts folder. Once you are done, it will look very similar to the following:

Now open the Site.Master from Views/Shared directory and put the following lines in the head section:

<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <%= Html.Telerik().StyleSheetRegistrar()
                      .DefaultGroup(group => group.Add("Site.css")
                                                  .Add("telerik.common.css")
                                                  .Add("telerik.vista.css")
                                                  .Combined(true)
                                   ) %>
</head>

This will ensure the stylesheets files that we have added in the previous steps will be included when the page renders. We have do the same for javascript files, but this time we will only add a ScriptRegistrar at the bottom of the page, but we will not add the javascript files like we did for the stylesheet files. Lets put the following code at the bottom of the page:

    <% Html.Telerik().ScriptRegistrar()
                     .DefaultGroup(group => group.Combined(true).Compress(true))
                     .Render(); %>
</body>
</html>

Now, go back to the Index method of the CustomerController, right click and select Add View, this will show the Add View Dialog. When the dialog appears, turn on the strongly typed view and select the Customers class as the view data class and finally select the List in View content drop down.

Once the view is generated replace the generated code with the following:

<% Html.Telerik()
       .Grid(Model)
       .Name("customers")
       .PrefixUrlParameters(false)
       .Columns(columns =>
                {
                    columns.Add(c =>
                                {
                                    %>
                                        <%= Html.ActionLink("Edit", "Edit", new { id = c.CustomerID })%>
                                        <%= Html.ActionLink("Delete", "Delete", new { id = c.CustomerID })%>
                                    <%
                                }).Title("Action");

                    columns.Add(c => c.CompanyName).Width(200);
                    columns.Add(c => c.ContactName);
                    columns.Add(c => c.Address);
                    columns.Add(c => c.City);
                    columns.Add(c => c.PostalCode);
                    columns.Add(c => c.Country);
                    columns.Add(c => c.Phone);
                    columns.Add(c => c.Fax);
                })
        .Filterable()
        .Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn))
        .Pageable()
        .Scrollable(scrolling => scrolling.Height(250))
        .Render(); %>

Now press F5 and navigate to /Customers, you will find a nice looking Grid like the following:

As you can see the Grid has out of the box support for data sorting/filtering/paging, all you have to do is set an IEnumerable<T> as its DataSource, the rest is taken care by itself. If the IEnumerable<T> has a Linq Provider the data will be processed at the database level. If you run the SQL Profiler for the above example and navigate to page 2 you will find the following SQL is generated:

SELECT TOP (10) 
[Project1].[CustomerID] AS [CustomerID], 
[Project1].[CompanyName] AS [CompanyName], 
[Project1].[ContactName] AS [ContactName], 
[Project1].[ContactTitle] AS [ContactTitle], 
[Project1].[Address] AS [Address], 
[Project1].[City] AS [City], 
[Project1].[Region] AS [Region], 
[Project1].[PostalCode] AS [PostalCode], 
[Project1].[Country] AS [Country], 
[Project1].[Phone] AS [Phone], 
[Project1].[Fax] AS [Fax]
FROM ( SELECT [Project1].[C1] AS [C1], [Project1].[CustomerID] AS [CustomerID], [Project1].[CompanyName] AS [CompanyName], [Project1].[ContactName] AS [ContactName], [Project1].[ContactTitle] AS [ContactTitle], [Project1].[Address] AS [Address], [Project1].[City] AS [City], [Project1].[Region] AS [Region], [Project1].[PostalCode] AS [PostalCode], [Project1].[Country] AS [Country], [Project1].[Phone] AS [Phone], [Project1].[Fax] AS [Fax], row_number() OVER (ORDER BY [Project1].[C1] ASC) AS [row_number]
	FROM ( SELECT 
		CASE WHEN ([Extent1].[CustomerID] IS NOT NULL) THEN [Extent1].[CustomerID] END AS [C1], 
		[Extent1].[CustomerID] AS [CustomerID], 
		[Extent1].[CompanyName] AS [CompanyName], 
		[Extent1].[ContactName] AS [ContactName], 
		[Extent1].[ContactTitle] AS [ContactTitle], 
		[Extent1].[Address] AS [Address], 
		[Extent1].[City] AS [City], 
		[Extent1].[Region] AS [Region], 
		[Extent1].[PostalCode] AS [PostalCode], 
		[Extent1].[Country] AS [Country], 
		[Extent1].[Phone] AS [Phone], 
		[Extent1].[Fax] AS [Fax]
		FROM [dbo].[Customers] AS [Extent1]
	)  AS [Project1]
)  AS [Project1]
WHERE [Project1].[row_number] > 10
ORDER BY [Project1].[C1] ASC

The rest of the screens are pretty simple, just use the ASP.NET MVC Add View dialog to implement them and that is it for the Entity Framework and Web form view engine.

Now, lets do the same for NHibernate and Spark.

First, Create a new ASP.NET MVC Project named AltNorthwind and skip the Unit Test Project. Now, the add following the references:

NHibernate
NHibernate.Linq
FluentNHibernate
Spark.

Now, right click the Models folder add a new class named Customers and create simple getter/setter properties for the Customers table fields, also ensure the properties are declared as virtual.Next, Add a new class named CustomerMap which will be used by the NHibernate to map the Customers class with the Customer table.

public class CustomerMap : ClassMap<Customers>
{
    public CustomerMap()
    {
        Id(c => c.CustomerID).Length(5).Not.Nullable();
        Map(c => c.CompanyName).Length(40).Not.Nullable();
        Map(c => c.ContactName).Length(30);
        Map(c => c.ContactTitle).Length(30);
        Map(c => c.Address).Length(60);
        Map(c => c.City).Length(15);
        Map(c => c.Region).Length(15);
        Map(c => c.PostalCode).Length(10);
        Map(c => c.Country).Length(15);
        Map(c => c.Phone).Length(24);
        Map(c => c.Fax).Length(24);
    }
}

Lets create the Repository, we will be using the same IRepository interface that we used in the Entity Framework section.

public class Repository<TEntity, TId> : IRepository<TEntity, TId>
{
    private readonly ISession session;

    public Repository() : this(NHibernateSessionPerRequest.CurrentSession)
    {
    }

    public Repository(ISession session)
    {
        this.session = session;
    }

    public void Add(TEntity entity)
    {
        session.SaveOrUpdate(entity);
    }

    public void Delete(TId id)
    {
        session.Delete(Get(id));
    }

    public TEntity Get(TId id)
    {
        return session.Get<TEntity>(id);
    }

    public IEnumerable<TEntity> All()
    {
        return session.Linq<TEntity>();
    }
}

As we can see that we are using the NHibernate ISession which is passed in the constructor similar to the Entity Framework version, we are also using an HttpModule for managing NHibernate session.

public class NHibernateSessionPerRequest : IHttpModule
{
    private static readonly ISessionFactory sessionFactory = CreateSessionFactory();

    public static ISession CurrentSession
    {
        get
        {
            return sessionFactory.GetCurrentSession();
        }
    }

    public void Init(HttpApplication context)
    {
        context.BeginRequest += OnBeginRequest;
        context.EndRequest += OnEndRequest;
    }

    public void Dispose()
    {
    }

    private static void OnBeginRequest(object sender, EventArgs e)
    {
        var session = sessionFactory.OpenSession();

        session.BeginTransaction();

        CurrentSessionContext.Bind(session);
    }

    private static void OnEndRequest(object sender, EventArgs e)
    {
        var session = CurrentSessionContext.Unbind(sessionFactory);

        if (session != null)
        {
            try
            {
                session.Transaction.Commit();
            }
            catch
            {
                session.Transaction.Rollback();
            }
            finally
            {
                session.Close();
                session.Dispose();
            }
        }
    }

    private static ISessionFactory CreateSessionFactory()
    {
        const string ConnectionStringName = "NorthwindConnectionString";

        var configuration = Fluently.Configure()
                                    .Database(MsSqlConfiguration.MsSql2005.ConnectionString(x => x.FromConnectionStringWithKey(ConnectionStringName)))
                                    .ExposeConfiguration(c => c.SetProperty("current_session_context_class", "web"))
                                    .Mappings(m => m.FluentMappings.AddFromAssemblyOf<NHibernateSessionPerRequest>());

        return configuration.BuildSessionFactory();
    }
}

The Controller is same as the Entity Framework version. Now, lets configure the Spark view engine, first put the following lines in the web.config file.

<configSections>
    <section name="spark" type="Spark.Configuration.SparkSectionHandler, Spark"/>
</configSections>
<spark>
    <compilation debug="true">
        <assemblies>
            <add assembly="AltNorthwind"/>
            <add assembly="System.Web.Mvc, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        </assemblies>
    </compilation>
    <pages automaticEncoding="true">
        <namespaces>
            <add namespace="System.Collections.Generic"/>
            <add namespace="System.Linq"/>
            <add namespace="System.Web.Mvc"/>
            <add namespace="System.Web.Mvc.Html"/>
            <add namespace="System.Web.Routing"/>
            <add namespace="Telerik.Web.Mvc.UI"/>
        </namespaces>
    </pages>
</spark>

And register the view engine in the global.asax, like the following:

protected void Application_Start()
{
    RegisterRoutes(RouteTable.Routes);
    SparkEngineStarter.RegisterViewEngine();
}

Now, Copy the telerik.common.min.css, telerik.vista.min.css and Vista from the download Content folder to your project Content folder and telerik.common.min.js, telerik.grid.min.js and telerik.grid.filtering.min.js from the downloaded Scripts folder to your project Scripts folder, same as we did in the Entity Framework version.

Now, lets add an application.spark file in Views/Shared for the stylesheets and javascripts and add the following code in the head section for the stylesheets registration:

<% Html.Telerik().StyleSheetRegistrar()
                  .DefaultGroup(group => group.Add("Site.css")
                                              .Add("telerik.common.css")
                                              .Add("telerik.vista.css")
                                              .Combined(true)
                               ) 
                   .Render(); %>

And at the bottom for the javascript files:

<% Html.Telerik().ScriptRegistrar()
                 .DefaultGroup(group => group.Combined(true).Compress(true))
                 .Render(); %>

Now, create a new folder named Customer under the Views folder and add new spark file named Index.spark and put the following code:

<content name="TitleContent">
    Customers
</content>
<content name="MainContent">
    <h2>Customers</h2>
    <viewdata model="IEnumerable[[Customers]]"/>
    <% Html.Telerik()
           .Grid(Model)
           .Name("customers")
           .PrefixUrlParameters(false)
           .Columns(columns =>
                    {
                        columns.Add(c =>
                                    {
                                        %>
                                            !{ Html.ActionLink("Edit", "Edit", new { id = c.CustomerID })}
                                            !{ Html.ActionLink("Delete", "Delete", new { id = c.CustomerID })}
                                        <%
                                    }).Title("Action");

                        columns.Add(c => c.CompanyName).Width(200);
                        columns.Add(c => c.ContactName);
                        columns.Add(c => c.Address);
                        columns.Add(c => c.City);
                        columns.Add(c => c.PostalCode);
                        columns.Add(c => c.Country);
                        columns.Add(c => c.Phone);
                        columns.Add(c => c.Fax);
                    })
            .Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn))
            .Pageable()
            .Scrollable(scrolling => scrolling.Height(250))
            .Render(); %>
    <p>!{ Html.ActionLink("Create New", "Create") }</p>
</content>

Once you are done, press F5 and navigate to /Customer, you will find a nice looking Grid. I am skipping the rest of the views as they are pretty easy to implement, but you will find the complete code in the following link.

That’s it for today, I hope I will be posting more on these components, so stay tuned.

Source Codes: TelerikMVCGridCRUDDemo.zip (Sorry for the earlier inconvenience, just made it public, it is accessible now.)

Telerik ASP.NET MVC Grid Preview (Take 1)

kazimanzurrashid — Wed, 16 Sep 2009 16:06:26 GMT

Those who have seen my tweet, already know that we have started working on our ASP.NET MVC Grid. In post I will show you the very early version of our Grid, so that you can provide your valuable feedback to guide us in the right direction. So far, we have implemented the paging and multi-column sorting. Let me show you the minimum code to set it up.

First, we will create an action method which creates some random data for view:

public ActionResult Basic()
{
    Random rnd = new Random();

    IList<InMemoryCustomer> model = new List<InMemoryCustomer>();

    for (int i = 1; i <= 100; i++)
    {
        InMemoryCustomer c = new InMemoryCustomer
                                 {
                                     Id = rnd.Next(1, 1000),
                                     Name = string.Format("Dummy Name #{0}", i),
                                     Address = string.Format("Dummy Address #{0}", i),
                                     RegisterAt = DateTime.Now.AddMonths(-rnd.Next(1, 48)).AddDays(-rnd.Next(0, 365)),
                                     Balance = rnd.Next(1000, 10000),
                                     IsActive = ((i % 4) == 0)
                                 };

        model.Add(c);
    }

    return View(model);
}

Next, in the view:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<InMemoryCustomer>>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    In Memory
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Basic</h2>
    <% Html.Telerik().Grid<InMemoryCustomer>()
           .Name("MyGrid")
           .Columns(
                        columns =>
                        {
                            columns.Add(c => c.Id);
                            columns.Add(c => c.Name);
                            columns.Add(c => c.Address);
                            columns.Add(c => c.RegisterAt).Format("{0:MM/dd/yyyy}");
                            columns.Add(c => c.IsActive).HeaderText("Active");
                        }
                   )
           .SortMode(GridSortMode.MultiColumn)
           .Pager(pager => pager.PageSize(10).Style(GridPagerStyle.FirstPreviousNextLast))
           .BindTo(Model)
           .Render(); %>
</asp:Content>

When you run the above, it will show you a nice looking grid like the following:

Check that when defining the columns, we are using strongly typed syntax which means you will get the complete benefit of compile time checking, also note that we have set the SortMode to MultiColumn, other values are SingleColumn and None. When you click any of the column headers or the links in the pager, it will append the order by and page number in the query string like the following:

?MyGrid-orderBy=Name asc%2CAddress desc&MyGrid-page=2 // Order By Name Ascending, Address Descending and Page is 2

?MyGrid-orderBy=Name asc%2CRegisterAt asc //Order By Name Ascending, RegisterAt Ascending and Page is 1 that why it is not added

As you can see, we are also using the Grid Name as prefix for the query string parameters, this is required to identify the parameter when there are more than one grid in a view. You can easily turn it off my using the IncludeNameInParameterAsPrefix to false when you have only one Grid in a view. Lets take a another quick look how to turn off the Name prefix:

<% Html.Telerik().Grid<InMemoryCustomer>()
       .Name("MyGrid")
       .Columns(
                    columns =>
                    {
                        columns.Add(c => c.Id);
                        columns.Add(c => c.Name);
                        columns.Add(c => c.Address);
                        columns.Add(c => c.RegisterAt).Format("{0:MM/dd/yyyy}");
                        columns.Add(c => c.IsActive).HeaderText("Active");
                    }
               )
       .SortMode(GridSortMode.MultiColumn)
       .IncludeNameInParameterAsPrefix(false)
       .Pager(pager => pager.PageSize(10).Style(GridPagerStyle.FirstPreviousNextLast))
       .BindTo(Model)
       .Render(); %>

(Check the line number 14 in the above snippet) Now, when you run the above code and click few of the column headers, it will get a similar picture like the following:

Now, you will see the urls are generated without the grid name prefix:

?orderBy=Name desc%2CRegisterAt asc&page=2 // Order By Name Descending, RegisterAt Ascending and Page 2

?orderBy=Address%20asc // Order by Address Ascending and Page 1

So far, we are using the Query String, What the about the routing? yes you can also use the routing instead of the old and ugly query string, but to use Routing you have define the route first, this is the reason, I have shown the query string examples first. Now, let me show you the routing example:

First we will define a route in global.asax like the following:

routes.MapRoute("PrettyUrl", "{controller}/PrettyUrl/{orderBy}/{page}", new { controller = "Grid", action = "PrettyUrl", orderBy = string.Empty, page = 1 });

Next, we will create an action method very similar to the above query string example, except, it now accepts the orderBy and page as argument:

public ActionResult PrettyUrl(string orderBy, int? page)
{
    Random rnd = new Random();

    IList<InMemoryCustomer> model = new List<InMemoryCustomer>();

    for (int i = 1; i <= 100; i++)
    {
        InMemoryCustomer c = new InMemoryCustomer
                                 {
                                     Id = rnd.Next(1, 1000),
                                     Name = string.Format("Dummy Name #{0}", i),
                                     Address = string.Format("Dummy Address #{0}", i),
                                     RegisterAt =
                                         DateTime.Now.AddMonths(-rnd.Next(1, 48)).AddDays(-rnd.Next(0, 365)),
                                     Balance = rnd.Next(1000, 10000),
                                     IsActive = ((i%4) == 0)
                                 };

        model.Add(c);
    }

    return View(model);
}

And the view is exactly same as above:

<% Html.Telerik().Grid<InMemoryCustomer>()
       .Name("MyGrid")
       .Columns(
                    columns =>
                    {
                        columns.Add(c => c.Id);
                        columns.Add(c => c.Name);
                        columns.Add(c => c.Address);
                        columns.Add(c => c.RegisterAt).Format("{0:MM/dd/yyyy}");
                        columns.Add(c => c.IsActive).HeaderText("Active");
                    }
               )
       .SortMode(GridSortMode.MultiColumn)
       .IncludeNameInParameterAsPrefix(false)
       .Pager(pager => pager.PageSize(10).Style(GridPagerStyle.FirstPreviousNextLast))
       .BindTo(Model)
       .Render(); %>

Now when run it, the urls will appear like the following:

/Grid/PrettyUrl/Name asc,Address asc,RegisterAt asc/2

/Grid/PrettyUrl/Name desc,IsActive asc

IE will replace the spaces with Url encoded %20, If you have used the ADO.NET Data Service you already guess that we are following the same style for formatting order by clause as ADO.NET Data Service. The default value for orderBy and page parameters are same as there names, if your route is declared with some other names or you want to change the values for query string, use the following syntax (Check line 14 and 15):

<% Html.Telerik().Grid<InMemoryCustomer>()
       .Name("MyGrid")
       .Columns(
                    columns =>
                    {
                        columns.Add(c => c.Id);
                        columns.Add(c => c.Name);
                        columns.Add(c => c.Address);
                        columns.Add(c => c.RegisterAt).Format("{0:MM/dd/yyyy}");
                        columns.Add(c => c.IsActive).HeaderText("Active");
                    }
               )
       .SortMode(GridSortMode.MultiColumn)
       .OrderByParameterName("sortBy")
       .CurrentPageParameterName("p")
       .Pager(pager => pager.PageSize(10).Style(GridPagerStyle.FirstPreviousNextLast))
       .BindTo(Model)
       .Render(); %>

Currently, the routing only works for single grid due to the limitation of the ASP.NET Routing, I will post more on this later on.

Before concluding the post, there are one more nice feature that I like to mention, if you are wondering how the above code is doing the auto paging and sorting, let me tell you that we are using the same DataEngine as our Wpf Control suite is using, the nice things about it that it has the complete support to propagate the arbitrary expressions to query providers, which means if you are using LinqToSQL, LinqToEntities, LinqToNHibernate or any database Linq provider then the actual processing will be done by database server rather than in memory operation. But, if want to take charges of this operations, you can certainly do it, just set the RequireProcessing to false.

This is a just the start, there are lot more features we will be adding before our final release, We will be posting the features as we develop to gather feedback from you, so please let us know what you like, what you do not like and how we can improve.

Thanks.

Shrinkr - Url Shrinking Service Developed with Entity Framework 4.0, Unity, ASP.NET MVC And jQuery (Part 3)

kazimanzurrashid — Tue, 15 Sep 2009 09:57:54 GMT

In the previous post, we have created our initial repositories, in this post I will show how you can use the compiled query of Entity Framework in our repository. To use the compiled query we will put each query of our repositories into its own class and create some common interfaces that we can use in our repositories.

IQuery

namespace Shrinkr.Infrastructure.EntityFramework
{
    public interface IQuery<TResult>
    {
        TResult Execute(Database database);
    }
}

IQueryFactory

namespace Shrinkr.Infrastructure.EntityFramework
{
    using System.Collections.Generic;

    public interface IQueryFactory
    {
        bool UseCompiled
        {
            get;
        }

        IQuery<User> CreateUserById(long userId);

        IQuery<User> CreateUserByName(string userName);

        IQuery<User> CreateUserByApiKey(string apiKey);

        IQuery<ShortUrl> CreateShortUrlById(long shortUrlId);

        IQuery<ShortUrl> CreateShortUrlByHash(string urlHash);

        IQuery<ShortUrl> CreateShortUrlByAlias(string alias);

        IQuery<int> CreateShortUrlCountByUserId(long userId);

        IQuery<IEnumerable<ShortUrl>> CreateShortUrlsByUserId(long userId, int start, int max);
    }
}

Now we will modify our RepositoryBase, so that we can pass the IQuaryFactory in its constructor.

RepositoryBase

namespace Shrinkr.Infrastructure.EntityFramework
{
    public abstract class RepositoryBase<TEntity> where TEntity : class, IEntity
    {
        protected RepositoryBase(Database database, IQueryFactory queryFactory)
        {
            Check.Argument.IsNotNull(database, "database");
            Check.Argument.IsNotNull(queryFactory, "queryFactory");

            Database = database;
            QueryFactory = queryFactory;
        }

        protected Database Database
        {
            get;
            private set;
        }

        protected IQueryFactory QueryFactory
        {
            get;
            private set;
        }

        public virtual void Add(TEntity entity)
        {
            Check.Argument.IsNotNull(entity, "entity");

            Database.ObjectSet<TEntity>().AddObject(entity);
        }

        public virtual void Delete(TEntity entity)
        {
            Check.Argument.IsNotNull(entity, "entity");

            Database.ObjectSet<TEntity>().DeleteObject(entity);
        }
    }
}

We can now use the query factory in our repository, for example, in UserRepository we will be able to use:

public User GetById(long id)
{
    IQuery<User> query = QueryFactory.CreateUserById(id);

    return query.Execute(Database);
}

Now, lets check how the query is constructed, first the base class which implements the IQuery<T> interface:

QueryBase

namespace Shrinkr.Infrastructure.EntityFramework
{
    public abstract class QueryBase<TResult> : IQuery<TResult>
    {
        protected QueryBase(bool useCompiled)
        {
            UseCompiled = useCompiled;
        }

        protected bool UseCompiled
        {
            get;
            private set;
        }

        public abstract TResult Execute(Database database);
    }
}

as mentioned that each query will have its own class, for example, for the above user by id query, we will have the following:

namespace Shrinkr.Infrastructure.EntityFramework
{
    using System;
    using System.Data.Objects;
    using System.Linq;
    using System.Linq.Expressions;

    public class UserByIdQuery : QueryBase<User>
    {
        private static readonly Expression<Func<Database, long, User>> expression = (Database database, long id) => database.Users.SingleOrDefault(user => user.Id == id);
        private static readonly Func<Database, long, User> plainQuery = expression.Compile();
        private static readonly Func<Database, long, User> compiledQuery = CompiledQuery.Compile(expression);

        private readonly long userId;

        public UserByIdQuery(bool useCompiled, long userId) : base(useCompiled)
        {
            Check.Argument.IsNotNegative(userId, "userId");

            this.userId = userId;
        }

        public override User Execute(Database database)
        {
            Check.Argument.IsNotNull(database, "database");

            return UseCompiled ?
                   compiledQuery(database, userId) :
                   plainQuery(database, userId);
        }
    }
}

and the implementation of QueryFactory

namespace Shrinkr.Infrastructure.EntityFramework
{
    using System.Collections.Generic;

    public class QueryFactory : IQueryFactory
    {
        public QueryFactory(bool useCompiled)
        {
            UseCompiled = useCompiled;
        }

        public bool UseCompiled
        {
            get;
            private set;
        }

        public IQuery<User> CreateUserById(long userId)
        {
            return new UserByIdQuery(UseCompiled, userId);
        }
    }
}

Now, when unit testing the Repositories we will be using the plain queries, for example the UserRepository will be constructed like the following in unit tests:

public UserRepositoryTests()
{
    database = new Mock<Database>(configurationManager.Object, "Dummy");
    var queryFactory = new QueryFactory(false); // plain query

    repository = new UserRepository(database.Object, queryFactory);
}

and that’s it. But for the data access layer, I would highly recommend to have the integration tests as well. The reasons are:

It will ensure the underlying Linq Providers does support the Linq queries that we have in your repositories, although the Linq queries we have written here are very simple.
By using the SQL Profiler we can ensure the generated SQLs are really optimized.

But to start writing the integration tests, we have one more important thing to do, the UnitOfWork, which persist the changes in our database.

UnitOfWork

namespace Shrinkr.Infrastructure.EntityFramework
{
    public class UnitOfWork : IUnitOfWork
    {
        private readonly Database database;

        public UnitOfWork(Database database)
        {
            Check.Argument.IsNotNull(database, "database");

            this.database = database;
        }

        public void Commit()
        {
            database.Commit();
        }
    }
}

Now, lets write our first integration test:

namespace Shrinkr.IntegrationTests
{
    using System;

    using Xunit;
    using Xunit.Extensions;

    using IoC = global::Microsoft.Practices.ServiceLocation.ServiceLocator;

    public class UserRepositoryTests : TestBase
    {
        private const string Name = "http://kazimanzurrashid.myopenid.com";

        private readonly IUnitOfWork unitOfWork;
        private readonly IUserRepository repository;

        public UserRepositoryTests()
        {
            unitOfWork = IoC.Current.GetInstance<IUnitOfWork>();
            repository = IoC.Current.GetInstance<IUserRepository>();
        }

        [Fact, AutoRollback]
        public void Should_be_able_to_add_user()
        {
            var user = CreateUser();

            Assert.NotEqual(0, user.Id);
        }

        [Fact, AutoRollback]
        public void Should_be_able_to_update_user()
        {
            var user = CreateUser();

            user.Email = "kazimanzurrashid@gmail.com";

            unitOfWork.Commit();

            var updatedUser = repository.GetById(user.Id);

            Assert.Equal("kazimanzurrashid@gmail.com", updatedUser.Email);
        }

        [Fact, AutoRollback]
        public void Should_be_able_to_delete_user()
        {
            var userId = CreateUser().Id;
            var user = repository.GetById(userId);

            repository.Delete(user);
            unitOfWork.Commit();

            user = repository.GetById(userId);

            Assert.Null(user);
        }

        [Fact, AutoRollback]
        public void Should_be_able_to_get_user_by_id()
        {
            var userId = CreateUser().Id;
            var user = repository.GetById(userId);

            Assert.NotNull(user);
        }

        [Fact, AutoRollback]
        public void Should_be_able_to_get_user_by_name()
        {
            CreateUser();

            var user = repository.GetByName(Name);

            Assert.NotNull(user);
        }

        [Fact, AutoRollback]
        public void Should_be_able_to_get_user_by_api_key()
        {
            var apiKey = CreateUser().ApiSetting.Key;
            var user = repository.GetByApiKey(apiKey);

            Assert.NotNull(user);
        }

        private User CreateUser()
        {
            var user = new User { Name = Name };

            user.ApiSetting.Allowed = true;
            user.ApiSetting.DailyLimit = 1000;
            user.ApiSetting.Key = Guid.NewGuid().ToString().ToUpperInvariant();

            repository.Add(user);
            unitOfWork.Commit();

            return user;
        }
    }
}

When we run the above test, it will generate the following SQL statements, which I think is pretty much optimized:

GetById

exec sp_executesql N'SELECT 
[Limit1].[Id] AS [Id], 
[Limit1].[Name] AS [Name], 
[Limit1].[Email] AS [Email], 
[Limit1].[IsLockedOut] AS [IsLockedOut], 
[Limit1].[CreatedAt] AS [CreatedAt], 
[Limit1].[Role] AS [Role], 
[Limit1].[LastActivityAt] AS [LastActivityAt], 
[Limit1].[C1] AS [C1], 
[Limit1].[ApiKey] AS [ApiKey], 
[Limit1].[ApiAllowed] AS [ApiAllowed], 
[Limit1].[DailyLimit] AS [DailyLimit]
FROM ( SELECT TOP (2) 
	[Extent1].[Id] AS [Id], 
	[Extent1].[Name] AS [Name], 
	[Extent1].[Email] AS [Email], 
	[Extent1].[IsLockedOut] AS [IsLockedOut], 
	[Extent1].[CreatedAt] AS [CreatedAt], 
	[Extent1].[Role] AS [Role], 
	[Extent1].[ApiKey] AS [ApiKey], 
	[Extent1].[ApiAllowed] AS [ApiAllowed], 
	[Extent1].[DailyLimit] AS [DailyLimit], 
	[Extent1].[LastActivityAt] AS [LastActivityAt], 
	1 AS [C1]
	FROM [dbo].[User] AS [Extent1]
	WHERE [Extent1].[Id] = @p__linq__0
)  AS [Limit1]',N'@p__linq__0 bigint',@p__linq__0=125

GetByName

exec sp_executesql N'SELECT 
[Limit1].[Id] AS [Id], 
[Limit1].[Name] AS [Name], 
[Limit1].[Email] AS [Email], 
[Limit1].[IsLockedOut] AS [IsLockedOut], 
[Limit1].[CreatedAt] AS [CreatedAt], 
[Limit1].[Role] AS [Role], 
[Limit1].[LastActivityAt] AS [LastActivityAt], 
[Limit1].[C1] AS [C1], 
[Limit1].[ApiKey] AS [ApiKey], 
[Limit1].[ApiAllowed] AS [ApiAllowed], 
[Limit1].[DailyLimit] AS [DailyLimit]
FROM ( SELECT TOP (2) 
	[Extent1].[Id] AS [Id], 
	[Extent1].[Name] AS [Name], 
	[Extent1].[Email] AS [Email], 
	[Extent1].[IsLockedOut] AS [IsLockedOut], 
	[Extent1].[CreatedAt] AS [CreatedAt], 
	[Extent1].[Role] AS [Role], 
	[Extent1].[ApiKey] AS [ApiKey], 
	[Extent1].[ApiAllowed] AS [ApiAllowed], 
	[Extent1].[DailyLimit] AS [DailyLimit], 
	[Extent1].[LastActivityAt] AS [LastActivityAt], 
	1 AS [C1]
	FROM [dbo].[User] AS [Extent1]
	WHERE [Extent1].[Name] = @p__linq__0
)  AS [Limit1]',N'@p__linq__0 nvarchar(4000)',@p__linq__0=N'http://kazimanzurrashid.myopenid.com/'

GetByApiKey

exec sp_executesql N'SELECT 
[Limit1].[Id] AS [Id], 
[Limit1].[Name] AS [Name], 
[Limit1].[Email] AS [Email], 
[Limit1].[IsLockedOut] AS [IsLockedOut], 
[Limit1].[CreatedAt] AS [CreatedAt], 
[Limit1].[Role] AS [Role], 
[Limit1].[LastActivityAt] AS [LastActivityAt], 
[Limit1].[C1] AS [C1], 
[Limit1].[ApiKey] AS [ApiKey], 
[Limit1].[ApiAllowed] AS [ApiAllowed], 
[Limit1].[DailyLimit] AS [DailyLimit]
FROM ( SELECT TOP (2) 
	[Extent1].[Id] AS [Id], 
	[Extent1].[Name] AS [Name], 
	[Extent1].[Email] AS [Email], 
	[Extent1].[IsLockedOut] AS [IsLockedOut], 
	[Extent1].[CreatedAt] AS [CreatedAt], 
	[Extent1].[Role] AS [Role], 
	[Extent1].[ApiKey] AS [ApiKey], 
	[Extent1].[ApiAllowed] AS [ApiAllowed], 
	[Extent1].[DailyLimit] AS [DailyLimit], 
	[Extent1].[LastActivityAt] AS [LastActivityAt], 
	1 AS [C1]
	FROM [dbo].[User] AS [Extent1]
	WHERE [Extent1].[ApiKey] = @p__linq__0
)  AS [Limit1]',N'@p__linq__0 nvarchar(4000)',@p__linq__0=N'9C1A8F98-9CC6-4967-8B48-269CA92833E5'

Insert

exec sp_executesql N'insert [dbo].[User]([Name], [Email], [IsLockedOut], [CreatedAt], [Role], [ApiKey], [ApiAllowed], [DailyLimit], [LastActivityAt])
values (@0, null, @1, @2, @3, @4, @5, @6, @7)
select [Id]
from [dbo].[User]
where @@ROWCOUNT > 0 and [Id] = scope_identity()',N'@0 nvarchar(256),@1 bit,@2 datetime,@3 int,@4 nchar(36),@5 bit,@6 int,@7 datetime',@0=N'http://kazimanzurrashid.myopenid.com',@1=0,@2='2009-08-02 22:04:17:067',@3=0,@4=N'9C1A8F98-9CC6-4967-8B48-269CA92833E5',@5=1,@6=1000,@7='2009-08-02 22:04:17:067'

Update

exec sp_executesql N'update [dbo].[User]
set [Email] = @0
where ([Id] = @1)
',N'@0 nvarchar(256),@1 bigint',@0=N'kazimanzurrashid@gmail.com',@1=142

Delete

exec sp_executesql N'delete [dbo].[User]
where ([Id] = @0)',N'@0 bigint',@0=125

You will find other tests in the integration test project.

That is it for this post, in the next post we will discuss on other infrastructural item such shrinking logic, http content, IoC etc etc.

Stay tuned!!!

Shrinkr - Url Shrinking Service Developed with Entity Framework 4.0, Unity, ASP.NET MVC And jQuery (Part 2)

kazimanzurrashid — Sun, 13 Sep 2009 09:02:36 GMT

In the previous post we have created our initial domain model, in this post I will show you how the domain model is mapped to database with Entity Framework 4.0. But before that I would like to discuss how I usually structure the Visual Studio Projects. Most often I prefer to have a one class library and one web project where each has its own unit test project and only one integration test project, for example:

Shrinkr.Core
Shrinkr.Core.UnitTest
Shrinkr.Web
Shrinkr.Web.UnitTest
Shrinkr.IntegrationTest

The Core Project is then further divided into following folders:

Shrink.Core
- Common (Utility, Invariant etc etc)
- EntityObjects (Contains both domain objects and DTOs)
- Extensions (Extension methods)
- Repositories (Contains both interface and implementation)
- Services (Contains both interface and implementation)
- Infrastructure
  - Caching
  - Database
  - Email
  - FileSystem
  - Http
  - IoC
  - Logging
  - etc etc etc.

But since it is an open source project, I should give privilege to community to replace any part of if with the their preferred technology. for example, replacing Entity Framework with NHibernate or may be Azure Storage, Unity with StructureMap or NInject etc etc. So I decided to structure it based upon the component dependency.

As you can understand that the Shrinkr.Infrastructure.Microsoft.Practices will contain the Unity and other EntLib related codes and Shrinkr.Infrastructure.EntityFramework for the concrete repositories and other data access codes. Although Entity Framework Team has released few more add-ons (known as Features CTP1), but for the time being we will not use those. The first thing we will do is create a new class which inherits from the ObjectContext, lets name it as Database.

Database

namespace Shrinkr.Infrastructure.EntityFramework
{
    using System.Data.Objects;
    using System.Diagnostics;

    public class Database : ObjectContext
    {
        private IObjectSet<User> users;
        private IObjectSet<ShortUrl> shortUrls;
        private IObjectSet<Alias> aliases;
        private IObjectSet<Visit> visits;

        public Database(IConfigurationManager configurationManager, string connectionStringName) : base(GetConnectionString(configurationManager, connectionStringName), "ShrinkrEntities")
        {
            ContextOptions.DeferredLoadingEnabled = true;
        }

        public IObjectSet<User> Users
        {
            [DebuggerStepThrough]
            get
            {
                if (users == null)
                {
                    users = ObjectSet<User>();
                }

                return users;
            }
        }

        public IObjectSet<ShortUrl> ShortUrls
        {
            [DebuggerStepThrough]
            get
            {
                if (shortUrls == null)
                {
                    shortUrls = ObjectSet<ShortUrl>();
                }

                return shortUrls;
            }
        }

        public IObjectSet<Alias> Aliases
        {
            [DebuggerStepThrough]
            get
            {
                if (aliases == null)
                {
                    aliases = ObjectSet<Alias>();
                }

                return aliases;
            }
        }

        public IObjectSet<Visit> Visits
        {
            [DebuggerStepThrough]
            get
            {
                if (visits == null)
                {
                    visits = ObjectSet<Visit>();
                }

                return visits;
            }
        }

        public virtual IObjectSet<TEntity> ObjectSet<TEntity>() where TEntity : class, IEntity
        {
            return CreateObjectSet<TEntity>();
        }

        public virtual void Commit()
        {
            SaveChanges();
        }

        private static string GetConnectionString(IConfigurationManager configurationManager, string connectionStringName)
        {
            Check.Argument.IsNotNull(configurationManager, "configurationManager");
            Check.Argument.IsNotNullOrEmpty(connectionStringName, "connectionStringName");

            string connectionString = configurationManager.ConnectionString(connectionStringName);

            return connectionString;
        }
    }
}

Nothing complex, we are just exposing our Domain Entities as properties like Users, ShortUrls, Aliases etc. One important thing you should check in the above code is that instead of using the CreateObjectSet<T>() in the properties, I have created a virtual method ObjectSet<T>() which in turns calls the CreateObjectSet<T>. The reasons behind creating this new virtual method are:

CreateObjectSet<T> does not return IObjectSet<T>, instead it returns the concrete ObjectSet<T>.
CreateObjectSet<T> is not a virtual method, which means we cannot mock it the unit tests (Although it is debatable whether to write unit tests over any Linq provider, but that is an another story).

I am not sure why the Entity Framework team decided to return the concrete class instead of the interface also not making the method virtual, if they did, we do not have to write this workarounds and I am pretty sure many people will call it a design smell and finds it frustrating. Next, we will create the base repository which the UserRepository and ShortUrlRepository inherits. Although it is a common practise specially in the NHibernate world to have only one Repository<T> instead of individual repository for each aggregate root which I will discuss in my next post.

RepositoryBase

namespace Shrinkr.Infrastructure.EntityFramework
{
    public abstract class RepositoryBase<TEntity> where TEntity : class, IEntity
    {
        protected RepositoryBase(Database database)
        {
            Check.Argument.IsNotNull(database, "database");

            Database = database;
        }

        protected Database Database
        {
            get;
            private set;
        }

        public virtual void Add(TEntity entity)
        {
            Check.Argument.IsNotNull(entity, "entity");

            Database.ObjectSet<TEntity>().AddObject(entity);
        }

        public virtual void Delete(TEntity entity)
        {
            Check.Argument.IsNotNull(entity, "entity");

            Database.ObjectSet<TEntity>().DeleteObject(entity);
        }
    }
}

Check that we have marked both Add and Delete method as virtual so that the concrete repository can override if it has some extra logic. Now, lets create the Unit Test for it.

RepositoryBaseTests

namespace Shrinkr.Infrastructure.EntityFramework.UnitTests
{
    using System.Collections.Generic;

    using Moq;
    using Xunit;

    public class RepositoryBaseTests
    {
        private readonly Mock<FakeObjectSet<Dummy>> objectSet;
        private readonly Mock<Database> database;
        private readonly DummyRepository repository;

        public RepositoryBaseTests()
        {
            var objects = new List<Dummy> {
                                            new Dummy { Id = 1},
                                            new Dummy { Id = 2},
                                            new Dummy { Id = 3}
                                          };

            objectSet = new Mock<FakeObjectSet<Dummy>>(objects);

            var configurationManager = new Mock<IConfigurationManager>();
            configurationManager.Setup(mgr => mgr.ConnectionString(It.IsAny<string>())).Returns("Dummy Connection String");

            database = new Mock<Database>(configurationManager.Object, "Dummy");
            database.Setup(db => db.ObjectSet<Dummy>()).Returns(objectSet.Object);

            repository = new DummyRepository(database.Object);
        }

        [Fact]
        public void Should_be_able_to_add()
        {
            objectSet.Setup(set => set.AddObject(It.IsAny<Dummy>())).Verifiable();

            repository.Add(new Dummy());

            objectSet.Verify();
        }

        [Fact]
        public void Should_be_able_to_delete()
        {
            objectSet.Setup(set => set.DeleteObject(It.IsAny<Dummy>())).Verifiable();

            repository.Delete(new Dummy());

            objectSet.Verify();
        }
   } 

    public class Dummy : IEntity
    {
        public long Id
        {
            get;
            set;
        }
    }

    public class DummyRepository : RepositoryBase<Dummy>
    {
        public DummyRepository(Database database) : base(database)
        {
        }
    }
}

To test the RepositoryBase we have to create few fake classes and in the unit test we are using those. The reason is, if we create mock of RepositoryBase which methods are virtual the mock framework(Moq) will replace those, so the codes of Add and Delete will not be executed. By using the DummyRepository we are making sure the RepositoryBase methods are called. Another important thing you might have noticed that when setting up expectations on the database.ObjectSet (line 28) method we are using another new class FakeObjectSet. This is the another frustrating part of Entity Framework, you cannot pass/set collection of objects in the ObjectSet<T>. This is what the FakeObjectSet does, allowing us to pass the collection of objects so that our unit test can run properly.

FakeObjectSet

namespace Shrinkr.Infrastructure.EntityFramework.UnitTests
{
    using System;
    using System.Collections;
    using System.Collections.Generic;
    using System.Data.Objects;
    using System.Linq;
    using System.Linq.Expressions;

    public abstract class FakeObjectSet<T> : IObjectSet<T> where T : class
    {
        private readonly IEnumerable<T> objects;

        protected FakeObjectSet(IEnumerable<T> objects)
        {
            this.objects = objects;
        }

        public Expression Expression
        {
            get
            {
                return objects.AsQueryable().Expression;
            }
        }

        public IQueryProvider Provider
        {
            get
            {
                return objects.AsQueryable().Provider;
            }
        }

        public Type ElementType
        {
            get
            {
                return typeof(T);
            }
        }

        public abstract void AddObject(T entity);

        public abstract void Attach(T entity);

        public abstract void DeleteObject(T entity);

        public IEnumerator<T> GetEnumerator()
        {
            return objects.GetEnumerator();
        }

        IEnumerator IEnumerable.GetEnumerator()
        {
            return this.GetEnumerator();
        }
    }
}

Now, creating the concrete repositories are plain and simple.

UserRepository

namespace Shrinkr.Infrastructure.EntityFramework
{
    using System.Linq;

    public class UserRepository : RepositoryBase<User>, IUserRepository
    {
        public UserRepository(Database database) : base(database)
        {
        }

        public User GetById(long id)
        {
            Check.Argument.IsNotZeroOrNegative(id, "id");

            return Database.Users.SingleOrDefault(user => user.Id == id);
        }

        public User GetByName(string name)
        {
            Check.Argument.IsNotNullOrEmpty(name, "name");

            return Database.Users.SingleOrDefault(user => user.Name == name);
        }

        public User GetByApiKey(string apiKey)
        {
            Check.Argument.IsNotNullOrEmpty(apiKey, "apiKey");

            return Database.Users.SingleOrDefault(user => user.ApiSetting.Key == apiKey);
        }
    }
}

UserRepositoryTests

namespace Shrinkr.Infrastructure.EntityFramework.UnitTests
{
    using System;
    using System.Collections.Generic;

    using Moq;
    using Xunit;

    public class UserRepositoryTests
    {
        private const long UserId = 1;
        private const string UserName = "http://kazimanzurrashid.myopenid.com";
        private readonly static string ApiKey = Guid.NewGuid().ToString().ToUpperInvariant();

        private readonly Mock<Database> database;
        private readonly UserRepository repository;

        public UserRepositoryTests()
        {
            var users = new List<User> { new User { Id = UserId, Name = UserName } };

            users[0].ApiSetting.Key = ApiKey;

            var userSet = new Mock<FakeObjectSet<User>>(users);

            var configurationManager = new Mock<IConfigurationManager>();
            configurationManager.Setup(mgr => mgr.ConnectionString(It.IsAny<string>())).Returns("Dummy Connection String");

            database = new Mock<Database>(configurationManager.Object, "Dummy");

            database.Setup(db => db.ObjectSet<User>()).Returns(userSet.Object);

            repository = new UserRepository(database.Object, queryFactory);
        }

        [Fact]
        public void Should_be_able_to_get_by_id()
        {
            var user = repository.GetById(UserId);

            Assert.Equal(UserName, user.Name);
        }

        [Fact]
        public void Should_be_able_to_get_by_name()
        {
            var user = repository.GetByName(UserName);

            Assert.Equal(UserId, user.Id);
        }

        [Fact]
        public void Should_be_able_to_get_by_api_key()
        {
            var user = repository.GetByApiKey(ApiKey);

            Assert.Equal(UserId, user.Id);
        }
    }
}

ShortUrlRepository

namespace Shrinkr.Infrastructure.EntityFramework
{
    using System.Collections.Generic;
    using System.Linq;

    public class ShortUrlRepository : RepositoryBase<ShortUrl>, IShortUrlRepository
    {
        public ShortUrlRepository(Database database) : base(database)
        {
        }

        public ShortUrl GetById(long id)
        {
            Check.Argument.IsNotZeroOrNegative(id, "id");

            return Database.ShortUrls.SingleOrDefault(shortUrl => shortUrl.Id == id);
        }

        public ShortUrl GetByHash(string hash)
        {
            Check.Argument.IsNotNullOrEmpty(hash, "hash");

            return Database.ShortUrls.SingleOrDefault(shortUrl => shortUrl.Hash == hash);
        }

        public ShortUrl GetByAliasName(string aliasName)
        {
            Check.Argument.IsNotNullOrEmpty(aliasName, "aliasName");

            return Database.ShortUrls.SingleOrDefault(shortUrl => shortUrl.Aliases.Any(alias => alias.Name == aliasName));
        }

        public PagedResult<ShortUrl> FindByUserId(long userId, int start, int max)
        {
            Check.Argument.IsNotZeroOrNegative(userId, "userId");
            Check.Argument.IsNotNegative(start, "start");
            Check.Argument.IsNotNegative(max, "max");

            int total = Database.Aliases.Count(alias => alias.User.Id == userId);

            IQueryable<ShortUrl> result = Database.Aliases.Where(alias => alias.User.Id == userId)
                                                  .OrderByDescending(alias => alias.CreatedAt)
                                                  .Select(alias => alias.ShortUrl)
                                                  .Skip(start)
                                                  .Take(max);

            return new PagedResult<ShortUrl>(result, total);
        }
    }
}

ShortUrlRepositoryTests

namespace Shrinkr.Infrastructure.EntityFramework.UnitTests
{
    using System.Collections.Generic;

    using Moq;
    using Xunit;

    public class ShortUrlRepositoryTests
    {
        private readonly Mock<Database> database;
        private readonly ShortUrlRepository repository;

        public ShortUrlRepositoryTests()
        {
            var shortUrls = new List<ShortUrl> {
                                                    new ShortUrl { Id = 1, Title = "Shrinkr.com",Url = "http://shrinkr.com", Hash = "http://shrinkr.com".Hash() },
                                                    new ShortUrl { Id = 2, Title = "DotNetShoutout.com", Url = "http://dotnetshoutout.com", Hash = "http://dotnetshoutout.com".Hash() }
                                               };

            shortUrls[1].Aliases.Add(new Alias { Name = "dtntshtt" });

            var shortUrlSet = new Mock<FakeObjectSet<ShortUrl>>(shortUrls);

            var user = new User { Id = 1 };

            var aliases = new List<Alias>{
                                            new Alias { Id = 1, User = user, ShortUrl = shortUrls[0] },
                                            new Alias { Id = 2, User = user, ShortUrl = shortUrls[1] },
                                         };

            var aliasSet = new Mock<FakeObjectSet<Alias>>(aliases);

            var configurationManager = new Mock<IConfigurationManager>();
            configurationManager.Setup(mgr => mgr.ConnectionString(It.IsAny<string>())).Returns("Dummy Connection String");

            database = new Mock<Database>(configurationManager.Object, "Dummy");
            database.Setup(db => db.ObjectSet<ShortUrl>()).Returns(shortUrlSet.Object);
            database.Setup(db => db.ObjectSet<Alias>()).Returns(aliasSet.Object);

            repository = new ShortUrlRepository(database.Object);
        }

        [Fact]
        public void Should_be_able_to_get_by_id()
        {
            var shortUrl = repository.GetById(1);

            Assert.Equal(1, shortUrl.Id);
        }

        [Fact]
        public void Should_be_able_to_get_by_hash()
        {
            var shortUrl = repository.GetByHash("http://shrinkr.com".Hash());

            Assert.Equal(1, shortUrl.Id);
        }

        [Fact]
        public void Should_be_able_to_get_by_alias_name()
        {
            var shortUrl = repository.GetByAliasName("dtntshtt");

            Assert.Equal(2, shortUrl.Id);
        }

        [Fact]
        public void Should_be_able_to_find_by_user_id()
        {
            var shortUrls = repository.FindByUserId(1, 0, 10);

            Assert.Equal(2, shortUrls.Total);
            Assert.Equal(2, shortUrls.Result.Count);
        }
    }
}

and that’s it, we have completed the initial implementation of our Repositories. What do you think, what it is currently lacking? Yes we are not taking the advantages of Compiled Queries. In the next post, I will show how you can use the both compiled and regular queries in your repositories.

Stay tuned!!!

Shrinkr - Url Shrinking Service Developed with Entity Framework 4.0, Unity, ASP.NET MVC And jQuery (Part 1)

kazimanzurrashid — Thu, 10 Sep 2009 14:22:41 GMT

Creating a full blown url shrinking service was pocking around in my mind for quite some time(of course by using Twitter). Since I heard quite a few good things on Entity Framework 4.0, so I decided to start with it. The first thing I usually do when developing an application is creating the domain model. But to create the domain model, we first have to define the basic functionalities:

The system will only use Open ID for authentication.
User should be able to shrink url without logging in.
When shrinking url, user should be able to specify alias, if alias is not specified, the system will auto generate it.
Shrinked url will also have a associated webpage preview image.
The system will maintain statistic of shrinked url like number of visit, referrer domain, geographic data etc. (requires login)
The user should be able to reset shrinked url statistics. (requires login)
Should have a REST service for creating shrinked url which will work upon the daily limit that was previously set.
It should have nice web 2.0 style interface and should support adaptive rendering.

For the above functionalities, I come up with the following Domain Entities:

As you can see most of entities are nothing but some getter/setter properties, please don’t think it as a anemic domain model, in fact the url shrinking service does not have the kind of behaviors that you can put into your entities. When creating the entities one important thing I did was making the properties virtual, so that Entity Framework can lazy load the associated objects (although it is not necessary for the intrinsic data types). For example, the following shows the codes of User and Alias:

User

namespace Shrinkr
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Diagnostics;
    using System.Linq;

    public class User : IEntity
    {
        private ApiSetting apiSetting;

        public User()
        {
            CreatedAt = SystemTime.Now();
            LastActivityAt = SystemTime.Now();
            Aliases = new List<Alias>();
        }

        public virtual long Id
        {
            get;
            set;
        }

        public virtual string Name
        {
            get;
            set;
        }

        public virtual string Email
        {
            get;
            set;
        }

        public virtual bool IsLockedOut
        {
            get;
            set;
        }

        public virtual DateTime CreatedAt
        {
            get;
            set;
        }

        public virtual DateTime LastActivityAt
        {
            get;
            set;
        }

        public Role Role
        {
            [DebuggerStepThrough]
            get
            {
                return (Role) InternalRole;
            }

            [DebuggerStepThrough]
            set
            {
                InternalRole = (int) value;
            }
        }

        [EditorBrowsable(EditorBrowsableState.Never)]
        public virtual int InternalRole
        {
            get;
            set;
        }

        public virtual IList<Alias> Aliases
        {
            get;
            private set;
        }

        public virtual ApiSetting ApiSetting
        {
            [DebuggerStepThrough]
            get
            {
                if (apiSetting == null)
                {
                    apiSetting = new ApiSetting();
                }

                return apiSetting;
            }

            [DebuggerStepThrough]
            set
            {
                Check.Argument.IsNotNull(value, "value");

                apiSetting = value;
            }
        }

        public virtual bool CanAccessApi
        {
            get
            {
                bool canAccess=  (ApiSetting != null) &&
                                 (ApiSetting.Allowed.GetValueOrDefault()) &&
                                 (ApiSetting.DailyLimit == ApiSetting.InfiniteLimit || ApiSetting.DailyLimit > 0);

                return canAccess;
            }
        }

        public virtual void AllowApiAccess(int dailyLimit)
        {
            if (dailyLimit != ApiSetting.InfiniteLimit)
            {
                Check.Argument.IsNotNegative(dailyLimit, "dailyLimit");
            }

            if (string.IsNullOrEmpty(ApiSetting.Key))
            {
                ApiSetting.Key = Guid.NewGuid().ToString().ToUpperInvariant();
            }

            ApiSetting.Allowed = true;
            ApiSetting.DailyLimit = dailyLimit;
        }

        public virtual bool HasExceedsDailyLimit()
        {
            DateTime lastOneDay = SystemTime.Now().AddDays(-1);

            bool exceeded = CanAccessApi &&
                            ((ApiSetting.DailyLimit != ApiSetting.InfiniteLimit) &&
                             (ApiSetting.DailyLimit <= Aliases.Count(alias => alias.CreatedAt > lastOneDay && alias.CreatedByApi)));

            return exceeded;
        }
    }
}

Alias:

namespace Shrinkr
{
    using System;
    using System.Collections.Generic;

    public class Alias : IEntity
    {
        public Alias()
        {
            Visits = new List<Visit>();
            CreatedAt = SystemTime.Now();
        }

        public virtual long Id
        {
            get;
            set;
        }

        public virtual string Name
        {
            get;
            set;
        }

        public virtual string IPAddress
        {
            get;
            set;
        }

        public virtual DateTime CreatedAt
        {
            get;
            set;
        }

        public virtual IList<Visit> Visits
        {
            get;
            private set;
        }

        public virtual User User
        {
            get;
            set;
        }

        public virtual ShortUrl ShortUrl
        {
            get;
            set;
        }
    }
}

Next, define the Repositories, in the above entities there are two aggregate root User and ShortUrl, so we will create repositories for those two:

Repositories:

The last thing in the domain model is the Services. Please don’t confuse the Service with the Web Service or something else, here Service refers to some domain logic which does not belongs to entities or repositories, usually these services are called from the presentation layer in our case the ASP.NET MVC Controllers. In this application, we do have few things that directly does not belongs to the above entities or repositories, For example, shrinking url, ensuring unique alias etc etc.

Services:

If you are wondering about the purpose of FindByUser and GetByAlias method of the above IShortUrlService as they already exits in IShortUrlRepository, let me tell you that returning Domain Entities directly in presentation layer is not a good practise, instead you should create some Data Transfer Objects AKA DTO for returning those. The above two methods should do those kind of mappings - flattering the object hierarchy, so that we can easily map it in the UI and do serialization when required. In this application we will have the following two dtos:

DTOs:

So far we have discussed about application domain model, In the next post, we will disscuss about the domain model mapping to database with Entity Framework 4.0.

Stay tuned!!!

ASP.NET MVC and Authorization and Monkey Patching

kazimanzurrashid — Sun, 06 Sep 2009 09:06:51 GMT

[Update: Maarten Balliauw confirmed that he has applied the suggested fix in MVC Sitemap provider]

As you know that we will be including Menu in our final release, when defining the menu, it will allow to specify the Route Name, Controller/Action name and associated route values for an menu item so that we can generate the corresponding url. One of the basic feature that we want to include is, when rendering the Menu it will scan through the controller’s actions and only render the menu items that the currently visiting user has permission. As you can guess, it is related with the AuthorizeAttribute of ASP.NET MVC framework. The actual method that is responsible for checking the permission of this attribute is AuthorizeCore which is marked as protected, so there is no way we can call this method from our code. So I decided to check, how other peoples are handling this issue, so far I have found two solutions:

ASP.NET MVC Sitemap provider of Maarten Balliauw and
MVCContrib.org.

But none of them are actually handling it correctly!!!.

Before moving to what is wrong with these solutions, let me paste the main portion of the AuthorizeAttribute code that is responsible for checking the permission:

public class AuthorizeAttribute : FilterAttribute, IAuthorizationFilter
{
    public virtual void OnAuthorization(AuthorizationContext filterContext)
    {
        if (filterContext == null)
        {
            throw new ArgumentNullException("filterContext");
        }

        if (AuthorizeCore(filterContext.HttpContext))
        {
            HttpCachePolicyBase cachePolicy = filterContext.HttpContext.Response.Cache;
            cachePolicy.SetProxyMaxAge(new TimeSpan(0));
            cachePolicy.AddValidationCallback(CacheValidateHandler, null /* data */);
        }
        else
        {
            filterContext.Result = new HttpUnauthorizedResult();
        }
    }

    protected virtual bool AuthorizeCore(HttpContextBase httpContext)
    {
        if (httpContext == null)
        {
            throw new ArgumentNullException("httpContext");
        }

        IPrincipal user = httpContext.User;

        if (!user.Identity.IsAuthenticated)
        {
            return false;
        }

        if (_usersSplit.Length > 0 && !_usersSplit.Contains(user.Identity.Name, StringComparer.OrdinalIgnoreCase))
        {
            return false;
        }

        if (_rolesSplit.Length > 0 && !_rolesSplit.Any(user.IsInRole))
        {
            return false;
        }

        return true;
    }
}

As you can see the only public method OnAuthorization (which is also an implementation of IAuthorizationFilter interface, we will discuss this interface after a little while) is calling the protected AuthorizeCore to check the permission, if it is permitted then it is adding some callback to sync with the ASP.NET Caching otherwise it returns Unauthorized Result.

Now lets see, what is wrong with the above two solutions, First the ASP.NET MVC SiteMap provider, the code that is responsible for checking the controller/action permission is the following:

IController controller = provider.GetController(requestContext, mvcNode.Controller); // get controller
if (controller is ControllerBase)
{
    var controllerContext = new ControllerContext(requestContext, (ControllerBase)controller);
    var authorizationContext = new AuthorizationContext(controllerContext);

    foreach (IAuthorizationFilter att in controller.GetType().GetCustomAttributes(typeof(IAuthorizationFilter), true).Union(// get controller authorization filters
    controller.GetType().GetMethods(BindingFlags.Public | BindingFlags.Instance).Where(m =>
    {
        var nameAtt = m.GetCustomAttributes(typeof(ActionNameAttribute), true).FirstOrDefault() as ActionNameAttribute;
        return string.Equals(mvcNode.Action, nameAtt != null ? nameAtt.Name : m.Name, StringComparison.OrdinalIgnoreCase);
    })
    .SelectMany(m => m.GetCustomAttributes(typeof(IAuthorizationFilter), true))))// get authorization filters from all related methods
    {
        if (att is ValidateAntiForgeryTokenAttribute)
        {
            return true;
        }
        att.OnAuthorization(authorizationContext); // run authorization
        if (authorizationContext.Result != null) // authorization failed
        {
            return false;
        }
    }
}

There are two issues with the above code:

It depends upon the IAuthorizationFilter rather than AuthorizeAttribute, the problem with this approach is there more filters other than AuthorizeAttribute which implements this interface, as you can see there is a check for ValidateAntiForgeryTokenAttribute in the above code, there are few more already in the ASP.NET MVC Framework e.g. ValidateInputAttribute, RequireSslAttribute and anyone can write a custom filter that implements this interface and decorate the controller/action, so this code will return incorrect results, in those cases.
The next issue, when it is executed for AuthorizeAttribute which in turns adds caching callback and there is no way to remove that callback once the OnAuthorization calls gets completed, so it will screw the ASP.NET Caching and might hurt the application performance.

The correct way to address this issue:

Don’t depend on the IAuthorizationFilter interface, instead check the concrete AuthorizeAttribute which is meant to be dealing with Roles/Users, also it is not marked as sealed, so it is expected that you will be inheriting this class and override the AuthorizeCore method if you want to put your custom logic.
Find a way to call the protected AuthorizeCore method which is actually responsible for checking the permission.

Now, lets see how the MVCContrib team is handling this issue, basically they have created a new class inherited from the AuthorizeAttribute and it also contains a public method Authorized which in turn calls the protected AuthorizeCore method:

public class OpenAuthorizeAttribute : AuthorizeAttribute
{
    public OpenAuthorizeAttribute(AuthorizeAttribute attribute)
    {
        Order = attribute.Order;
        Roles = attribute.Roles;
        Users = attribute.Users;
    }

    public bool Authorized(RequestContext requestContext)
    {
        return AuthorizeCore(requestContext.HttpContext);
    }
}

And whenever they wants to check permission they pass the actual attribute to this new class and calls the Authorized method. Much better than the previous solution, still it will not work when you create a Custom AuthorizationAttribute, as it will call the AuthorizeCore of the original AuthorizationAttribute rather than yours.

After discussing with the ASP.NET MVC Team and Levi Broderick explained me really well that AuthorizeAttribute was not really designed to be used in this kind of scenario.To solve it, yes we can use InvokeMethod of reflection, but invoking a protected method will not work in medium trust environment. So the only option that is left to monkey patch this issue is IL rewritting. The logic is, when checking the permission it will check whether a custom AuthorizeAttribute is used, if not it will follow the same as the MVCContrib is currently doing, if a custom Authorization attribute is used, it will runtime create a inherited class with a public method which we will call to check the permission, of course there is slight a performance overhead associated, but we can easily overcome it with proper caching. Now lets take a quick look how we are checking whether the user has permission of an action, assuming that the AuthorizeAttributes are collected from another service:

foreach (AuthorizeAttribute authorizationAttribute in authorizationAttributes)
{
    if (authorizationAttribute != null)
    {
        try
        {
            Type currentAuthorizationAttributeType = authorizationAttribute.GetType();

            IAuthorizeAttribute subclassedAttribute = (currentAuthorizationAttributeType == typeof(AuthorizeAttribute)) ?
                                                       new InternalAuthorize() : // No need to use Reflection.Emit when asp.net mvc built-in attribute is used
                                                       reflectedAuthorizeAttributeCache.GetAttribute(currentAuthorizationAttributeType);

            subclassedAttribute.Order = authorizationAttribute.Order;
            subclassedAttribute.Roles = authorizationAttribute.Roles;
            subclassedAttribute.Users = authorizationAttribute.Users;

            // Copy the remaining properties (if there is any)
            objectCopier.Copy(authorizationAttribute, subclassedAttribute, "Order", "Roles", "Users" /* Excluded properties */);

            allowed = subclassedAttribute.IsAuthorized(requestContext.HttpContext);
        }
        catch
        {
            // do not allow on exception
            allowed = false;
        }

        if (!allowed)
        {
            break;
        }
    }
}

As you can see when the default AuthorizeAttribute is used we are creating InternalAttribute, if not we are requesting a caching service to get the runtime version of this attribute, for each custom attribute we are using Reflection.Emit to create a subclass of that attribute and then we are caching it so that we can use the same attribute without recreating it with Reflection.Emit. Also to avoid naming collision, we created an interface IAuthorizeAttribute which we implements with IL. The IAuthorizeAttribute contains the same properties as the original AuthorizeAttribute:

public interface IAuthorizeAttribute
{
    int Order
    {
        get;
        set;
    }

    string Roles
    {
        get;
        set;
    }

    string Users
    {
        get;
        set;
    }

    bool IsAuthorized(HttpContextBase httpContext);
}

Now here is the magic code that generates the class at runtime:

// (c) Copyright Telerik Corp. 
// This source is subject to the Microsoft Public License. 
// See http://www.microsoft.com/opensource/licenses.mspx#Ms-PL. 
// All other rights reserved.

namespace Telerik.Web.Mvc.Infrastructure.Implementation
{
    using System;
    using System.Reflection;
    using System.Reflection.Emit;
    using System.Web;

    public class AuthorizeAttributeBuilder : IAuthorizeAttributeBuilder
    {
        private static readonly Type authorizeAttributeType = typeof(IAuthorizeAttribute);
        private static readonly ModuleBuilder module = CreateModuleBuilder();

        public ConstructorInfo Build(Type parentType)
        {
            Guard.IsNotNull(parentType, "parentType");

            string typeName = "$" + parentType.FullName.Replace(".", string.Empty);

            TypeBuilder typeBuilder = module.DefineType(typeName, TypeAttributes.Class | TypeAttributes.Public | TypeAttributes.AutoClass | TypeAttributes.AnsiClass | TypeAttributes.BeforeFieldInit, parentType, new[] { authorizeAttributeType });
            typeBuilder.DefineDefaultConstructor(MethodAttributes.Public | MethodAttributes.HideBySig | MethodAttributes.SpecialName | MethodAttributes.RTSpecialName);
            typeBuilder.AddInterfaceImplementation(authorizeAttributeType);

            WriteProperty(parentType, typeBuilder, "Order", typeof(int));
            WriteProperty(parentType, typeBuilder, "Roles", typeof(string));
            WriteProperty(parentType, typeBuilder, "Users", typeof(string));
            WriteIsAuthorized(parentType, typeBuilder);

            Type type = typeBuilder.CreateType();

            return type.GetConstructor(Type.EmptyTypes);
        }

        private static void WriteProperty(Type parentType, TypeBuilder builder, string name, Type type)
        {
            string getName = "get_" + name;
            string setName = "set_" + name;

            MethodInfo parentGetMethod = parentType.GetMethod(getName, BindingFlags.Public | BindingFlags.Instance);
            MethodBuilder implementedGetMethod = builder.DefineMethod(getName, MethodAttributes.Public | MethodAttributes.Virtual, type, Type.EmptyTypes);
            ILGenerator getIl = implementedGetMethod.GetILGenerator();
            getIl.Emit(OpCodes.Ldarg_0);
            getIl.Emit(OpCodes.Call, parentGetMethod);
            getIl.Emit(OpCodes.Ret);

            MethodInfo interfaceGetMethod = authorizeAttributeType.GetMethod(getName, BindingFlags.Public | BindingFlags.Instance);
            builder.DefineMethodOverride(implementedGetMethod, interfaceGetMethod);

            MethodInfo parentSetMethod = parentType.GetMethod(setName, BindingFlags.Public | BindingFlags.Instance);
            MethodBuilder implementedSetMethod = builder.DefineMethod(setName, MethodAttributes.Public | MethodAttributes.Virtual, typeof(void), new[] { type });
            ILGenerator setIl = implementedSetMethod.GetILGenerator();
            setIl.Emit(OpCodes.Ldarg_0);
            setIl.Emit(OpCodes.Ldarg_1);
            setIl.Emit(OpCodes.Call, parentSetMethod);
            setIl.Emit(OpCodes.Ret);

            MethodInfo interfaceSetMethod = authorizeAttributeType.GetMethod(setName, BindingFlags.Public | BindingFlags.Instance);
            builder.DefineMethodOverride(implementedSetMethod, interfaceSetMethod);
        }

        private static void WriteIsAuthorized(Type parentType, TypeBuilder builder)
        {
            MethodInfo protectedMethod = parentType.GetMethod("AuthorizeCore", BindingFlags.NonPublic | BindingFlags.Instance | BindingFlags.InvokeMethod);
            MethodBuilder implementedMethod = builder.DefineMethod("IsAuthorized", MethodAttributes.Public | MethodAttributes.Virtual, typeof(bool), new[] { typeof(HttpContextBase) });
            ILGenerator il = implementedMethod.GetILGenerator();

            il.Emit(OpCodes.Ldarg_0);
            il.Emit(OpCodes.Ldarg_1);
            il.Emit(OpCodes.Call, protectedMethod);
            il.Emit(OpCodes.Ret);

            MethodInfo interfaceMethod = authorizeAttributeType.GetMethod("IsAuthorized", BindingFlags.Public | BindingFlags.Instance);
            builder.DefineMethodOverride(implementedMethod, interfaceMethod);
        }

        private static ModuleBuilder CreateModuleBuilder()
        {
            const string Name = "InheritedAuthorizeAttributes";

            AssemblyName assemblyName = new AssemblyName(Name + "Assembly")
                                            {
                                                Version = typeof(AuthorizeAttributeBuilder).Assembly.GetName().Version
                                            };

            AssemblyBuilder assemblyBuilder = AppDomain.CurrentDomain.DefineDynamicAssembly(assemblyName, AssemblyBuilderAccess.Run);
            ModuleBuilder moduleBuilder = assemblyBuilder.DefineDynamicModule(Name + "Module");

            return moduleBuilder;
        }
    }
}

There is only one public method Build where you have to pass the custom AuthorizeAttribute type, the rest will be taken care by it. And if you want to use the above code, you are permitted to do so, as it is licensed under MS-PL.

The moral of this story is though ASP.NET MVC is one of the most extensible framework by MS, yet there are some places where it requires some re-work, but it does not mean you would say some harsh word like some negative minded people of our community, instead you should look for the solution and share it.

Telerik Extensions for ASP.NET MVC – Upcoming ScriptRegistrar Preview

kazimanzurrashid — Sat, 29 Aug 2009 08:45:56 GMT

[Update: I have updated the images with a recent version which more clarifies the whole picture, the result shows the parallel version is 2x fast comparing to the plain.]

In this post, I will give you a sneak preview of the ScriptRegistrar major enhancement. Those who have checked our ScriptRegistrar or followed my blog for last few weeks already know that it has out of box support for Grouping. Combining, Caching, Compressing, Synchronizing statements between Master/Content and as far as I know, no other component including the other commercial vendors has all these features that we are providing for free and as well as open sourced. Currently we are working on parallel script downloading support that we are going to include in our next release, if you do not know about parallel script downloading let me first show you a regular example, lets say you have a page which contains five script tags:

<!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>
    <title>Plain Script Loading</title>
</head>
<body>
    <h1>Plain Script Loading example</h1>
    <p>Here goes the sample body..</p>
    <div id="status" style="font-family:Consolas;background-color:#ccc"></div>
    <% string ticks = DateTime.Now.Ticks.ToString(); %>
    <script type="text/javascript" src="Scripts/plainScript1.js?t=<%= ticks %>"></script>
    <script type="text/javascript" src="Scripts/plainScript2.js?t=<%= ticks %>"></script>
    <script type="text/javascript" src="Scripts/plainScript3.js?t=<%= ticks %>"></script>
    <script type="text/javascript" src="Scripts/plainScript4.js?t=<%= ticks %>"></script>
    <script type="text/javascript" src="Scripts/plainScript5.js?t=<%= ticks %>"></script>
    <script type="text/javascript">
        document.getElementById('status').innerHTML += 'You must have seen all the messages.<br>';
    </script>
</body>
</html>

If you run the above page with Firebug, you will find, it loads the page similar to the following:

Check the above red marked area which shows as steps of a stairway. It indicates when a browser encounters a script tag it stops its rendering until it downloads the script file. Since we have included five script files there are five steps (total six, the first one is for the page), each for a script. Now lets add the same number of script files with our ScriptRegistrar:

<!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>
    <title>Next ScriptRegistrar</title>
</head>
<body>
    <h1>ScriptRegistrar : Parallel script loading example</h1>
    <p>Here goes the sample body..</p>
    <div id="status" style="font-family:Consolas;background-color:#ccc"></div>
    <% string ticks = DateTime.Now.Ticks.ToString(); %>
    <% Html.Telerik().ScriptRegistrar()
                     .Scripts(script =>
                              script.Add("~/Scripts/parallelScript1.js?t=" + ticks)
                                    .Add("~/Scripts/parallelScript2.js?t=" + ticks)
                                    .Add("~/Scripts/parallelScript3.js?t=" + ticks)
                                    .Add("~/Scripts/parallelScript4.js?t=" + ticks)
                                    .Add("~/Scripts/parallelScript5.js?t=" + ticks)
                             )
                     .OnDocumentReady(() =>
                                      {%>
                                        document.getElementById('status').innerHTML += 'You must have seen all the messages.<br>';
                                      <%}
                                     )
                     .Render(); %>
</body>
</html>

(I have intentionally removed the default jQuery script form the ScriptRegistrar and did not merge it as a group to show the parallelization).

When you run the ScriptRegistrar version with the Firebug, you will get the following picture:

Now check the red marked area again, as you can see there are no steps which means download of this scripts starts almost at the same time, we are initially loading our tiny script loader(Telerik.ScriptRegistrar.js) which then loads these scripts without blocking each other. We are still working on different cases and how you can more easily define the dependencies between the groups/script files.

So to those folks who thinks that a msbuild/nant task that minifies and combines script files of a predefined directory on post build and a ScriptInclude helper method is all the optimization that can be done when it comes to script management, maybe it is okay for a small application where the number of javascript files are same or less than your hand’s finger, but for today’s highly ajax application, there are a lot of cool things that you can do to enhance its performance and we are fully committed for doing that.

Convention over Configuration and Telerik Extensions for ASP.NET MVC

kazimanzurrashid — Thu, 27 Aug 2009 14:03:31 GMT

Convention over Configuration is getting more and more popular in the .NET space, especially after the release of ASP.NET MVC. In our extensions, there are quite a few places where you will find this concept, lets consider the following snippet of ScriptRegistrar:

<% Html.Telerik().ScriptRegistrar()
                 .Scripts(script => script.AddGroup(
                                                        "validation",
                                                        group => group.Add("jquery.validate.js")
                                                                      .Add("xVal.jquery.validate.js")
                                                                      .Combined(true)
                                                   )
						 )
				 .Render(); %>

Check that we did not mention any path for the script files, by default it assumes that all the script files are located in the default “Scripts” folder that is created when you create a ASP.NET MVC Application in Visual Studio. Now what if the script files resides in a different folder.

<% Html.Telerik().ScriptRegistrar()
                 .Scripts(script => script.AddGroup(
                                                        "validation",
                                                        group => group
                                                                      .DefaultPath("~/Scripts/Validation") // Setting the default path of a Group.
                                                                      .Add("jquery.validate.js")
                                                                      .Add("xVal.jquery.validate.js")
                                                                      .Combined(true)
                                                   )
						 )
				 .Render(); %>

Now what if one of the file in a group resides in a different folder:

<% Html.Telerik().ScriptRegistrar()
                 .Scripts(script => script.AddGroup(
                                                        "validation",
                                                        group => group
                                                                      .DefaultPath("~/Scripts/Validation")
                                                                      .Add("jquery.validate.js")
                                                                      .Add("~/SomeOtherPath/xVal.jquery.validate.js") // Check that we are setting the complete path.
                                                                      .Combined(true)
                                                   )
						 )
				 .Render(); %>

Okay, now what if you want to change the default location of both scripts and stylesheet files, Just add the following lines in your application start (global.asax maybe):

WebAssetDefaultSettings.StyleSheetFilesPath = "~/assets/stylesheets";
WebAssetDefaultSettings.ScriptFilesPath = "~/assets/scripts";

So by convention we are assuming the default locations (for script “~/Scripts” and Stylesheet “~/Content”) but with configuration (the above 2, 3, 4 code snippets) you can completely override it. Let me show one more case before completing this post.

We all know we should minify our script and stylesheet files with tools like Yahoo compressor before making the application live. Lets say we have minified the above two files with a minifying tool and saved in the Scripts directory with .min.js extension. Now, if you run the application in release mode debug = “false” in web.config, you will find that the ScriptRegistrar is picking up the .min.js instead of .js or debug.js and the vice versa when debug=”true” and the same holds true for StyleSheetRegistrar.

RESTify – Extending ASP.NET MVC

kazimanzurrashid — Mon, 24 Aug 2009 23:41:49 GMT

Recently there has been a talk of Actionless Controller in ASP.NET MVC space. Basically we are doing a lot of things in the controller and that is the reason we often finds our controllers with number of dependencies in the constructor. Jeffrey Palermo initially suggested a version where he separated each action as a standalone controller which is good to reduce the number of dependency but it does not sound right to me. At the bottom of that post Neal Blomfield hinted about the Command Pattern which makes absolute sense. Since the release of our initial version, I have got some time to breathe, so I decided to give it a try. Initially the idea was, each Controller action method will accept a command object as parameter and the Controller will call the Execute method. The Command object will be responsible to perform the action which the Controller action methods usually do. Let me show you a sample controller which has nothing but some CRUD methods with Command objects:

public class ProductController : Controller
{
    public ActionResult Index(ProductListCommand command)
    {
        return command.Execute();
    }

    public ActionResult Create()
    {
        return View();
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Create(ProductCreateCommand command)
    {
        return command.Execute();
    }

    public ActionResult Edit(ProductGetCommand command)
    {
        return command.Execute();
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Edit(ProductUpdateCommand command)
    {
        return command.Execute();
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Delete(ProductDeleteCommand command)
    {
        return command.Execute();
    }
}

Now, let see what is happening inside the Commands, first the ProductCreateCommand:

public class ProductCreateCommand : RESTifyCommand
{
    private readonly IRepository<Product> repository;

    public ProductCreateCommand(IRepository<Product> repository)
    {
        this.repository = repository;
    }

    public Product Product
    {
        get;
        set;
    }

    protected override void ExecuteCore()
    {
        // You should use a powerful validation engine like DataAnnotation or xVal 
        // over here, I am using the dumb if/else for the shake of simplicity.

        if (string.IsNullOrEmpty(Product.Name))
        {
            ModelState.AddModelError("Product.Name", "Name cannot be blank.");
        }

        if (!Product.Price.HasValue)
        {
            ModelState.AddModelError("Product.Price", "Price cannot be blank.");
        }

        if (Product.Price.HasValue && (Product.Price <= 0))
        {
            ModelState.AddModelError("Product.Price", "Invalid price. Price cannot be zero or negative.");
        }

        if (ModelState.IsValid)
        {
            repository.Create(Product);
            ViewData.Model = Product;
        }
    }
}

First, it is inherited from a special base class RESTifyCommand, next we are injecting our dependency in the constructor as we do for the Controllers and at last, we are overriding the ExecuteCore method to perform our actual operation. Also check that we not writing any code to populate the Product, instead we are relying on the ASP.NET MVC Framework to populate it for us. The little difference between the ExecuteCore with a regular Controller action method is instead of returning any ActionResult(the method is a void()) we are only setting up the Model and ModelState. I will get back to the Execute() method after a little while, for the moment lets see how this Command object is created and passed backed to the Controller. One of the important thing when creating the Command Object is, we have to inject the dependencies in its constructor or more specifically we have to give the opportunity so that you can use your prefered IoC/DI framework to create these commands, also we need to utilize the rich ASP.NET MVC underlying features to automatically populate the other parts of the Command (for ex the Product property of the above example) and the thing that I really love of ASP.NET MVC framework is its extensibility. To create and populate the Command object we use a custom ModelBinder. Our ModelBinder is inherited from the DefaultModelBinder of ASP.NET MVC as we want to reuse the common behavior of the default binder, but instead of overriding the BindModel that you often see in most of the available ModelBinders, we are overriding the CreateModel method.

public class CommandBinder : DefaultModelBinder
{
    private readonly Func<Type, IRESTifyCommand> factory;
    private readonly IFormatDetector formatDetector;

    public CommandBinder(Func<Type, IRESTifyCommand> factory, IFormatDetector formatDetector)
    {
        Invariant.IsNotNull(factory, "factory");
        Invariant.IsNotNull(formatDetector, "formatDetector");

        this.factory = factory;
        this.formatDetector = formatDetector;
    }

    protected override object CreateModel(ControllerContext controllerContext, ModelBindingContext bindingContext, Type modelType)
    {
        Invariant.IsNotNull(controllerContext, "controllerContext");
        Invariant.IsNotNull(modelType, "modelType");

        IRESTifyCommand command = factory(modelType);
        RESTifyFormats format = formatDetector.Detect(controllerContext.HttpContext.Request);

        command.SetRequestFormat(format);
        command.SetControllerContext(controllerContext);

        return command;
    }
}

As you can see in the constructor we are accepting a Func to create the Command so that we do not have to refer to any external IoC/DI component, we are also accepting another object IFormatDetector. Initially, my plan was to introduce the Command object in ASP.NET MVC, but after seeing both Nate Kohari’s Siesta and MS ASP.NET MVC REST SDK, I thought why not add some REST love into this. So the idea was after the Command objects performs its actual operation which we have seen in the above, it should also decide in which format it will return the data, the associated controller should not have any clue about this, all it has to do is call the Excecute() method of command and the rest it taken care by the Command. In the above, the formatDetector detects the requested format from HttpRequest and sets the Command requested format, so that Command can later return the result depending upon that. Although it is in very early stages and I am still working on it, yet there are some advantages of using it comparing to the above:

Out of the box support for HTML/XML/JSON/JSONP. There is no generic representation of ATOM/RSS, you need to write special formatters(IResultFormatter) to support those.
Serialization support other than DataContractSerializer, which means you can serialize anything including the anonymous objects.
Support for Registering JavaScriptConverter to shape up the json output. (It is still missing in the ASP.NET MVC Framework).
Support for Registering KnownTypes for the DataContractSerializer.
Fully extensible, anything can be replaced without modifying the core.
200+ Unit Tests which include more than 99% code coverage.

You can view the complete live demo, over here. As you can see the same Controller method is responsible for returning different formats, no condition checking, no if/else nothing, just call the Execute() of the Command. In the demo, I am using plain javascript instead of any library like jQuery/ASP.NET AJAX to show you that it is completely independent of the client side, you can use your prefered javascript library with this extension when working with your browser application.

Now lets get back to the original discussion, so far we have set the Model and ModelState, but did not see how the result is delivered to the client, lets see what is happening in the RESTIfyCommand’s Execute method:

public virtual ActionResult Execute()
{
    if (!CanExecute)
    {
        return Unsupported();
    }

    ExecuteCore();

    return BuildResult();
}

First, we are checking whether the Command can execute, there are severeal reasons a Command cannot execute, for example the request format is not supported by the Command, which usually happens when you want to restrict certain formats from delivering to the client or formatter for the requested type is not registered or your code as you can override the method, if the command cannot execute we are returning a special ActionResult RESTifyUnsupportedResult which is basically returning HttpStatusCode 415(Unsupported Media Type). If the command is allowed to execute then it is calling the ExecuteCore() which means the code that we have written in the above and finally it is returning the result. Now lets see the code of BuildResult method.

protected virtual ActionResult BuildResult()
{
    if (RequestedFormat == RESTifyFormats.Html)
    {
        return new ViewResult { ViewData = ViewData, TempData = TempData };
    }

    IResultFormatter formatter = ResultFormatters[RequestedFormat];

    if (RequestedFormat == RESTifyFormats.Jsonp)
    {
        IJsonpResultFormatter jsonpFormatter = formatter as IJsonpResultFormatter;

        if (jsonpFormatter == null)
        {
            throw new InvalidOperationException(TextResource.InvalidResultFormatterTypeRegisteredForJsonp.FormatWith(formatter.GetType().FullName));
        }

        jsonpFormatter.JsonpCallbackFunction = JsonpFunctionNameDetector.Detect(HttpContext.Request);
    }

    return new RESTifyResult(RequestedFormat, formatter, HttpContext.Request.ContentEncoding, Model, ModelState);
}

As you can see, for the Html, we are returning the regular ViewResult, next for JSONP we are checking whether the registered formatter is appropriate for JSONP, as JSONP needs the additional callback method name, the rest of the part is very simple, we are returning our custom RESTifyResult with the required data, the RESTifyResult uses the provided ResultFormatter to write in the Response.

public override void ExecuteResult(ControllerContext context)
{
    Invariant.IsNotNull(context, "context");

    HttpResponseBase response = context.HttpContext.Response;

    response.Clear();

    response.ContentType = contentTypes[Format];

    if (ContentEncoding != null)
    {
        response.ContentEncoding = ContentEncoding;
    }

    string output = Formatter.Format(ContentEncoding, Model, ModelState);

    response.Write(output);
}

One last thing that you have to do, is adding some bootstrapping code in the global.asax or more preferably in your Bootstrapper.

public void ConfigureRESTify()
{
    RESTifySettings.Current
                   .SetCommandFactory(type => ServiceLocator.Current.GetInstance(type) as IRESTifyCommand)
                   .RegisterCommands();
}

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

    ConfigureServiceLocator();
    ConfigureRESTify();
}

We are setting the factory method which you have seen in the CommandBinder in the above in the SetCommandFactory, I usually prefer to abstract the underlying IoC/DI with the CommonServiceLocator, if you do not like it, you use your preferred DI directly over here. Next, we are registering all Commands with our CommandBinder by scanning the referenced assemblies, if you do not like to scan you can use the overloaded version which accepts specific types or single assembly.

Now let me answer some of the common questions:

Q: How do I redirect to a action after the command executes, for example, in a CRUD operation when an object is created I want to redirect back to Index for the Html and for the others formats I just want to return the data.

A: There are few overloaded methods in the Command which you can use to redirect to other actions for a special format after the command executes. For example, in the above ProductController’s Create you can use the following:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create(ProductCreateCommand command)
{
    return command.ExecuteAndRedirectToAction("Index").WhenFormatIsHtml();
}

The WhenFormatIsHtml is an extension methods there are other versions of it. Don’t worry about the validation it will not redirect if the validation fails (ModelState.IsValid == false).

Q: What about the other facilities that we often gets in the regular Controllers like Try/UpdateModel, UrlHelper etc etc.

A: Most of the facilities that are available in Controller is also available in Command but it does not includes those which are contradictory (methods that returns ActionResult (w/o redirecting) are excluded).

Q: Looks like the Command object itself inherited from Controller.

A: No, it is not. This is the declaration:

public abstract class RESTifyCommand : IRESTifyCommand, IHideObjectMembers

Q: How do I on/off supported format?

A: To on/off supported formats globally use the RESTifySettings like the following:

RESTifySettings.Current
               .SetCommandDefaultFormats(RESTifyFormats.Html | RESTifyFormats.Json);

Now all your command will only support html and json or you can override the SupportedFormats property if you want to set it for a specific command, for example, now the ProductListCommand will only support Html and ATOM:

public class ProductListCommand : RESTifyCommand
{
    protected override RESTifyFormats SupportedFormats
    {
        get
        {
            return RESTifyFormats.Html | RESTifyFormats.Atom;
        }
    }
}

Q: How do I register custom Result Formatter?

A: To register a formatter that will be applied to all, use the RegisterResultFormatter method, there is also Command specific version which will set the formatter for only that Command.

Q: How does the Serialization works?

A: Well when it comes to serialization in .NET Framework, we have two sets of serializers the regular serializers like XmlSerializer/JavaScriptSerializer and the new DataContractSerializers, but none of it can serve our purpose. For example, DataContractSerializers can only work when the serialized object is decorated with its required attributes, which means you cannot serialize anonymous objects or the objects that are beyond your control also if your object is buildup with other objects it requires to know those other objects. There are also issues with regular serializers. So instead of supporting only a single set, we are supporting both. When serializing we are first first checking whether the object is a known type to us, if it is a known type we use the DataContractSerializers if not we are using the regular serializers. By known type, I mean an object is decorated with DataContractSerializers attributes and it is registered to this extension. To register known types, you can use the RegisterKnownTypes method of RESTifySettings, it has similar overloaded versions of RegisterCommands.

Q: How can I play with it, where is the source code located?

A: You can check the live version over here or if you want to get the source, checkout my first open source project in GitHub.

That’s it for the day.

Introducing Telerik Extensions for ASP.NET MVC

kazimanzurrashid — Wed, 12 Aug 2009 06:49:14 GMT

[Update: We have just upload the source code in CodePlex. Check it out.]
[Update: Also checkout the Atanas post where he detailed our plans and goals of this product.]

Today, we have released our first public community technology preview of our ASP.NET MVC Extensions. This is a very lightweight framework for developing ASP.NET MVC View Components that we are working for last few months. There are few key points that I like to mention:

It is Open Source (dual licensed), yes you heard me. It is the first Open Source project of Telerik released under MS-PL.
It is free for the time being we will be developing our commercial components based upon this tiny framework.
It is based upon jQuery, yes we know how much the community loves it.
It supports multiple view engines. The sample contains the Webform, Spark and NHaml examples.
The CTP contains the popular jQueryUI components as a proof of concepts but you can use it in your application with complete confidence. Since, we will be releasing our own version, it would be difficult for us to give it the same priority, instead we expect the open source community will be responsible for its further development(enhancing, bug fixing and adding new components) and we will be accepting patch/new components for the jQuery components from the community.

You can download it with complete source/tests/samples/docs from our ASP.NET MVC Product page ~~(we will be also uploading it in CodePlex), please check back if the page is still not available.~~

You can also check the jQueryUI Webform demo over here.

I will be blogging more about this very soon.

Stay tuned!!!

JavaScript File Management

kazimanzurrashid — Fri, 24 Jul 2009 19:54:59 GMT

As many of you know that I am currently involved in developing few UI Components for the ASP.NET MVC Framework (Hint: It is not a personal project, and we do have the plan to make it ~~the source open~~ dual license). In this post, I will discuss about our design decisions regarding how we plan to manage the javascript files with our UI Components.

When developing a typical web application we usually find four kinds of javascript files.

Framework scripts like jQuery, ExtJS or maybe MS Ajax etc.
UI Component/Plug-in scripts like jQuery UI, jQuery Tools, jQuery validation/forms plug-ins etc that depends upon the framework script.
Application level common scripts that are shared among multiple pages and might depends upon the above two.
Page scripts(not embedded in html, rather as external file) that might depends upon on the above three.

To make the application really responsive/fast we often have to merge/compress/cache these javascript files. Currently most of the framework in .NET world (including the latest ASP.NET AJAX 3.5) supports combining the scripts in a single response. But this is not an optimal option in most of the cases. Why? Because we are either downloading the same file content in different pages or we are downloading some unnecessary file content for a specific page (assuming that you have specified all your merged script in your master page). Certainly it is a one time issue, once the file is downloaded it will be cached and the user does not have to download it again, but does not it also indicate the incapability of your script management components, also this is not viable option in today's heavily ajax sites.. There are also few other considerations like how can I load the scripts from a CDN (free/paid), does it render the scripts at the bottom of the pages etc etc. While considering all the above facts, we think the best way to serve scripts is, if it is merged in groups. Lets consider the following scenario, each url is using the listed javascript files:

http://mysite.com/List	http://mysite.com/View/3	http://mysite.com/Edit/3
jquery-1.3.2.js jquery-ui-1.7.2.custom.js jquery.template.js jquery.pagination.js Utility.js Search.js List.js	jquery-1.3.2.js jquery-ui-1.7.2.custom.js jquery.template.js jquery.pagination.js Utility.js View.js	jquery-1.3.2.js jquery-ui-1.7.2.custom.js jquery.validate.js jquery.form.js jquery.watermark.js Utility.js Edit.js

We can group the above scripts, in the following groups:

jQueryBase: jquery-1.3.2.js, jquery-ui 1.7.2.custom.js.
ListView: jquery.template.js,jquery.pagination.js.
Form: jquery.validate.js, jquery.form.js, jquery.watermark.js.
ListLocal: Utility.js, Search.js, List.js.
ViewLocal: Utility.js, View.js.
EditLocal: Utility.js, Edit.js.

Now, we can replace with the following:

http://mysite.com/List	http://mysite.com/View/3	http://mysite.com/Edit/3
jQueryBase ListView ListLocal	jQueryBase ListView ViewLocal	jQueryBase Form EditLocal

The benefits of the above comparing to individual file or single file combining are:

We are sending less request to our web server (as the files are now grouped).
We are not downloading the same file between the page visits (comparing to single file response).
We are downloading the files that are only required for that visiting page.

With our Script Management Component it becomes really easy to achieve the above, for example, for the List you can use the following syntax:

<% Html.jQuery().ScriptRegistrar().Scripts(script => script.AddGroup( "jqueryBase",
                                                                        group => group.Add("~/Scripts/jquery-1.3.2.js")
                                                                                      .Add("~/Scripts/jquery-ui-1.7.2.custom.js")
                                                                  )

                                                            .AddGroup( "ListView",
                                                                        group => group.Add("~/Scripts/jquery.template.js")
                                                                                      .Add("~/Scripts/jquery.pagination.js")
                                                                  )

                                                            .AddGroup("ListLocal",
                                                                        group => group.Add("~/Scripts/Utility.js")
                                                                                      .Add("~/Scripts/Search.js")
                                                                                      .Add("~/Scripts/List.js")
                                                                  )
                                        )
                                .Render(); %>

to configure each group setting you can use:

group => group.Add("~/Scripts/jquery-1.3.2.js")
              .Add("~/Scripts/jquery-ui-1.7.2.custom.js")
              .Version("2.1)
              .Compress(true)
              .CacheDurationInDays(365)
              .Combined(true)

you can also use a CDN instead of loading the each group, it becomes really handy when your application becomes popular, to set the CDN you can use:

group => group.UseContentDeliveryNetwork(true)
              .ContentDeliveryNetworkPath("http//mycdn.com/myScriptGroup.js")

If you do not want to specify the same setting for each group again and again (DRY) you can set the default settings in the application start (global.asax) like the following:

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

    WebAssetDefaultSettings.CacheDurationInDays = 365;
    WebAssetDefaultSettings.Combined = true;
    WebAssetDefaultSettings.Compress = true;
    WebAssetDefaultSettings.Version = "2.1";
}

When you run the application and open the Firebug, you will find that each group is merged/compressed/cached like the following:

We have included some default behavior (AKA convention over configuration) backed into the script management components, for example when you are running the application in development mode (debug="true" in web.config) it will include the .debug.js and in release (debug="false") .min.js files no matter what filename you have mentioned in the ScriptRegistrar. If the file does not exist (.min.js/.debug.js) it will automatically fallback to the original value. When developing these components we take the YSlow rules very seriously, for example, when you use the ScriptRegistrar, it will render the script tags at bottom of the page, no matter how many ScriptRegistrar placed in the Master/Content/User Controls. Other than script files, you can also mention your startup and cleanup javascript statements in the ScriptRegistrar. For example, if you have the following:

In Master page:

<% Html.jQuery().ScriptRegistrar().Scripts(script => script.AddGroup( "jqueryBase",
                                                                        group => group.Add("~/Scripts/jquery-1.3.2.js")
                                                                                      .Add("~/Scripts/jquery-ui-1.7.2.custom.js")
                                                                      )
                                            )
                                    .OnPageLoad(() =>
                                                {%>
                                                    test1.init();
                                                <%}
                                               )
                                    .OnPageUnload(() =>
                                                  {%>
                                                      test1.dispose();
                                                  <%}
                                                 )
                                .Render(); %>

and in Content Page:

<% Html.jQuery().ScriptRegistrar().OnPageLoad(() =>
                                                {%>
                                                    test2.init();
                                                <%}
                                               )
                                    .OnPageUnload(() =>
                                                  {%>
                                                      test2.dispose();
                                                  <%}
                                                 ); %>

and in User Control:

<% Html.jQuery().ScriptRegistrar().OnPageLoad(() =>
                                                {%>
                                                    test3.init();
                                                <%}
                                               )
                                    .OnPageUnload(() =>
                                                  {%>
                                                      test3.dispose();
                                                  <%}
                                                 ); %>

When the page renders, it will write the following:

<script type="text/javascript" src="http://weblogs.asp.net/asset.axd?id=eyJjdCI6ImJuIjoic2hCcnVzaFhtbC5qcyJ9XX1dfQ%3d%3d"></script>
<script type="text/javascript"> 
//<![CDATA[
jQuery(document).ready(function(){
test1.init();
test2.init();
test3.init();
});
jQuery(window).unload(function(){
test3.dispose();
test2.dispose();
test1.dispose();
});
//]]>
</script>
</body>
</html>

There should be a little difference in the Content and User Control code. There will no Render() for those two. Only the Master will have the Render() method.

And it is View Engine independent, we have already tested it in Webforms, Spark and NHaml.

What do you think? What features it is currently missing? Comments and suggestions are really appreciated.

ASP.NET MVC UI Components (Continued)

kazimanzurrashid — Thu, 28 May 2009 15:44:51 GMT

In my last post, two important issues are raised

The justification of having server side components for jQuery UI.
The style of syntax.

The intension of my last post was to get the feedback of the type of syntax the ASP.NET MVC developer prefers, so I did not mention anything on the server side side integration, this might be the reason why few people were unable to find the benefits of this server side support. In this post, I will try to show few simple examples of the server side integration, lets say that you are creating a Task submit form, you can use the Slider as completed percent field instead of regular input field, like the following:

View:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Task>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Slider Value Form Submit Example
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <% using(Html.BeginForm()){%>
        <fieldset>
            <legend>Submit Task</legend>
            <span style="color:Blue;font-weight:bold">
                <%= ViewData.Get<string>("successMessage") %>
            </span>
            <%= Html.ValidationSummary("Please correct the following errors:") %>
            <div>
                <label for="name">Name:</label>
            </div>
            <div style="margin-top:5px">
                <%= Html.TextBox("task.Name", null, new { style = "width:200px" })%>
            </div>
            <div style="margin-top:5px">
                <%= Html.ValidationMessage("task.Name")%>
            </div>
            <div style="margin-top:10px">
                Completed: <span id="completedPercent" style="color:Black"></span>%
            </div>
            <div style="margin-top:5px;width:200px">
                <% Html.jQuery().Slider()
                                .Name("task.Completed")
                                .UpdateElements("#completedPercent")
                                .Render(); %>
            </div>
            <div style="margin-top:5px">
                <%= Html.ValidationMessage("task.Completed")%>
            </div>
            <div style="margin-top:10px">
                <input type="submit" value="Submit"/>
            </div>
        </fieldset>
    <% }%>
</asp:Content>

Controller:

[AcceptVerbs(HttpVerbs.Get)]
public ActionResult FormSubmitWithValue()
{
    return View(new Task());
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult FormSubmitWithValue([Bind]Task task)
{
    if (string.IsNullOrEmpty(task.Name))
    {
        ModelState.AddModelError("task.Name", "Name cannot be blank.");
    }

    if (task.Completed <= 0)
    {
        ModelState.AddModelError("task.Completed", "Invalid task complete percent.");
    }

    if (ModelState.IsValid)
    {
        //Save here;
        ViewData.Set("successMessage", "Task saved successfully.");
    }

    return View(task);
}

[Live Version]

Check that (line 26- 29 in the above View) you are using the same kind of naming as you do in strongly typed view for regular input fields, you can use the slider for non-strongly typed view too.

In case of Slider is ranged, we can use the following:

View:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Slider Values Form Submit Example
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <% using(Html.BeginForm()){%>
        <fieldset>
            <legend>Submit Department</legend>
            <span style="color:Blue;font-weight:bold">
                <%= ViewData.Get<string>("successMessage") %>
            </span>
            <%= Html.ValidationSummary("Please correct the following errors:") %>
            <div>
                <label for="name">Name:</label>
            </div>
            <div style="margin-top:5px">
                <%= Html.TextBox("name", null, new { style = "width:200px" })%>
            </div>
            <div style="margin-top:5px">
                <%= Html.ValidationMessage("name") %>
            </div>
            <div style="margin-top:10px">
                Salary: $<span id="rangeFrom" style="color:Black"></span> - $<span id="rangeTo" style="color:Black"></span>
            </div>
            <div style="margin-top:5px;width:600px">
                <% Html.jQuery().Slider()
                                .Name("salary")
                                .Range(jQuerySliderRange.True)
                                .Values(1000, 2500)  //Initial value
                                .UpdateElements("#rangeFrom", "#rangeTo")
                                .Minimum(1000)
                                .Maximum(10000)
                                .Steps(500)
                                .Render(); %>
            </div>
            <div style="margin-top:5px">
                <%= Html.ValidationMessage("salary")%>
            </div>
            <div style="margin-top:10px">
                <input type="submit" value="Submit"/>
            </div>
        </fieldset>
    <% }%>
</asp:Content>

Controller:

[AcceptVerbs(HttpVerbs.Get)]
public ActionResult FormSubmitWithValues()
{
    return View();
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult FormSubmitWithValues(string name, IList<int> salary)
{
    if (string.IsNullOrEmpty(name))
    {
        ModelState.AddModelError("name", "Name cannot be blank.");
    }

    if (salary.Count != 2)
    {
        ModelState.AddModelError("salary", "Invalid salary range.");
    }

    if (salary.Count == 2)
    {
        if (salary[0] <= 1000)
        {
            ModelState.AddModelError("salary", "Salary minimum range should be greater than 1000.");
        }

        if (salary[1] <= 2500)
        {
            ModelState.AddModelError("salary", "Salary maximum range should be greater than 2500.");
        }
    }

    if (ModelState.IsValid)
    {
        //Save here;
        ViewData.Set("successMessage", "Department saved successfully.");
    }

    return View();
}

[Live Version]

Since the slider is a range slider, it will have an array of values, that is why the controllers accepts IList<int> for the slider. This will also work for strongly typed view.

You can also use the ProgressBar to auto retrieve the value directly from ViewData, for example,

View:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    ProgressBar Auto Retrieve Value Example
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <% Html.jQuery().ProgressBar()
                    .Name("myProgressBar")
                    .Render(); %>
</asp:Content>

Controller:

public ActionResult AutoRetrieve()
{
    ViewData["myProgressBar"] = 40;

    return View();
}

[Live Version]

As mentioned in the past that the goal of this component is to add some RAD support for the ASP.NET MVC Developers. For example, in the original jQuery UI both Slider and ProgressBar does not have any built-in support to show the value(s) in an associated html element(s), but it does have this support to attach any html elements to show the numeric value(s), check the UpdateElements method in the above (works on jQuery Selector), behind the scene it generates the necessary javascript codes to hook the events and update the elements, the same is true for the above slider form submit examples, it generates the required hidden input(s) to support form submit. It will not discourage you from writing javascript codes, instead it automates some common repetitive tasks. The next thing of my previous blog post was the benefits of server side generating the necessary html and javascript codes even when there is no integration of server side like the above slider or progressbar, to demonstrate it, I will first create a dynamic jQuery UI tab with raw html and javascripts, lets assume the tab items are disabled and selected based upon some condition.

Raw Html and JavaScript:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IList<DynamicTabContent>>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Tab Dynamic Item Example
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <% var disabledIndexes = new List<string>(); %>
    <% var selectedIndex = 0; %>
    <div id="tabs">
        <ul>
            <% for (var i = 0; i < Model.Count; i++) {%>
                <li><a href="#section-<%= i %>"><%= Html.Encode(Model[i].Header)%></a></li>
            <% }%>
        </ul>
        <% for (var i = 0; i < Model.Count; i++) {%>
            <% var dynamicContent = Model[i]; %>
            <div id="section-<%= i %>">
                <p><%= Html.Encode(dynamicContent.Content) %></p>
            </div>
            <% if (dynamicContent.IsDisabled)
               {
                   disabledIndexes.Add(i.ToString());
               }
               //The last selected will win
               if (dynamicContent.IsSelected && (i > selectedIndex))
               {
                   selectedIndex = i;
               }
            %>
        <% }%>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#tabs').tabs({
                                selected : <%= selectedIndex %>,
                                disabled : [<%= string.Join(", ", disabledIndexes.ToArray()) %>]
                            });
        });
    </script>
</asp:Content>

In the above, we are first iterating the Model to generate the tab headers, next we are again iterating it to generate the content panes and this time we are also populating the disabled index list and selecting the selected index. At last, we are dumping the selected index and converting the disabled indexes to a comma delimited string to create the tab in javascript.

Now lets see how this can simplify the above situation, we can do the exact same thing with the following codes.

Simple Fluent:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IList<DynamicTabContent>>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Tab Dynamic Item Example
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <% Html.jQuery().Tab().Name("tabs")
                          .Items(item =>
                                         {
                                             for(var i = 0; i < Model.Count; i++)
                                             {
                                                 var dynamicContent = Model[i];

                                                 item.Create()
                                                     .HeaderText(dynamicContent.Header)
                                                     .Content(() =>
                                                                      {%>
                                                                        <p><%= Html.Encode(dynamicContent.Content) %></p>
                                                                      <%}
                                                             )
                                                     .Selected(dynamicContent.IsSelected)
                                                     .Disabled(dynamicContent.IsDisabled);
                                             }
                                         }
                                )
                          .Render(); %>
</asp:Content>

[Live Version]

As you can see it is much more simpler and concise and with the above, we do not have to iterate the model again and again, no need to maintain the selected index and disabled index list, the component takes these responsibility and generates the Tab. I hope this clarifies the issue.

The second issue is the style of syntax, first, let me post the result of my previous Poll (total 48 votes):

Regular Methods (9 votes, 19%)
Simple Fluent (14 votes, 29%)
Progressive Fluent(25 votes, 52%)

Though the progressive has more votes, but I think once you are familiar with the syntax, the verboseness of the progressive fluent will start to irritate you and this is the reason why I have changed it to simple fluent from progressive fluent. You can download the latest version from the bottom of the post. Another interesting syntax proposed my Chad Myer. The difference between mine with this is that it first creates the component, but instead of returning the component it provides an Action to configure the component. Let us do a side by side comparison of this syntax with the simple fluent, here we will see the basic tab:

Factory + Action Syntax:

<% Html.jQuery<jQueryTab>(tab =>
                                       {
                                           tab.Name = "myTab";
                                           tab.Items(items =>
                                                             {
                                                                 items.Create(item =>
                                                                                        {
                                                                                            item.HeaderText = "Nunc tincidunt";
                                                                                            item.Content = () =>
                                                                                                                {%>
                                                                                                                     <p>
                                                                                                                         Proin elit arcu, rutrum commodo, vehicula tempus,
                                                                                                                         commodo a, risus. Curabitur nec arcu. Donec
                                                                                                                         sollicitudin mi sit amet mauris. Nam elementum
                                                                                                                         quam ullamcorper ante. Etiam aliquet massa et
                                                                                                                         lorem. Mauris dapibus lacus auctor risus. Aenean
                                                                                                                         tempor ullamcorper leo. Vivamus sed magna quis
                                                                                                                         ligula eleifend adipiscing. Duis orci. Aliquam
                                                                                                                         sodales tortor vitae ipsum. Aliquam nulla. Duis
                                                                                                                         aliquam molestie erat. Ut et mauris vel pede
                                                                                                                         varius sollicitudin. Sed ut dolor nec orci
                                                                                                                         tincidunt interdum. Phasellus ipsum. Nunc
                                                                                                                         tristique tempus lectus.
                                                                                                                    </p>
                                                                                                                 <%};
                                                                                        }
                                                                               );

                                                                 items.Create(item =>
                                                                                        {
                                                                                            item.HeaderText = "Proin dolor";
                                                                                            item.Content = () =>
                                                                                                                {%>
                                                                                                                     <p>
                                                                                                                        Morbi tincidunt, dui sit amet facilisis feugiat,
                                                                                                                        odio metus gravida ante, ut pharetra massa metus
                                                                                                                        id nunc. Duis scelerisque molestie turpis. Sed
                                                                                                                        fringilla, massa eget luctus malesuada, metus eros
                                                                                                                        molestie lectus, ut tempus eros massa ut dolor.
                                                                                                                        Aenean aliquet fringilla sem. Suspendisse sed
                                                                                                                        ligula in ligula suscipit aliquam. Praesent in
                                                                                                                        eros vestibulum mi adipiscing adipiscing. Morbi
                                                                                                                        facilisis. Curabitur ornare consequat nunc. Aenean
                                                                                                                        vel metus. Ut posuere viverra nulla. Aliquam erat
                                                                                                                        volutpat. Pellentesque convallis. Maecenas feugiat,
                                                                                                                        tellus pellentesque pretium posuere, felis lorem
                                                                                                                        euismod felis, eu ornare leo nisi vel felis.
                                                                                                                        Mauris consectetur tortor et purus.
                                                                                                                    </p>
                                                                                                                 <%};
                                                                                        }
                                                                               );

                                                                 items.Create(item =>
                                                                                        {
                                                                                            item.HeaderText = "Aenean lacinia";
                                                                                            item.Content = () =>
                                                                                                                {%>
                                                                                                                    <p>
                                                                                                                        Mauris eleifend est et turpis. Duis id erat.
                                                                                                                        Suspendisse potenti. Aliquam vulputate, pede vel
                                                                                                                        vehicula accumsan, mi neque rutrum erat, eu congue
                                                                                                                        orci lorem eget lorem. Vestibulum non ante. Class
                                                                                                                        aptent taciti sociosqu ad litora torquent per
                                                                                                                        conubia nostra, per inceptos himenaeos. Fusce
                                                                                                                        sodales. Quisque eu urna vel enim commodo
                                                                                                                        pellentesque. Praesent eu risus hendrerit ligula
                                                                                                                        tempus pretium. Curabitur lorem enim, pretium nec,
                                                                                                                        feugiat nec, luctus a, lacus.
                                                                                                                    </p>
                                                                                                                    <p>
                                                                                                                        Duis cursus. Maecenas ligula eros, blandit nec,
                                                                                                                        pharetra at, semper at, magna. Nullam ac lacus.
                                                                                                                        Nulla facilisi. Praesent viverra justo vitae neque.
                                                                                                                        Praesent blandit adipiscing velit. Suspendisse
                                                                                                                        potenti. Donec mattis, pede vel pharetra blandit,
                                                                                                                        magna ligula faucibus eros, id euismod lacus dolor
                                                                                                                        eget odio. Nam scelerisque. Donec non libero sed
                                                                                                                        nulla mattis commodo. Ut sagittis. Donec nisi
                                                                                                                        lectus, feugiat porttitor, tempor ac, tempor vitae,
                                                                                                                        pede. Aenean vehicula velit eu tellus interdum
                                                                                                                        rutrum. Maecenas commodo. Pellentesque nec elit.
                                                                                                                        Fusce in lacus. Vivamus a libero vitae lectus
                                                                                                                        hendrerit hendrerit.
                                                                                                                    </p>
                                                                                                                 <%};
                                                                                        }
                                                                               );
                                                             }
                                                    );
                                       }
                            ); %>

Simple Fluent:

<% Html.jQuery().Tab()
.Name("myTab")
.Items(items =>
{
items.Create()
.HeaderText("Nunc tincidunt")
.Content(() =>
{%>

Proin elit arcu, rutrum commodo, vehicula tempus,
commodo a, risus. Curabitur nec arcu. Donec
sollicitudin mi sit amet mauris. Nam elementum
quam ullamcorper ante. Etiam aliquet massa et
lorem. Mauris dapibus lacus auctor risus. Aenean
tempor ullamcorper leo. Vivamus sed magna quis
ligula eleifend adipiscing. Duis orci. Aliquam
sodales tortor vitae ipsum. Aliquam nulla. Duis
aliquam molestie erat. Ut et mauris vel pede
varius sollicitudin. Sed ut dolor nec orci
tincidunt interdum. Phasellus ipsum. Nunc
tristique tempus lectus.

<%}
);

items.Create()
.HeaderText("Proin dolor")
.Content(() =>
{%>

Morbi tincidunt, dui sit amet facilisis feugiat,
odio metus gravida ante, ut pharetra massa metus
id nunc. Duis scelerisque molestie turpis. Sed
fringilla, massa eget luctus malesuada, metus eros
molestie lectus, ut tempus eros massa ut dolor.
Aenean aliquet fringilla sem. Suspendisse sed
ligula in ligula suscipit aliquam. Praesent in
eros vestibulum mi adipiscing adipiscing. Morbi
facilisis. Curabitur ornare consequat nunc. Aenean
vel metus. Ut posuere viverra nulla. Aliquam erat
volutpat. Pellentesque convallis. Maecenas feugiat,
tellus pellentesque pretium posuere, felis lorem
euismod felis, eu ornare leo nisi vel felis.
Mauris consectetur tortor et purus.

<%}
);

items.Create()
.HeaderText("Aenean lacinia")
.Content(() =>
{%>

Mauris eleifend est et turpis. Duis id erat.
Suspendisse potenti. Aliquam vulputate, pede vel
vehicula accumsan, mi neque rutrum erat, eu congue
orci lorem eget lorem. Vestibulum non ante. Class
aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Fusce
sodales. Quisque eu urna vel enim commodo
pellentesque. Praesent eu risus hendrerit ligula
tempus pretium. Curabitur lorem enim, pretium nec,
feugiat nec, luctus a, lacus.


Duis cursus. Maecenas ligula eros, blandit nec,
pharetra at, semper at, magna. Nullam ac lacus.
Nulla facilisi. Praesent viverra justo vitae neque.
Praesent blandit adipiscing velit. Suspendisse
potenti. Donec mattis, pede vel pharetra blandit,
magna ligula faucibus eros, id euismod lacus dolor
eget odio. Nam scelerisque. Donec non libero sed
nulla mattis commodo. Ut sagittis. Donec nisi
lectus, feugiat porttitor, tempor ac, tempor vitae,
pede. Aenean vehicula velit eu tellus interdum
rutrum. Maecenas commodo. Pellentesque nec elit.
Fusce in lacus. Vivamus a libero vitae lectus
hendrerit hendrerit.

<%}
);
}
)
.Render(); %>

To me the simple fluent is much simpler than Chad’s Factory + Action. But I think, it completely depends upon the personal preference. If you think, Factory + Action is much preferable than the simple fluent or even you want to revert back to the initial progressive fluent, do let me know I will change it based upon your feedback.

[Live Version]

[Download Sample]