Ori Calvo : פיתוח

Cleaning after Knockout

oric — Tue, 29 Jan 2013 06:33:00 GMT

Using KnockoutJS is really fun. You set some data-bind attributes on your HTML and KnockoutJS does the magic of binding it to a JavaScript object (A.K.A, view model)

An important fact that most of us are missing is that Knockout holds some internal data structure to manage its magic. Basically, every time you call ko.applyBindings a new management record is added to KO internal representation.

This means that your view model is being held by some global data managed by KO. So in case you create and destroy HTML dynamically using JavaScript the view model is not cleaned up by the browser garbage collector which eventually harts your application performance and stability.

Consider the following scenario,

An HTML template was downloaded from the server and is held inside the browser memory (as a normal string)
You use jQuery to clone the template and create an HTML element out of it
You use KO to bind the newly created HTML element to a JavaScript object (view model)
You destroy the HTML element when it is not needed any more

I hope you agree that this kind of manipulation is quite common for single page application

The problem, as I mentioned before is that destroying the HTML element is not enough. As result of using KO applyBindings mechanism KO is holding some global data which indirectly contains a reference to your view model.

To see this issue in action, open the attached sample and perform the following

Take a heap snapshot using Chrome developer tools
Click Create, Bind and then Destroy (do not click Unbind)
Take another snapshot
Ask Chrome to perform comparison of the two snapshots

You will then noticed that an object of type ViewModel was created but was not collected by the garbage collector

Now, run the same scenario but this time click Create, Bind, Unbind and then Destroy

As you can see, this time a ViewModel object was created and destroyed by the garbage collector.

So, what did the “Unbind” button do? Short answer: ko.cleanNode

To summarize, you should consider using ko.cleanNode before destroying an HTML element. Else, you end up with memory leaks !

Are you using Cassette?

oric — Wed, 21 Mar 2012 01:42:00 GMT

ASP.NET 4.5 Developer Preview introduces a new capability to manage scripts bundling and minification. You can read about it here.

However, the current implementation lacks a very important aspect of scripts management which is managing the dependencies. As you know, when referencing a single script file you also need to reference all its dependencies.

Wouldn't it be nice if someone automatically injects the right dependencies? Enter Cassette world ...

Cassette is an HttpModule which seats inside ASP.NET pipeline and monitors requests for scripts and CSS. Cassette can automatically bundle and minify your code and even more interesting it can parse each JavaScript/CSS file and understand the list of dependencies. When analysis is completed Cassette renders a flat list of references with the correct order. Cool, right?

In the following section I would like to describe the way you can start using Cassette. Of course, you can skip this introduction and get the formal Cassette documentation from here.

Let's assume we are dealing with a very basic application. The default view Home/Index.cshtml displays a simple button and when the user clicks it a jQuery UI dialog appears. Starter code can be downloaded from here

To accomplish this basic application I added some script references were needed. Typically, this means adding a script references inside the layout file (for jQuery and jQuery UI) and one more inside the Home/Index.cshtml view.

The layout file looks like this:

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
 
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.js")" type="text/javascript"></script>
</head>

And Home/Index.cshtml view:

<script src="@Url.Content("~/Scripts/App/Home/Index.js")" type="text/javascript"></script>
 
<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
 
    <input type="button" id="buttonSayHello" value="Say Hello" />
</p>

To summarize, we have a view which uses a script file which uses jQuery and jQuery UI libraries.

Now, lets see how Cassette can help us managing all these dependencies.

Open NuGet Manager UI and install a package named "Cassette.Web"

Now we need to fix scripts, CSS and views.

Open ~/Views/Shared/_Layout.cshtml and fix it as below:

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
 
    @Bundles.RenderStylesheets()
    @Bundles.RenderScripts()
 
    @{
        Bundles.Reference("~/Content/themes/base/jquery.ui.all.css");
        Bundles.Reference("~/Content/Site.css");
    }
</head>

Fix ~/Views/Home/Index.cshtml:

@{
    Bundles.Reference("~/Scripts/App/Home/Index.js");
}
 
<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
 
    <input type="button" id="buttonSayHello" value="Say Hello" />
</p>

Fix ~/Scripts/App/Home/Index.js to hold a VS doc reference to jQuery UI script. Cassette understands this comment as a script dependency:

/// <reference path="../../Libs/jquery-ui-1.8.11.js" />
 
(function () {
    $(function () {
        $("#buttonSayHello").click(function () {
            var dlg = $("<div>Hello World</div>");
            dlg.dialog({
                modal: true
            });
        });
    });
})();

Please note that we are referencing the non minified version of jQuery UI. The reason is that Cassette supports its own built-in minification.

Fix jQuery UI script to reference jQuery Core script:

/// <reference path="jquery-1.5.1.js" />

Last thing, we need to fix jQuery CSS files. Currently, those CSS are using the @import keyword. To utilize Cassette support for CSS it is recommended that you switch those commands to Cassette syntax. For example, add the following lines to the beginning of jquery.ui.all.css file and remove the @import lines:

/*
@reference "jquery.ui.base.css";
@reference "jquery.ui.theme.css";
*/

You should fix jquery.ui.base.css in the same way:

/*
@reference "jquery.ui.core.css";
@reference "jquery.ui.resizable.css";
@reference "jquery.ui.selectable.css"
@reference "jquery.ui.accordion.css";
@reference "jquery.ui.autocomplete.css";
@reference "jquery.ui.button.css";
@reference "jquery.ui.dialog.css";
@reference "jquery.ui.slider.css";
@reference "jquery.ui.tabs.css";
@reference "jquery.ui.datepicker.css";
@reference "jquery.ui.progressbar.css";
*/

That’s it !!! After fixing views, scripts and CSSs you are ready to execute the application and monitor Cassette magic.

Look at the HTML source and notice how Cassette injects all the required scripts and CSS references. In addition, Cassette uses a hash value of the script content to guard against browser caching. Cool.

<link href="/_cassette/asset/Content/themes/base/jquery.ui.core.css?9d38d2bbe70eb75c4119ab72510a117cfb49b913" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.resizable.css?4860357b34ca9d209a61784a0839e55a9ac6372c" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.selectable.css?e381398c50e0566a49408576e0a87df9217f16d8" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.accordion.css?73fb7966f0b3a2bf686deb7c8dec0edd42894eb7" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.autocomplete.css?10ac974fd724c7dd45359c494c8e63d4fac5c226" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.button.css?26b11c4e2b69746007bb9e9d819b54f3368597b0" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.dialog.css?a4c49ffd917f8f26b225abfe26bef4c7ea334cbd" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.slider.css?6880af0ef985e536612b67e7b51c41ae074dd303" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.tabs.css?1bb52f3a3d42c8337947b6c43a1cdbb365364841" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.datepicker.css?b40203fd3aaf03fecdb5de53ee73e0d174291909" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.progressbar.css?8e462a4c8734825474b5fd073965319af166abc8" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.base.css?5ece017066850b7e1ac6cfeae595740e324bc18d" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.theme.css?42d2c7901f9c0bd5d0a5b3a68191f82837f8658f" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.all.css?1ce06a5255860062cfdb27f241c2ed1c70a64a81" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/Site.css?46fe61a9c663b0bb427604fb6bd30608930274ac" type="text/css" rel="stylesheet"/>
    
<script src="/_cassette/asset/Scripts/Libs/jquery-1.5.1.js?1e9619c4943d9fc8dbb73191d4179b6dd75ab25a" type="text/javascript"></script>
<script src="/_cassette/asset/Scripts/Libs/jquery-ui-1.8.11.js?be8e64d1d5e7005b31d42f79c3de3e7d08f2bc47" type="text/javascript"></script>
<script src="/_cassette/asset/Scripts/App/Home/Index.js?00b16e534e25dfa101f194748034c8b0fbda2d01" type="text/javascript"></script>

Please note how Cassette resolves the dependencies between Index.js and jQuery scripts.

We can do even more with Cassette. Open ~/CassetteConfiguration.cs and change it:

public class CassetteConfiguration : ICassetteConfiguration
{
    public void Configure(BundleCollection bundles, CassetteSettings settings)
    {
        bundles.Add<ScriptBundle>("~/Scripts/App");
        bundles.Add<ScriptBundle>("~/Scripts/Libs");
 
        bundles.Add<StylesheetBundle>("~/Content/Site.css");
        bundles.Add<StylesheetBundle>("~/Content/themes/base");
    }
}

Execute application and look at the HTML source:

<link href="/_cassette/asset/Content/themes/base/jquery.ui.accordion.css?73fb7966f0b3a2bf686deb7c8dec0edd42894eb7" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.autocomplete.css?10ac974fd724c7dd45359c494c8e63d4fac5c226" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.button.css?26b11c4e2b69746007bb9e9d819b54f3368597b0" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.core.css?9d38d2bbe70eb75c4119ab72510a117cfb49b913" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.datepicker.css?b40203fd3aaf03fecdb5de53ee73e0d174291909" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.dialog.css?a4c49ffd917f8f26b225abfe26bef4c7ea334cbd" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.progressbar.css?8e462a4c8734825474b5fd073965319af166abc8" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.resizable.css?4860357b34ca9d209a61784a0839e55a9ac6372c" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.selectable.css?e381398c50e0566a49408576e0a87df9217f16d8" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.slider.css?6880af0ef985e536612b67e7b51c41ae074dd303" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.tabs.css?1bb52f3a3d42c8337947b6c43a1cdbb365364841" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.base.css?5ece017066850b7e1ac6cfeae595740e324bc18d" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.theme.css?42d2c7901f9c0bd5d0a5b3a68191f82837f8658f" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/themes/base/jquery.ui.all.css?1ce06a5255860062cfdb27f241c2ed1c70a64a81" type="text/css" rel="stylesheet"/>
<link href="/_cassette/asset/Content/Site.css?46fe61a9c663b0bb427604fb6bd30608930274ac" type="text/css" rel="stylesheet"/>
    
<script src="/_cassette/asset/Scripts/Libs/jquery-1.5.1.js?1e9619c4943d9fc8dbb73191d4179b6dd75ab25a" type="text/javascript"></script>
<script src="/_cassette/asset/Scripts/Libs/jquery-ui-1.8.11.js?be8e64d1d5e7005b31d42f79c3de3e7d08f2bc47" type="text/javascript"></script>
<script src="/_cassette/asset/Scripts/Libs/jquery.unobtrusive-ajax.js?ab8e4edddbe5721804e6eeb588684d7a31c10c25" type="text/javascript"></script>
<script src="/_cassette/asset/Scripts/Libs/jquery.validate.js?378f121fe0d02e2d59c64094e47e107e453f56a9" type="text/javascript"></script>
<script src="/_cassette/asset/Scripts/Libs/jquery.validate.unobtrusive.js?57492833508444cc10554b9dd6240c313334641c" type="text/javascript"></script>
<script src="/_cassette/asset/Scripts/Libs/MicrosoftAjax.debug.js?e68b3852c1d342f7515ae93f743fd925b84abf6a" type="text/javascript"></script>
<script src="/_cassette/asset/Scripts/Libs/MicrosoftMvcAjax.debug.js?56e5c96216e716945637882bde9c2503209d5948" type="text/javascript"></script>
<script src="/_cassette/asset/Scripts/Libs/MicrosoftMvcValidation.debug.js?1dc04a87db830ff07c2e962aa505b575853ac282" type="text/javascript"></script>
<script src="/_cassette/asset/Scripts/Libs/modernizr-1.7.js?aa20a6d214a44351de222630fa5c2f6bd5850867" type="text/javascript"></script>
<script src="/_cassette/asset/Scripts/App/Home/Index.js?00b16e534e25dfa101f194748034c8b0fbda2d01" type="text/javascript"></script>

As you can see, Cassette is including all files found under the specified directory. Why is that?

In our sample we defined a bundle for the ~/Scripts/App directory and also defined a reference for the jquery-ui-1.8.11.js script which is part of that bundle. Cassette rule is very simple regarding this case. When refering to a script found under a bundle Cassette ensures that the whole bundle is referenced. This means that all scripts/CSSs under the bundle are injected.

This is reasonable. Bundling means “get me all files” and Cassette does that for your. When switching to production you will see only one reference to the bundle itself.

Now, lets switch to production. Open ~/Web.config and change debug setting to false:

<compilation debug="false" targetFramework="4.0">

Execute application and look at the HTML source. Cassette enforces the bundling configuration and of course minifies the content:

<link href="/_cassette/stylesheetbundle/Content/themes/base_ba0e60ffa8a7b377d7725e11bc30a12ccac64c98" type="text/css" rel="stylesheet"/>
<link href="/_cassette/stylesheetbundle/Content/Site.css_46fe61a9c663b0bb427604fb6bd30608930274ac" type="text/css" rel="stylesheet"/>
 
<script src="/_cassette/scriptbundle/Scripts/Libs_a452bb8b8567293fda9273cd0b929d0927be6cd1" type="text/javascript"></script>
<script src="/_cassette/scriptbundle/Scripts/App_00b16e534e25dfa101f194748034c8b0fbda2d01" type="text/javascript"></script>

When developing the web site you don’t want minification and bundling. This is exactly what Cassette does when respecting the “debug” setting inside web.config

Full fixed sample with Cassette configuration can be downloaded from here

I realy love Cassette. What do you think?

Implement an HTML table using DIVs

oric — Sat, 24 Dec 2011 15:40:00 GMT

This is quite an old topic but still when browsing through some popular forums I still encounter the following question: "How can I implement a table using DIVs and control the width of each column?"

Before digging into the implementation I would like to share my thoughts regarding the old TABLE vs. DIV war:
In the old days web developers used TABLE tag for displaying a tabular data and for controlling the layout of the page.
These days it seems as everyone hates TABLE and tries to use DIV instead for both tasks. I don't share the same feelings.
I use TABLE for tabular data display and DIV for general page layouting.

Still, as I mentioned before, many people ask regarding implementing a table using DIVs. So here is the magic. Full sample code can be found here

@using DivInsteadOfTable.Models;
 
@model User[]
 
@{
    ViewBag.Title = "Index";
}
 
<h2>Index</h2>
 
<div class="table">
    <div class="header">
        <div class="cell">
            ID
        </div>
        <div class="cell">
            Name
        </div>
        <div class="cell">
            E-Mail
        </div>
    </div>
 
    @foreach (User user in this.Model)
    {
        <div class="row">
            <div class="cell id">
                @user.ID
            </div>
 
            <div class="cell name">
                @user.Name
            </div>
 
            <div class="cell email">
                @user.EMail
            </div>
        </div>
    }
</div>

And CSS should be something like this:

div.table
{
    width: 35em;
}
 
div.header
{
    font-weight: bold;
    background-color: LightGray;
    clear: both;
    overflow: hidden;
}
 
div.row
{
    clear: both;
    overflow: hidden;
    padding-bottom: 1px;
    padding-top: 1px;
}
 
div.row:hover
{
    clear: both;
    background-color: LightBlue;
    border-width: 1px;
    border-color: Blue;
    border-style: solid;
}
 
div.cell
{
    float: left;
    width: 10em;
}

Execute the sample and you will get the following:

I am sure there are different ways to achieve the same functionality. What CSS are you using?

Exclude A Filter

oric — Fri, 28 Oct 2011 09:06:00 GMT

In my last ASP.NET MVC MSDN session I was asked a simple question: "How can we disable a filter for a specific action, assuming it is already defined at the class level?"

Of course, having this ability can really ease the maintenance of our application. Without this ability we need NOT to define the filter at the class level and then define at each action level.

Well, I did not have any simple question. However, I claimed that such an infrastructure can be easily developed using the excellent ASP.NET MVC extensibility support. Is that so? Let's try do it

Full sample code can be found here

ASP.NET MVC has a special provider named "FilterProvider" which is responsible for fetching all relevant filters from a specific controller and action.
We can define our own provider and register it instead of the default ones. Once we do this, we have a full control of the filters ASP.NET MVC is aware of and we can decide which filters to remove according to some criteria.

Suppose we have the following controller definition:

[Authorize]
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
 
    public ActionResult Admin()
    {
        return View();
    }
 
    public ActionResult RequiresAdmin2()
    {
        return View();
    }
 
    public ActionResult RequiresAdmin3()
    {
        return View();
    }
 
    public ActionResult RequiresAdmin4()
    {
        return View();
    }
 
    public ActionResult RequiresAdmin5()
    {
        return View();
    }
}

And we would like to make the "Index" action unsecured. In other words, we would like to hide the "Authorize" filter at the "Index" action level but still keep it at the class level.
It would be nice if the following is supported:

[Authorize]
public class HomeController : Controller
{
    [ExcludeFilter(typeof(AuthorizeAttribute))]
    public ActionResult Index()
    {
        return View();
    }
 
    public ActionResult Admin()
    {
        return View();
    }
 
    public ActionResult RequiresAdmin2()
    {
        return View();
    }
 
    public ActionResult RequiresAdmin3()
    {
        return View();
    }
 
    public ActionResult RequiresAdmin4()
    {
        return View();
    }
 
    public ActionResult RequiresAdmin5()
    {
        return View();
    }
}

To achieve that, we need to define a new Attribute named "ExcludeFilter":

public class ExcludeFilterAttribute : FilterAttribute
{
    private Type filterType;
 
    public ExcludeFilterAttribute(Type filterType)
    {
        this.filterType = filterType;
    }
 
    public Type FilterType
    {
        get
        {
            return this.filterType;
        }
    }
}

Now, let's define a new IFilterProvider which looks for ExcludeFilter attributes and filters out the relevant action filters:

public class ExcludeFilterProvider : IFilterProvider
{
    private FilterProviderCollection filterProviders;
 
    public ExcludeFilterProvider(IFilterProvider[] filters)
    {
        this.filterProviders = new FilterProviderCollection(filters);
    }
 
    public IEnumerable<Filter> GetFilters(ControllerContext controllerContext, ActionDescriptor actionDescriptor)
    {
        Filter[] filters = this.filterProviders.GetFilters(controllerContext, actionDescriptor).ToArray();
 
        IEnumerable<ExcludeFilterAttribute> excludeFilters = (from f in filters where f.Instance is ExcludeFilterAttribute select f.Instance as ExcludeFilterAttribute);
 
        List<Type> filterTypesToRemove = new List<Type>();
        foreach (ExcludeFilterAttribute excludeFilter in excludeFilters)
        {
            filterTypesToRemove.Add(excludeFilter.FilterType);
        }
 
        IEnumerable<Filter> res = (from filter in filters where !filterTypesToRemove.Contains(filter.Instance.GetType()) select filter);
        return res;
    }
}

In addition, we need to register our FilterProvider and remove the old ones:

protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();
 
    RegisterGlobalFilters(GlobalFilters.Filters);
    RegisterRoutes(RouteTable.Routes);
 
    IFilterProvider[] providers = FilterProviders.Providers.ToArray();
    FilterProviders.Providers.Clear();
    FilterProviders.Providers.Add(new ExcludeFilterProvider(providers));
}

That's it!!!

As you can see, it is quite simple to "twick" ASP.NET MVC to do the thing we need.

ASP.NET MVC 3 MSDN Session

oric — Wed, 28 Sep 2011 18:35:00 GMT

Two days ago I delivered another ASP.NET MVC 3 MSDN session.
As usual, we started with the basics to allow engineers not familiar with ASP.NET MVC to understand the major concepts behind it

During the second part of the session, I demonstrated several subjects that are considered more advanced such as, Custom Action Result, Custom Model Binder, Custom Metadata Provider and other Custom XXX
In addition, I had the chance to introduce some really nice tools such as Knapsack and ASP.NET Mini Profiler

All samples which were presented during the session can be found at my SkyDrive public folders

I really enjoyed delivering this session and hope that every one else enjoyed it too

Source Control with SVN

oric — Fri, 22 Apr 2011 17:50:00 GMT

Since 2005 I've been mostly working with Microsoft Team Foundation Server to manage my source code. Before that I had the chance to work with Microsoft Source Safe and even a bit with WinCVS (for self projects)

These days I am back again working on a self project and need to share my source code with two other developers. All roads led me to SVN.
I was quite surprised how easily an SVN server can be installed and manipulated from Windows Explorer. So I decided to share this info with you.

There are several implementations of SVN server you can use. I decided to use VisualSVN Server since it is free and offers optional Visual Studio integration (payment is required).
VisualSVN can be installed from here. The installation process is quite easy (Next next next ...)

After installing VisualSVN server you need to create a new repository and a new user. The management UI can be found under: Start | Programs | VisualSVN | VisualSVN Server Manager

Now it's time to configure an SVN client application.

Once again, there is more than one open source/free implementation that you can use. I chose TortoiseSVN. You can download it from here

Let your machine restart and you are ready to go.

Open VisualSVN server management UI and right click your repository then select "Copy URL to clipboard"

Open Windows Explorer and locate the directory which contains the source code you would like to add to the SVN repository. Right click the directory and select "TortoiseSVN | Import". Paste the copied URL into the first relevant text box.

Select "Accept permanently"

Type the name of the user and password you created before and press "OK".

You should note that the files were only copied and are not controller at the moment. To enjoy the power of SVN you need to checkout the repository to a different directory and start working from there.

Open Windows Explorer and locate the directory that you want to checkout the repository into it. Right click it and select "SVN Checkout ..."

Select "OK". Repository content is copied to the selected directory and you can start edit your files inside Visual Studio. The copied files are not read-only so you don't need to issue any command inside Visual Studio.

When finish editing your code you can commit the changes by opening Windows Explorer, locate the checked-out directory, right click it and select "TortoiseSVN | Commit"

As you probably noticed there are many other commands offered by TortoiseSVN. Enjoy ...

Implementing Composite Pattern with Entity Framework Code First - Part 2

oric — Thu, 17 Mar 2011 22:42:00 GMT

In my previous blog post I described the way you can implement Composite pattern using Entity Framework Code First.
The sample uses EFCodeFirst CTP 5 which suffers from a minor bug related to the composite relationship.

Microsoft just released EF 4.1 RC which fixes the issue. Now, you can implement your composite pattern in a clean fashion.

You can find the fixed composite pattern sample here.

Using jQuery Grid with ASP.NET MVC

oric — Fri, 11 Mar 2011 10:14:00 GMT

Many newcomers to ASP.NET MVC are asking about a replacement for the classical ASP.NET WebForms GridView server control.

As always (almost) there are 3 possible solutions:

Do it your self - Write an HTML helper that renders some TABLE, TR and TD elements. For sure this is the hardest solution but it gives you absolute control over grid behavior and there is no need to learn new API because you are the owner of every bit and byte.
Commercial implementation - You can find many grid commercial implementations which are specialized for the ASP.NET MVC framework. Telerik has nice demos that you can play with before making a decision.
Open source solution - Many client side frameworks offers a general purpose grid implementation. You can take a look at ExtJS capabilities or Dojo.

Not surprising jQuery too has a nice "griding" capabilities. The implementation is offered through a plugin named jQuery Grid which can be downloaded here.
The plugin is a pure JavaScript solution and there is no integration with ASP.NET MVC.

Phil Haack already posted a sample which shows how you can integrate jQuery Grid with ASP.NET MVC. However, the sample is focused around the internal implementation. In this blog post I would like to present a way to make jQuery Grid more MVC friendly. The purpose is to have a simple HTML helper which does all the hard work of coordinating client and server side needs and also to simplify the controller implementation.

Suppose we have the following model class:

public class Person
{
    public int ID { get; set; }
 
    [Required(ErrorMessage="Please specify a first name")]
    [Display(Name = "First Name")]
    public string FirstName { get; set; }
 
    [Required(ErrorMessage = "Please specify a last name")]
    [Display(Name = "Last Name")]
    public string LastName { get; set; }
}

And we would like to create a controller action which returns a view with a nice AJAX grid. The controller actions should look something like that:

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

public ActionResult GetPersons(GridRequestParams gridRequestParams)
{
    using (BookContext context = new BookContext())
    {
        return this.GridData(context.Persons, gridRequestParams);
    }
}

The first action returns a view and the second action is responsible for returnning the actual data that is displayed by the grid.
The view should construct a new grid using an HTML helper which allows us to work the same way as we do with plain HTML content (TextBox, CheckBox and others):

@{
    Html.Grid("gridPersons", Url.Action("GetPersons"))
        .Column("ID", "ID", 10, visible: false)
        .Column("FirstName", "First Name", 200)
        .Column("LastName", "Last Name", 200)
        .Style("persons")
        .PageSize(7)
        .DefaultSortColumn("LastName")
        .DefaultSortOrder(false)
        .Render();
}

Executing above code should yield the following browser output:

As you can see, generating the grid is quite easy and you get a full AJAX behavior for paging and sorting. If you are interested in seeing how you can implement those easy helpers then keep reading. Else, go to the end of this post and download the full sample.

In order to support this "lightness" code we need to work a bit hard and write some server and client side code.
Let's start with the required HTML helper named "Grid" which is responsible for collecting all grid general properties (like url, columns and sort order). The HTML helper then renders into the HTML response stream all the HTML and data that is required by the client side code.

Below is the code for "Render" method inside the new HTML helper. Please note how the method is deserializing some C# objects into XML string. The XML is embedded inside the HTML response. Later on, the client side code will use this XML to construct a jQuery Grid.

public void Render()
{
    Validate();
 
    //
    //  Convert grid information into xml descriptors
    //
    GridXmlDescription gridLayout = new GridXmlDescription()
    {
        url = this.url,
        pageSize = this.pageSize,
        sortColumn = this.defaultSortColumn,
        sortOrder = (this.defaultSortOrderAsc ? "asc" : "desc"),
    };
    foreach (ColumnBuilder column in this.columns)
    {
        GridColumnXmlDescription layoutColumn = new GridColumnXmlDescription() { 
                                            name = column.Name, 
                                            header = column.Header, 
                                            width = column.Width,
                                            visible = column.Visible};
        gridLayout.columns.Add(layoutColumn);
    }
 
    //
    //  Covert Xml descriptors to raw XML
    //
    string xml;
    using (StringWriter writer = new StringWriter())
    {
        GridXmlDescription.Serializer.Serialize(writer, gridLayout);
        xml = writer.GetStringBuilder().ToString();
    }
 
    //
    //  Build the HTML reuired by the grid
    //
    helper.ViewContext.Writer.Write("<div id=\"" + this.id + "\"");
    helper.ViewContext.Writer.Write(" data-isGrid=\"true\"");
    helper.ViewContext.Writer.Write(" class=\"" + this.style + "\"");
    helper.ViewContext.Writer.WriteLine(">");
    helper.ViewContext.Writer.WriteLine("<xml>");
    helper.ViewContext.Writer.WriteLine(xml);
    helper.ViewContext.Writer.WriteLine("</xml>");
    helper.ViewContext.Writer.WriteLine("</div>");
}

The generated HTML should be something like that:

<div id="gridPersons" data-isGrid="true" class="persons">
  <script type="text/xml" id="gridPersons_xml">
    <gridLayout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
      <url>/Home/GetPersons</url>
      <pageSize>7</pageSize>
      <sortColumn>LastName</sortColumn>
      <sortOrder>desc</sortOrder>
      <columns>
        <column name="ID" header="ID" width="10" visible="false" />
        <column name="FirstName" header="First Name" width="200" visible="true" />
        <column name="LastName" header="Last Name" width="200" visible="true" />
      </columns>
    </gridLayout>
  </script>
</div>

Please note how the XML information is embedded inside a script element of type "text/xml". The browser ignores this content and will not try to render it.

Next, we need to write down the client side code which looks for the embedded XML information and constructs the jQuery Grid widget:

jQuery(document).ready(function () {
 
    //
    //  Find all div elements which are actually a grid
    //
    var grids = jQuery("div[data-isGrid=\'true']");
 
    //
    //  Inintialize each grid
    //
    grids.each(function () {
        var grid = new Grid(jQuery(this));
    });
});

The code searches for all div element with attribute "data-isGrid=true". Each matched div is considered the parent element for the new grid. The JavaScript object "Grid" is responsible for completing the job:

function Grid(rootDiv) {
    var $this = this;
 
    //
    //  Prepare some usefull attributes
    //
    this.id = rootDiv.getAttr("id");
 
    //
    //  Extract the grid layout information from the HTML (as XML)
    //
    var gridDesc = jQuery(jQuery("#" + this.id + "_xml").html());
 
    //
    //  Extract required data from the embedded XML
    //
    var url = this.getXmlElement(gridDesc, "url");
    var pageSize = this.getXmlElement(gridDesc, "pageSize", 10);
    var sortColumn = this.getXmlElement(gridDesc, "sortColumn", null);
    var sortOrder = this.getXmlElement(gridDesc, "sortOrder", "desc");
 
    //
    //  Add a table elememt to the mainDiv (table element is required by the jQuery grid plugin)
    //
    var tableId = this.id + "_table";
    var table = jQuery("<table id='" + tableId + "' ></table>");
    rootDiv.append(table);
 
    //
    //  Add a pager element
    //
    var pagerId = this.id + "_pager";
    var pager = jQuery("<div id='" + pagerId + "' ></div>");
    rootDiv.append(pager);
 
    //
    //  Read the xml grid layout and build an array of columnsModel
    //
    var columnsHeaders = [];
    var columnsModel = [];
    gridDesc.getElement("columns column").each(function () {
        var column = jQuery(this);
 
        columnsHeaders.push(column.getAttr("header"));
 
        columnsModel.push({
            name: column.getAttr("name"),
            index: column.getAttr("name"),
            width: column.getAttr("width"),
            hidden: (column.getAttr("visible") == "false"),
            isData: true
        });
    });
 
    //
    //  Build the actual grid
    //
    var options = {
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            id: "ID"
        },
        datatype: "json",
        url: url,
        mtype: "POST",
        height: 250,
        colNames: columnsHeaders,
        colModel: columnsModel,
        multiselect: false,
        pager: pager,
        rowNum: pageSize,
        caption: ""
    };
 
    if (sortColumn != null) {
        options.sortname = sortColumn;
        options.sortorder = (sortOrder == "asc" ? "asc" : "desc");
    }
 
    table.jqGrid(options);
}

The code extracts the embedded XML information and constructs a jQuery Grid object using the plugin method named "jqGrid".
The most significant parameter that the jqGrid method recieves is the "url" parameter. This parameter should point to a server side action which returns a JSON data to be displayed in the grid. In our example the URL is set by the HTML helper to "/Home/GetPersons". This URL is handled by the controller's action GetPersons:

public ActionResult GetPersons(GridRequestParams gridRequestParams)
{
    using (BookContext context = new BookContext())
    {
        return this.GridData(context.Persons, gridRequestParams);
    }
}

As you can see the action returns a special action result named "GridData". This action result is responsible for converting the actual database query into a valid JSON result (that follows the right schema required by the jQuery Grid):

public class GridDataResult<T> : ActionResult
{
    private GridResponseParams jsonResonse;
 
    public GridDataResult(IQueryable<T> query, GridRequestParams gridParams)
    {
        string sidx = gridParams.sidx;
        string sord = gridParams.sord;
        int pageIndex = gridParams.page;
        int pageSize = gridParams.rows;
 
        //
        //  Count of all persons in DB (is used by the grid pager)
        //
        int rowsCount = query.Count();
 
        //
        //  Sort all data
        //
        IQueryable<T> orderedQuery = query;
        if (!string.IsNullOrEmpty(sidx))
        {
            orderedQuery = query.OrderBy(sidx, sord);
        }
 
        //
        //  Cut into single page (after sorting)
        //
        var pageData = orderedQuery.Skip((pageIndex - 1) * pageSize).Take(pageSize).ToArray();
 
        //
        //  Convert the data into more grid friendly data (convert date into string)
        //
        var pageJsonData = (from row in pageData select (object)row).ToArray();
 
        //
        //  Build summary required by the grid 
        //
        this.jsonResonse = new GridResponseParams()
        {
            total = ((int)Math.Ceiling((double)rowsCount / pageSize)),
            page = pageIndex,
            records = rowsCount,
            rows = pageJsonData
        };
    }
 
    public override void ExecuteResult(ControllerContext context)
    {
        JsonResult res = new JsonResult();
        res.Data = this.jsonResonse;
        res.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
        res.ExecuteResult(context);
    }
}

Please note that the action is also hanlding paging and sorting manipulation.

As you probably suspect at the beginning of this post, implementing the HTML helper, action result and client side code is not a simple task. However, once we done that we can enjoy the power of simple ASP.NET MVC HTML helper and construct a Grid using only two single steps:

Write a view which uses the HTML helper named "Grid"
Write a controller's action which returns a collection of Model object

The full sample code can be downloaded here

Implementing Composite Pattern with Entity Framework Code First

oric — Thu, 03 Mar 2011 01:23:00 GMT

The full sample code can be downloaded here

Entity Framework allows us to map object relationships into a database. One of the useful relationship is the Composite Pattern.

Suppose we have implemented the following class diagram:

As you can see this is a classical implementation of the Composite design pattern, where Group holds a collection of polymorphic items through the property Items of type BookItem.

We would like to save this model into a database using Entity Framework Code First.
According to ECCodeFirst coding convention guidelines we should define the following classes:

public abstract class BookItem
{
    public int ID { get; set; }
    public virtual Group Parent { get; set; }
 
    public abstract void Accept(IBookVisitor visitor);
}

public class Group : BookItem
{
    public string Name { get; set; }
    public virtual ICollection<BookItem> Items { get; set; }
 
    public Group()
    {
        this.Items = new List<BookItem>();
    }
 
    public override void Accept(IBookVisitor visitor) {...}
}
 
public class Person : BookItem
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public virtual ICollection<Address> Addresses { get; set; }
 
    public Person()
    {
        this.Addresses = new List<Address>();
    }
 
    public override void Accept(IBookVisitor visitor) {...}
}
 
public class Address
{
    public int ID { get; set; }
    public string Value { get; set; }
    public string Description { get; set; }
    public virtual Person Parent { get; set; }
    public int PersonID { get; set; }
 
    public void Accept(IBookVisitor visitor) {...}
}
 
public class BookContext : DbContext
{
    public DbSet<BookItem> Items { get; set; }
 
    public BookContext()
        : base("AddressBook")
    { }
 
    protected override void OnModelCreating(ModelBuilder model)
    {
        model.Entity<BookItem>().ToTable("BookItems");
        model.Entity<Person>().ToTable("Persons");
        model.Entity<Group>().ToTable("Groups");
        model.Entity<Address>().HasRequired(a => a.Parent)
				      .WithMany(p => p.Addresses);
 
        base.OnModelCreating(model);
    }
 
    public Group Root
    {
        get
        {
            return (from item in this.Items where item.Parent == null 
			 let g = item as Group select g).Single();
        }
    }
 
    public class Initializer : DropCreateDatabaseIfModelChanges<BookContext>
    {
        protected override void Seed(BookContext context)
        {
            Group root = new Group() { Name = "~" };
            context.Items.Add(root);
 
            Person ori = new Person() { FirstName = "Ori", LastName = "Calvo" };
            root.Items.Add(ori);
            ori.Addresses.Add(new Address() { Value = "ori.calvo@gmail.com" });
            ori.Addresses.Add(new Address() { Value = "ori_calvo@hotmail.com" });
 
            Group friends = new Group() { Name = "Friends" };
            root.Items.Add(friends);
 
            Person yossi = new Person() { FirstName = "Yossi", LastName = "Halul" };
            friends.Items.Add(yossi);
 
            context.SaveChanges();
        }
    }
}

Hosting above code in a simple client application yields the following error: "Two entities with possibly different keys are mapped to the same row. Ensure these two mapping fragments map both ends of the AssociationSet to the corresponding columns."
The error is quite surprising since we are using the exact guidelines published at ADO.NET team blog

After some investigation it looks like EFCodeFirst is not able to handle correctly the composite pattern without additional help. If you remove the collection of BookItems inside Group and remove the Parent reference inside BookItem everything works just fine.

The magic solution is quite simple: Add a raw GroupID field (of type int) to the BookItem class. This way EFCodeFirst understands that Group has a one-to-many relationship with BookItem (beside the inheritance relationship).
Here is the updated BookItem code:

public abstract class BookItem
{
    public int ID { get; set; }
    public virtual Group Parent { get; set; }
    public int? GroupID { get; set; }
 
    public abstract void Accept(IBookVisitor visitor);
}

This time, the client application completes successfully.
Please note that GroupID must be defined as nullable, else, you will get an error regarding a potential cyclic references.

MSDN Session - Introducing ASP.NET MVC

oric — Wed, 23 Feb 2011 15:21:00 GMT

Yesterday I delivered a nice (hopefully) MSDN session at Microsoft. During the session I presented the main features/goodies that were released during January month as part of ASP.NET MVC 3 release.
The session was 4 hours long and was quite intense.

During the first part of the session I built an application from scratch adding at each step a new functionality like editing capabilities, controlling access and routing system manipulation.
During the second part I introduced the new features of ASP.NET MVC 3 and related technologies. Specifically I talked about:

Razor syntax
NuGet
IIS Express
Entity Framework Code First
ASP.NET MVC 3 specific enhancements

Many participants asked me for the Demos and PPTs. Actually, they are all should be uploaded to Channel9 (in the upcoming days). Up until then here is a direct link