Gil Fink's Blog : ASP.NET MVC Framework

Generating ASP.NET MVC View Controls According to Xml Configurations

Gil Fink — Mon, 23 Apr 2012 14:23:01 GMT

Generating ASP.NET MVC View Controls According to Xml Configurations

Last week I was consulting about ASP.NET MVC at a customer. One of the customer project requirements is to generate forms according to Xml configuration files. In this post I’ll offer an end-to-end solution to this requirement. This solution can be rafactored to use databases or any other data sources in order to achieve the same results.

Setting The Environment

Create a new default internet ASP.NET MVC 3 web application:

Pay attention to the folders I added such as Classes and ViewModels. The Classes folder will be used to store classes that I use in the application. The ViewModels folder will be used to store the view models that I’ll use in the solution.

The Xml File

Here is an example for the Xml file I’m going to use in the solution:

     <?xml version="1.0" encoding="utf-8" ?>

    <views>

      <view id="home">

        <controls>

          <control>

            <type name="Label">

              <property name="ID" value="lbl1"/>

              <property name="Value" value="lbl1"/>

            </type>

          </control>

          <control>

            <type name="TextBox">

              <property name="ID" value="txt1"/>

              <property name="Value" value="txt1"/>

            </type>

          </control>

        </controls>

      </view>

    </views>

The Xml will be located in the App_Data directory. In the Xml, a view node represents a single view that holds some controls to render. Every control has a type (for example Label) and each type has properties that define the type. As you can understand this data structure can also be implemented inside a database or other storage types. Since the customer needed Xml representation I use an Xml file.

First Step – Creating the ViewModels for the Controls

The first thing to do is to create a base class to represent a control inside a view.

    public abstract class ControlViewModel

    {

      public abstract string Type { get; }

      public string Label { get; set; }

      public string ID { get; set; }

      public string Name { get; set; }

    }

The ControlViewModel include the control type, the control id, the control name and a label string associated with the control. If you need other properties which are repeated in all your controls you can add them.

After we have the base class lets implement some concrete classes such as TextBox and Label:

    public class TextBoxViewModel : ControlViewModel

    {

      public override string Type

      {

        get

        {

          return "TextBox";

        }

      }

      public string Value { get; set; }

    }

    public class LabelViewModel : ControlViewModel

    {

      public override string Type

      {

        get

        {

          return "Label";

        }

      }

      public string Value { get; set; }

    }

In the concrete classes, I implemented the control type and added more properties that are used in that control.

Now that we have the concrete classes we can add a ViewModel that will hold all the list of controls for a view:

    public class DefaultControlsViewModel

    {

      public List<ControlViewModel> Controls { get; set; }

      public DefaultControlsViewModel()

      {

        Controls = new List<ControlViewModel>();

      }

    }

The DefaultControlsViewModel includes a list of all the controls to render. If you like to add more model properties to the ViewModel you can inherit from this class and add them.

Second Step – Creating the ControlsContext to Read the Xml File

After we have the ViewModels, we will create a class to read the Xml file (or read from your data source if you have chosen another data source). I have created a ControlsContext class to read the Xml file and to store a DefaultControlsViewModel for each view in the Xml. Here is the ControlsContext implementation:

    public class ControlsContext

    {

      private static Dictionary<string, DefaultControlsViewModel> _dynamicViewModel;

      public Dictionary<string, DefaultControlsViewModel> DynamicViewModel

      {

        get

        {

          return _dynamicViewModel;

        }

      }

      static ControlsContext()

      {      

        Init();

      }

      private static void Init()

      {

        _dynamicViewModel = new Dictionary<string, DefaultControlsViewModel>();

        XDocument doc = GetXmlDocument();

        CreateDynamicViewModel(doc);

      }

      private static void CreateDynamicViewModel(XDocument doc)

      {

        var viewNodes = from node in doc.Document.Descendants()

                        where node.Name == "view"

                        select node;

        foreach (var element in viewNodes)

        {

          AddControlType(element);

        }

      }

      private static void AddControlType(XElement element)

      {

        var controlTypes = from node in element.Descendants()

                           where node.Name == "type"

                           select node;

        DefaultControlsViewModel viewModel = new DefaultControlsViewModel();

        foreach (var type in controlTypes)

        {

          var id = (from idNode in type.Descendants("property")

                    where idNode.Attribute("name").Value == "ID"

                    select idNode.Attribute("value").Value).FirstOrDefault();

          var value = (from valueNode in type.Descendants("property")

                       where valueNode.Attribute("name").Value == "Value"

                       select valueNode.Attribute("value").Value).FirstOrDefault();

          var obj = Activator.CreateInstance("DynamicControlsCreation", "DynamicControlsCreation.ViewModels." + type.FirstAttribute.Value + "ViewModel").Unwrap();

          var control = (ControlViewModel)obj;

          control.ID = id;

          control.Name = id;

          control.GetType().GetProperty("Value").SetValue(control, value, null);

          viewModel.Controls.Add(control);

        }

        _dynamicViewModel.Add(element.FirstAttribute.Value, viewModel);

      }

      private static XDocument GetXmlDocument()

      {

        string path = HttpContext.Current.Server.MapPath("~/App_Data/Controls.xml");

        XDocument doc = XDocument.Load(path);

        return doc;

      }

    }

Some things to notice:

You can create this class as singleton since we will want only one instance for it.
I use the HttpContext.Current.Server.MapPath("~/App_Data/Controls.xml") statement to get the path for the App_Data folder.
I use LINQ to Xml to read the Xml file content.
In order to create and fill the control view models I use the Activator.CreateInstance("DynamicControlsCreation", "DynamicControlsCreation.ViewModels." + type.FirstAttribute.Value + "ViewModel")
statement.

Third Step – Implement the HomeController Functionality

Now that we have the ControlsContext and the control ViewModel classes we can implement the controller functionality.

    public class HomeController : Controller

    {

      public ActionResult Index()

      {

        ControlsContext context = new ControlsContext();

        var model = context.DynamicViewModel["home"];

        return View(model);

      }

      [HttpPost]

      public ActionResult Index(DefaultControlsViewModel model)

      {

        return RedirectToAction("Submitted");

      }

      public ActionResult Submitted()

      {

        return View();

      }

      public ActionResult About()

      {

        return View();

      }

    }

As you can see, I use the default generated ASP.NET MVC HomeController and implement the Index method and an Index method to handle HTTP posts. The reason for the second method will be explained in the last step.

Forth Step – Creating the Views and the Template Views for Each Control

We set all the environment but now we want to create our dynamic generated views. Here is the Index view:

    @{

        ViewBag.Title = "Home Page";

    }

    @model DynamicControlsCreation.ViewModels.DefaultControlsViewModel 

    <p>

        @using (Html.BeginForm())

        {

            for (int i = 0; i < Model.Controls.Count; i++)

            {         

            <div>

                @Html.HiddenFor(x => x.Controls[i].Type)

                @Html.HiddenFor(x => x.Controls[i].Name)

                @Html.EditorFor(x => x.Controls[i])

            </div>       

            } 

            <input type="submit" value="Submit" /> 

        }

    </p>

As you can see, I iterate on all the controls in the DefaultControlsViewModel and write the relevant controls in the view. I use the HTML.EditorFor method to render the relevant view for the relevant control.

In the Views –> Shared folder, I added an EditorTemplates folder and put the relevant view templates for the controls view model (which will be used we you call the HTML.EditorFor method):

    @model DynamicControlsCreation.ViewModels.LabelViewModel

    <div>

        @Html.LabelFor(x => x.Value, Model.Label)

        @Html.LabelFor(x => x.Value)

    </div>

and

    @model DynamicControlsCreation.ViewModels.TextBoxViewModel

    <div>

        @Html.LabelFor(x => x.Value, Model.Label)

        @Html.TextBoxFor(x => x.Value)

    </div>

The last view that I added is the Submitted view:

    @{

        ViewBag.Title = "Submitted";

    }

    <h2>Submitted</h2>

The Views folder will look like:

Last Step – Create the ControlsModelBinder

If you’ll try to run the application everything will work except for the post to the Index method which is created when you click the submit button. The reason it won’t work is that ASP.NET MVC doesn’t know how to create the instances for the concrete control classes. This error can be solved by using a a model binder. If you aren’t familiar with ASP.NET MVC model binders you can read the following post. Here is the model binder to instantiate the relevant ControlViewModel class:

    public class ControlsModelBinder : DefaultModelBinder

    {

      protected override object CreateModel(ControllerContext controllerContext, ModelBindingContext bindingContext, Type modelType)

      {

        var type = bindingContext.ValueProvider.GetValue(bindingContext.ModelName + ".Type");

        object model = Activator.CreateInstance("DynamicControlsCreation", "DynamicControlsCreation.ViewModels." + type.AttemptedValue + "ViewModel").Unwrap();

        bindingContext.ModelMetadata = ModelMetadataProviders.Current.GetMetadataForType(() => model, model.GetType());

        return model;

      }

    }

You will have to register that binder in the Global.asax file in the Application_Start event:

    protected void Application_Start()

    {

      AreaRegistration.RegisterAllAreas();

      RegisterGlobalFilters(GlobalFilters.Filters);

      RegisterRoutes(RouteTable.Routes);

      ModelBinders.Binders.Add(typeof(ControlViewModel), new ControlsModelBinder()); 

    }

This is it.

Now you can run the application and see it working including the submit button in the homepage.

You can download the full code example from here.

Summary

In the post, I’ve created an end-to-end solution to handle dynamic controls creation in a view according to an Xml configuration file.

Using HTML5 Server-Sent Events with JSON and ASP.NET MVC

Gil Fink — Tue, 10 Apr 2012 12:24:14 GMT

Using HTML5 Server-Sent Events with JSON and ASP.NET MVC

I’m getting ready for a session that I’m delivering at the end of this month. I wanted to create a sample for using HTML5 Server-Sent Events and decided to share that sample with my Blog’s readers. But before I write about the sample, lets get to know the Server-Sent Events HTML5 API.

Server-Sent Events

Server-Sent Events is an acronym to the HTML5 EventSource JavaScript API. The Server-Sent Events enable servers to push data over HTTP using push protocols. The data that is sent to the client-side must have the text/event-stream MIME type and must be sent in the following form:

     data: This is the first message.
  

Pay attention that the format has to include the data: prefix and end with line break to end the message.

Another way to send data is using a dedicated event by using the event type format. The following example shows two different events that the client-side can listen for:

    event: event1

    data: event1 data

    event: event2

    data: event2 data

In order to listen to an event in the client-side all you have to do is to create an EventSource object and give it a URL to listen. Also, you need to wire the message event handler in order to handle the data arriving from the server. Here is a simple example of creating an EventSource object:

    var source = new EventSource(url);

    source.onmessage = function (e) {

        console.log(e.data);

    }

The default event source is the message event as shown in the previous example. If you want to listen for a specific event type you will need to wire a handler for that event type like in the following example which listen on the event1 event:

    var source = new EventSource(url);

    source.addEventListener('event1', function (e) {

        console.log(e.data);

    }, false);

Server-Sent Events Using JSON and ASP.NET MVC

After we learned what are Server-Sent Events lets dive into a much more robust example. In the example, I use ASP.NET MVC as my server side technology.

The Client-Side

We start in the client-side implementation. In the Index view of the Home controller I’ll add an messages unordered list and the script that creates the EventSource object.

    @{

        ViewBag.Title = "Home Page";

    }

    <script>   1:     2:     function contentLoaded() {   3:         var source = new EventSource('home/message');   4:         var ul = document.getElementById("messages");   5:         source.onmessage = function (e) {   6:             var li = document.createElement("li");   7:             var returnedItem = JSON.parse(e.data)   8:             li.textContent = returnedItem.message + ' ' + returnedItem.item;   9:             ul.appendChild(li);  10:         }  11:     }  12:    13:     window.addEventListener("DOMContentLoaded", contentLoaded, false);</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>.

    </p>

    <ul id="messages">

    </ul>

As you can see I use the DOMContentLoaded event to start the script when all the DOM content finished to load. I’m creating an EventSource with the name source to listen to the home/message endpoint. Since I expect that the data returned from the server is in JSON format, I parse it using the JSON.parse function and use its content to create a new list item.

The Server-Side

Writing the client-side was easy. The server side is also easy but there are some things to notice. First of all, I use a BlockingCollection object which is a wrapper on top of a IProducerConsumerCollection collection. Another object that I use is the JavaScriptSerializer that will serialize an object on the server to JSON representation.
Here is the HomeController code:

      using System;

      using System.Collections.Generic;

      using System.Linq;

      using System.Web;

      using System.Web.Mvc;

      using System.Collections.Concurrent;

      using System.Text;

      using System.Threading;

      using System.Web.Script.Serialization;

      namespace ServerSentEvents.Controllers

      {

        public class HomeController : Controller

        {

          private static BlockingCollection<string> _data = new BlockingCollection<string>();

          static HomeController()

          {

            _data.Add("started");

            for (int i = 0; i < 10; i++)

            {

              _data.Add("item" + i.ToString());

            }

            _data.Add("ended");

          }

          public ActionResult Index()

          {

            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View();

          }

          public ActionResult About()

          {

            return View();

          }

          public ActionResult Message() 

          {

            var result = string.Empty;

            var sb = new StringBuilder();

            if (_data.TryTake(out result, TimeSpan.FromMilliseconds(1000)))

            {

              JavaScriptSerializer ser = new JavaScriptSerializer();

              var serializedObject = ser.Serialize(new { item = result, message = "hello" });

              sb.AppendFormat("data: {0}\n\n", serializedObject);

            }

            return Content(sb.ToString(), "text/event-stream");

          }

        }

      }

Pay attention that in the Message action I’m returning the text/event-stream content type.

The following figure shows the output of running the above code:

Summary

Server-Sent Events is a good mechanism to push data from the server to the client without the need server polling. The API handles only one side communication (server to client). If you want to use a bidirectional communication channel you should look at the HTML5 Web Sockets API. Using Server-Sent Events is appropriate for listening for changes in feeds such as stocks feed or RSS feed as long as they implement the push protocol.

Avoiding Circular Reference for Entity in JSON Serialization

Gil Fink — Mon, 17 Oct 2011 15:10:09 GMT

Avoiding Circular Reference for Entity in JSON Serialization

One problem that I was facing yesterday while working on an ASP.NET MVC application was a JSON serialization issue. The problem was a circular reference caused by the DataContractJsonSerializer because of relations between the entity and other entities. In this post I’ll show you how you can use a simple workaround in order to avoid the problem.

The JSON Serialization Error

Returning the output of the JSON method in an ASP.NET MVC controller with a JSON object graph based on an Entity Framework Code First object causes the following error – “A circular reference was detected while serializing an object of type ‘object name’”. Here is an example of a method that might cause the problem:

     public ActionResult Details(int id)

        using (var context = new DbEntities())

        {             

            var entity = context.Entities.

              Include(e => e.OtherEntities).

              FirstOrDefault(e => e.EntityId == id);

            return Json(entity, JsonRequestBehavior.AllowGet);

        }

    }

Pay attention that this is a fake method and isn’t a real method.

The error I was getting didn’t show up on the server side (nothing crashed). I found the error by inspecting Fiddler since the application kept on working but the client side callback wasn’t. Here is an example of the calling client side function which is using jQuery getJSON function:

    function getDetails() {

        $.getJSON('/ApplicationName/Details/' + Id, {}, function (data) {

            fillDetails(data);

        });

    }

The circular reference is a known problem that my colleague Ido wrote about in Microsoft Connect.
So how to avoid it?

The Workaround

Use a data projection to project only the relevant data that you need and send this data to the client side. This workaround will minimize the object that you are sending and also play a role as a ViewModel kind of object instead of an entity when it is available on the client side. Here is an example of using the workaround with the previous method:

    public ActionResult Details(int id)

    {

      using (var context = new DbEntities())

      {

        var entity = context.Entities.

          Include(g => g.OtherEntities).

          Select(e => new { 

            e.Id,

            e.Url,

            e.Name,

            e.OtherEntities

          }).

          FirstOrDefault(e => e.Id == id);

        return Json(entity, JsonRequestBehavior.AllowGet);

      }

    }

Summary

The circular reference issue might happen also in WCF script services or in other places while serializing Entity Framework’s entities into JSON representation. The simple workaround is to create a projection of the data that you need and serialize it into JSON representation. One of the gains of this method is minimizing the response size from the server.

Razor Helpers Syntax

Gil Fink — Tue, 19 Jul 2011 22:14:01 GMT

Razor Helpers Syntax

One hidden gem of Razor View Engine is the declarative helper syntax. With this syntax we can create helper components that are stored as .cshtml files, and enable reusability of view code. The name of the syntax might sound familiar and it is since it reminds the HtmlHelper class that was provided as part of MVC 1. In this post I’ll explain the Razor helper syntax and discuss why it sounds familiar to HtmlHelper.

@helper Syntax and The HtmlHelper Class

When you want to encapsulate a view code and make it reusable you’ll probably create an extension method to extend the HtmlHelper class. By doing so all you’ll need to do when that view code is needed is to call the @Html with the method name you’ve created. Here is an example of a HtmlHelper method for building a simple HTML5 video tag:

       public static class HtmlHelpers

      {

        public static MvcHtmlString Video(this HtmlHelper helper, string id, string sourceUrl, bool controls)

        {      

          TagBuilder builder = new TagBuilder("video");

          builder.MergeAttribute("id", id);

          builder.MergeAttribute("src", sourceUrl);

          if (controls)

          {

            builder.MergeAttribute("controls", "controls");

          }      

          return new MvcHtmlString(builder.ToString(TagRenderMode.Normal));

        }

      }

and integrating it inside a view:

      @{

          ViewBag.Title = "Home Page";

      }

      @using AsyncMVC

      <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>.    

      </p>

      @Html.Video("prolog", Url.Content("~/Prolog.mov"), true)

Razor view engine makes it even easier. You can use the @helper syntax and create an inline helper code inside your view (without the creation of an extension method) or make it reusable as a different cshtml file. How does it work? lets take a look at an inline example:

     
        ViewBag.Title = "Home Page";

    }

    <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>.

    </p>

    @helper Video(string id, string sourceUrl, bool controls)

    {      

        TagBuilder builder = new TagBuilder("video");

        builder.MergeAttribute("id", id);

        builder.MergeAttribute("src", sourceUrl);

        if (controls)

        {

            builder.MergeAttribute("controls", "controls");

        }

        var video = new MvcHtmlString(builder.ToString());

        @video         

    }

    @Video("prolog", Url.Content("~/Prolog.mov"), true)

As you can see most of the code that was in the HtmlHelper was transferred to the view with a little change of using a variable for the returned type. This inline code makes it easier to call the method (no HtmlHelper class in the middle) and we don’t need to create extension methods in our application. On the other hand using inline code isn’t reusable outside the scope of the view so what can we do about that? we can separate the helper block to a different cshtml file and use it in our other application views.

Separating Helpers into their own File

In order to put Razor helpers in their own cshtml file you’ll have to add the App_Code directory to your MVC application. In the application project create a new directory with the name App_Code. ASP.NET consider this directory name as special directory name and therefore it will get a special icon. After creating the directory add a View (cshtml file) into it and call it Helpers (for example):

In the created cshtml file, drop the code of the helper from the previous code block and add a using statement for System.Web.Mvc (which is needed for the TagBuilder and MvcHtmlString classes):

      @using System.Web.Mvc

      @helper Video(string id, string sourceUrl, bool controls)

          {      

              TagBuilder builder = new TagBuilder("video");

              builder.MergeAttribute("id", id);

              builder.MergeAttribute("src", sourceUrl);

              if (controls)

              {

                  builder.MergeAttribute("controls", "controls");

              }

              var video = new MvcHtmlString(builder.ToString());

          @video         

      }

After building the solution now the previous view can be used as follows:

      @{

          ViewBag.Title = "Home Page";

      }

      <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>.

      </p>

      @Helpers.Video("prolog", Url.Content("~/Prolog.mov"), true)

Now the video helper is reusable and you can use it in all the views in your application.

Summary

The Razor helper syntax can be very usable and can help you to create helpers without the need for extension methods. On the other hand that doesn’t mean that the HtmlHelper extensions don’t have benefits. Since you can place them in different class libraries you can reuse their code in other applications. With the helper syntax you’ll have to create the App_Code directory and move the helper files to other applications. The choice is yours so pick what you think is more suiting for your implementation.

ASP.NET MVC Model Binders

Gil Fink — Tue, 19 Jul 2011 17:06:05 GMT

ASP.NET MVC Model Binders

One thing that I’m always asked to talk about when I’m delivering ASP.NET MVC sessions or courses is Model Binders. In this post I’ll explain what are Model Binders in ASP.NET MVC and how you can use them in your MVC application.

Model Binders

ASP.NET MVC is providing a way to de-serialize complex types that are part of the incoming HTTP request input. After these types are de-serialize they are passed to the relevant controller’s action as method arguments. In the following controller action method code, during the execution of ASP.NET MVC pipeline, a binder is used to create the Customer instance from the request input:

     [HttpPost]

    public ActionResult Edit(Customer customer)

    {

        if (ModelState.IsValid)

        {

            var mycustomer = _customerdb.GetCustomer(customer.Id);

            TryUpdateModel(mycustomer);

            return RedirectToAction("Index");

        }

        return View(customer);

    }

ASP.NET MVC supplies some binders out of the box such as DefaultModelBinder that is using conventions (such as naming conventions) in order to create the model from the request or FormCollectionModelBinder that maps a request to a FormCollection object. You can use those defaults and of course you can create your own Model Binders.

Creating a Custom Model Binder

In order to create a Model Binder you need to get familiar with the IModelBinder interface:

    public interface IModelBinder 

    { 

        object BindModel(ControllerContext controllerContext, 

            ModelBindingContext bindingContext); 

    }

This interface declare the BindModel method which is the only method that you need to implement. The method gets as arguments the controller context and the model binding context. The ControllerContext object holds information about the current HTTP request and about the associated controller. The ModelBindingContext holds information about the model itself and its metadata. In most of the time you won’t have to write your own binder but if you need to then follow the example.

Custom Model Binder Example

In the example I’ll use the following Course presentation model object:

      public class Course

      {

          #region Properties

          public int CourseID { get; set; }    

          public string Title { get; set; }    

          public string Days { get; set; }    

          public DateTime Time { get; set; }

          public string Location { get; set; }        

          public int Credits { get; set; }

          #endregion

      }

Here is a simple implementation of a Model Binder for the Course model:

      public class CourseModelBinder : IModelBinder

      {

        #region IModelBinder Members

        public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)

        {

          HttpRequestBase request = controllerContext.HttpContext.Request;

          int courseId = Convert.ToInt32(request.Form.Get("CourseID"));

          string title = request.Form.Get("Title");

          string days = request.Form.Get("Days");

          DateTime time = Convert.ToDateTime(request.Form.Get("Time"));

          string location = request.Form.Get("Location");

          int credits = Convert.ToInt32(request.Form.Get("Credits"));

          return new Course

          {

            CourseID = courseId,

            Title = title,

            Days = days,

            Time = time, 

            Location = location,

            Credits = credits

          };

        }

        #endregion

      }

The binder will create the instance of the course by converting all the relevant types from the incoming HTTP request.

Remark: The DefaultModelBinder will also do the same thing since it will use the naming conventions and the property types in order to make the conversion. This is only a simple example in order to explain the concept of Model Binders.

Integrating a Custom Model Binder

In order to integrate a Model Binder into your application you’ll use the ModelBinders class and its Binders collection. Here is how you’ll integrate the previous binder:

    ModelBinders.Binders.Add(typeof(Course), new CourseModelBinder());
  

The perfect place to put this line of code is in the Application_Start event in the Global.asax file.

Summary

Model Binders are very useful and saves us a lot of development time. They help us to transform HTTP request input into model instances automatically and by that making our life easier. When in need, you can create your own custom Model Binder and integrate it into your MVC application.

My Sela Dev-Days Experience

Gil Fink — Wed, 29 Jun 2011 01:21:02 GMT

My Sela Dev-Days Experience

Today I finished my Sela Dev. Days experience. Sela Dev. Days is a conference which include 5 days, 15 top experts, 25 session, and a whole lot of attendees (around 600 people registered for this week). If you are not familiar with Sela Dev. Days you can go to the conference’s site. In the conference I had three tutorial days in three different subjects:

ASP.NET MVC 3, EF Code First integration, and Razor: Oh My!
In this one day tutorial I co-operated with Sebastian Pederiva, a senior consultant in Sela. In the day we gave a crash dived into Microsoft Web Platform – including ASP.NET MVC 3, EF, Web Platform Installer, Razor view engine and more. At the beginning session I introduced Microsoft web platform and ASP.NET MVC. Then, I talked about building models and data access layers for MVC applications on top of Entity Framework and in particular with Code First. In the third session I talked about how to work with controllers and about the routing concept in ASP.NET. Sebastian talked about Razor and how to integrate AJAX into MVC applications using the jQuery library.
HTML 5
In this one day tutorial I talked about what to expect out of the coming HTML5 standards, the new HTML5 elements, how to migrate HTML4 applications to HTML5 (here I gave a case scenario and with the help of the attendees we migrated a blog web page to HTML5) and about some of the new HTML5 API such as Geolocation, Web Workers, Web Sockets, Canvas and more.
Entity Framework 4.1 and Code First
In this one day tutorial I co-operated with Ido Flatow, another senior architect in Sela. I delivered four sessions – introduction to ORMs and EF, querying and manipulating data using Entity Framework, Entity Framework internals and Code First. Ido gave a session about Entity Framework in distributed applications.

I want to thank all the attendees that joined me in the days I delivered.
All the demos can be downloaded from here.

Creating a Code First Database Initializer Strategy

Gil Fink — Mon, 30 May 2011 14:56:44 GMT

Creating a Code First Database Initializer Strategy

Yesterday I helped a colleague with his ASP.NET MVC 3 site deployment. That colleague implemented the data access layer using EF4.1 Code First. One of the restrictions that he had was that he didn’t have database permissions to create a new database and couldn’t use SQL Express or SQL CE in his application. Instead he had an empty database for his disposal in the hosting environment without a way to run SQL scripts… In such a situation the provided Code First database initializer strategies weren’t sufficient (he couldn’t drop or create the database and couldn’t run scripts). In the post I’ll show an example of how to create your own database initializer and show the strategy that helped my colleague to make his deployment.

The Database Initializer Interface

The first thing you have to get familiar with when you want to create your own database initializer is the IDatabaseInitializer generic interface. The IDatabaseInitializer interface is available in the EF4.1 EntityFramework dll in the System.Data.Entity namespace. It exposes only one method - InitializeDatabase:

       namespace System.Data.Entity

      {

        public interface IDatabaseInitializer<in TContext> where TContext : global::System.Data.Entity.DbContext

        {

          // Summary:

          //     Executes the strategy to initialize the database for the given context.

          // Parameters:

          //   context: The context.

          void InitializeDatabase(TContext context);

        }

      }

Creating Database Initializer Strategy

When you want to create your own strategy you will implement the IDatabaseInitializer interface and create your desired initialization behavior. Since all the colleague wanted was to drop the database tables during the application initialization and then to create all the relevant tables here is a sample code that can perform that:

1px solid;padding-top:4px;"> style="color:#0000ff;">public class DropCreateDatabaseTables : IDatabaseInitializer<Context> { #region IDatabaseInitializer<Context> Members "> public void InitializeDatabase(Context context) { bool dbExists; using (new TransactionScope(TransactionScopeOption.Suppress)) { dbExists = context.Database.Exists(); } if (dbExists) // remove all tables context.Database.ExecuteSqlCommand("EXEC sp_MSforeachtable @command1 = \"DROP TABLE ?\""); "> // create all tables var dbCreationScript = ((IObjectContextAdapter)context).ObjectContext.CreateDatabaseScript(); context.Database.ExecuteSqlCommand(dbCreationScript); Seed(context); context.SaveChanges(); } else { throw new ApplicationException("No database instance") } } #endregion #region Methods protected virtual void Seed(Context context) { /// TODO: put here your seed creation } "> #endregion }

So what am I doing in the code sample?
At first I check that the the database exists if not an exception will be thrown. If the database exists I use a not documented SQL Server stored procedure which is sp_MSforeachtable in order to drop all the existing tables. After that, I get the context’s underlining ObjectContext in order to get the script that will generate the database using the CreateDatabaseScript method. Then, I run the script using the ExecuteSqlCommand method. After that I run the Seed method in order to enable the insertion of seed data into the database.

Another thing that you will need to do is to supply the relevant connection string for the existing database:

      <connectionStrings>

          <add name="Context" connectionString="Data Source=Server Name;Initial Catalog=Database Name;Persist Security Info=True;User ID=Username;Password=Password" providerName="System.Data.SqlClient"/>

      </connectionStrings>

Pay attention that when such a strategy is deployed whenever the application start over all the database tables will be recreated! This strategy should only run once.
After the deployment with the previous strategy, my colleague deployed the application again with the default Code First database initialization strategy!

Using the Database Initializer Strategy

In order to use the initialization strategy in an ASP.NET MVC application all you have to do is to set the initializer. The best place to do that is in the Global.asax file in the Application_Start handler. You will use the SetInitializer method that exists in the Database class to wire up the strategy. Here is a code sample that show how to wire up the previous strategy:

      protected void Application_Start()

      {

          AreaRegistration.RegisterAllAreas();

          RegisterGlobalFilters(GlobalFilters.Filters);

          RegisterRoutes(RouteTable.Routes);

          Database.SetInitializer(new DropCreateDatabaseTables());

      }

Summary

In the post I showed you how to create a new database initializer strategy. The provided strategy isn’t a silver bullet solution for the problem I mentioned in the post’s prefix. The ADO.NET team is working on a migration feature for EF Code First that might provide a solution for such a scenario. In the meantime the strategy presented here helped my colleague to solve his problem.

Sela Dev. Days 2011

Gil Fink — Fri, 20 May 2011 19:19:42 GMT

Sela Dev. Days 2011

Next month, June 26-30, Sela is going to have a mini conference – Sela Dev. Days. In the conference you will have the opportunity to meet Israel and world lead experts and learn about the new and coming Microsoft technologies that everyone will talk about in the next following years. The conference includes 25 one day workshop in subjects such as Silverlight 5, Parallel programing, Windows Phone Mango, ASP.NET MVC 3 and more.
In the conference I’m having the following three workshop days:

ASP.NET MVC 3, EF Code First integration, and Razor: Oh My!
ASP.NET MVC is a mature Microsoft web platform that enables the creation of quality web applications by using the MVC pattern. ASP.NET MVC 3 facilitates separation of concerns, total control over content generation using its built-in view engines and full support for test-driven development. In this one day tutorial you will get to know the framework and how to use it.
HTML 5
HTML is the markup language that every web developer uses to structure and present content in the Internet. HTML5 is the standard that is being shaped and developed currently. It extends and improves the last HTML4 standard and takes it to the next level with multimedia, communication support and more. In this one day tutorial you will get to know what is HTML5 and how you can use it even now in your web applications/sites.
Entity Framework 4.1 and Code First
Entity Framework is the new ORM and data access technology introduced by Microsoft. Entity framework provides an easy and efficient mapping from relational data into business entities. It is easy to use and it is integrated with many other Microsoft technologies. The ADO.NET Entity Framework is designed to enable developers to create data access applications by programming against a conceptual application model instead of programming directly against a relational storage schema. This one day tutorial will deep dive into EF4 and will also include an introduction to EF4.1 with Code First approach.

I recommend to attend all the workshops in the conference but these are the workshops that I would have chosen if I could attend the conference as an attendee:

I hope to see you there!

MIX11 Second Day Sessions Summary

Gil Fink — Thu, 14 Apr 2011 11:46:09 GMT

MIX11 Second Day Sessions Summary

Here is a summary of the sessions I attended in the second day of MIX11:

An Overview of the MS Web Stack of Love

In the session Scott Hanselman showed a lot of demos in the Microsoft web platform.
The things that Scott showed:

ASP.NET MVC 3 + new tools

Scaffolding

IIS Express
NuGet
EF4.1
Glimpse – a new open source package which is FireBug like tool for MVC framework.
Get the insight of the flow of your MVC application.

Knockout.js: Helping you build dynamic JavaScript UIs with MVVM and ASP.NET

Steve Sanderson presented a small introduction to knockout.js library. The library enables rich client-side interactivity, MVVM pattern and wide browser support. What it does is automatic dependency tracking, declarative binding and integrated templating. You can download the library from here.

Building Data-Centric N-Tier Applications with jQuery

Brad Olenick talked a little about what is coming in vNext for WCF Data Services which will include jQuery client, AppFabric integration and rich OData support. Then Brad presented the jQuery client for WCF Data Services – RIA/JS.

RIA/JS is available in two ways:

Scaffolding

Steve Sanderson explained what is scaffolding (generating code to make the process of development faster) and then deep dive into demos of GUI scaffolding, command-line scaffolding, T4 templates customization and more.

Reactive Extensions for JavaScript (RxJS)

Brat De Smet talked about a new JavaScript library that introduces JavaScript observable sequences and observers which help to implement the asynchronous programming with abstraction to scenarios like timers, XMLHTTPRequests, jQuery Ajax requests and more.

This is it for the second day of MIX11.

MIX11 Keynote Session Summary

Gil Fink — Wed, 13 Apr 2011 00:15:00 GMT

MIX11 Keynote Session Summary

I’m currently attending the MIX11 Keynote session. Here are some of the things that you might consider to checkout in the following weeks:

IE10 Preview was released and can be download from here.
A new tools update for ASP.NET MVC3 was released and includes:

EF4.1 support
jQuery 1.5 and Modernizr support
Scaffolding support
New Controller templates
More

WebMatrix update
Orchard CMS new release
Windows Azure new upgrades

Access Control Service V2
Caching
CDN support

Installing a Production Server for ASP.NET MVC 2 – Part 2

Gil Fink — Tue, 01 Mar 2011 14:54:31 GMT

Installing a Production Server for ASP.NET MVC 2 – Part 2

A few days ago I helped a client to solve a problem they had when they deployed an ASP.NET MVC 2 application. In a previous post I wrote about how you can install a production server in order to run ASP.NET MVC 2 application. The client team have installed the server according to the AspNetMVC2 MSI installer section (in my post) and then they used Phil Haack’s IIS6 Extension-less URLs solution to enable the routing engine. Life was beautiful and they were on the right track.

But…
running the application produced the “page cannot be found” page:

This made them and me to scratch our heads. So the first thing to do in such cases is to check the IIS log file which can be very helpful by holding the error code which was 404.2. While Googling the net we found the Getting an ASP.NET 4 application to work on IIS6 post by Johan Driessen which holds the solution. Apparently when you install .Net 4 on Windows Server 2003 with IIS6 the .NET 4 ASP.NET ISAPI extension is installed disabled…
By using the following command through the command line you can check whether the ISAPI is enabled:

     cscript iisext.vbs /ListFile
  

If you find out that the status for the .NET 4 ASP.NET ISAPI extension is 0 then in order to enable it you will need to run the following command in the command line:

    cscript iisext.vbs /EnFile C:\WINDOWS\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll
  

You need to run both of the previous commands in <WINDOWS DIR>/System32.
That solved the client’s problems and the application is running on the production server now.
Thanks Johan!

Update:
Another option to do the same thing is through the Web Service Extensions in the IIS Manager. All you have to do is to mark ASP.NET 4 in the extension list and press the Allow button. The following figure shows how to do that:

Thanks to Ran Wahle for this tip!

MIX11 Open Call Voting Has Started Today

Gil Fink — Tue, 25 Jan 2011 14:22:00 GMT

MIX11 Open Call Voting Has Started Today

MIX conference is the biggest Microsoft web conference which occurs every year in Las Vegas. As in every year Microsoft asked the developers and designers communities to propose sessions that will be part of a community voting. The sessions that will be chosen will be performed on stage at this year’s conference. Since I’m going to MIX11 as in last year, I proposed two sessions and they were chosen to the open call voting. This is the session descriptions:

Building Data-Driven MVC Applications with Entity Framework Code First
Entity Framework 4 brings many new opportunities for building complex data driven applications. Code First is a new Entity Framework feature that provides a code-centric experience for interacting with models and databases. In this session we will build a full blown MVC application on top of Entity Framework Code First.
Creating OData Services with WCF Data Services
Data is a first-class element of every application. The Open Data Protocol (OData) applies web technologies such as HTTP, AtomPub and JSON to enable a wide range of data sources to be exposed over HTTP in a simple, secure and interoperable way. This session will cover WCF Data Services best practices so you can use it the right way.

If you find this content interesting I encourage you to go and vote for me and maybe you will hear the session in MIX11. There are other sessions that you can vote to in this link and you can vote up to 10 sessions. The voting will be open up until February 4.
Happy voting!

Installing a Production Server for ASP.NET MVC 2

Gil Fink — Sat, 18 Dec 2010 17:58:14 GMT

Installing a Production Server for ASP.NET MVC 2

Two days ago I was asked to help with a production server installation. In the customer environment they built an ASP.NET MVC 2 application which they wanted to deploy. I found a very excellent post that Jon Galloway wrote about this subject and used it in at customer. In the post I’ll summarize some of the options that I used when we installed the production server for ASP.NET MVC 2.

Web Platform Installer

I wrote about the WebPI in the past. This option is the best option for installing all the server components and not only ASP.NET MVC. It will require that you have a desktop access to the server (remote connection or direct access). At the customer this option didn’t work. For some reason the installation asked that a Visual Studio 2008 SP1 will be installed on the server. Since it is a production server the existence of VS is not necessary.

Bin Deployment

In this option you deploy all the MVC assemblies within your application. Phil Haack wrote about this option and you can explore his post from here. I didn’t like this option since I preferred that the server will have the relevant assemblies installed in it. Since there are other MVC applications in develop which will be hosted in the customer’s server we didn’t choose this option at the end (although they used it in the first place) .

AspNetMVC2 MSI installer

In this option you can download the installer for the ASP.NET MVC 2 and install it. Running the installer will install the MVC runtime along with MVC tooling. At the customer the MSI produced the same error that the WebPI raised. What we did was to open the MSI package and install only the runtime environment. To achieve that you can run from command line the following instruction:
AspNetMVC2_VS2008 /x:[your directory name]
After the MSI will open to the directory you wrote go to the mvcruntime directory and run the installation of the runtime. After doing that the MVC runtime was installed on the production server.

Summary

Lets sum up, I gave few options for installing a server for ASP.NET MVC deployment. The best way is to use the WebPI but at the customer we didn’t have this privilege. I encourage you to read what Jon Galloway wrote in his post since it really help me.

Using the ControllerActivator in MVC 3

Gil Fink — Sun, 17 Oct 2010 15:57:59 GMT

Using the ControllerActivator in MVC 3

In the previous post I showed how to use the DependencyResolver in order to bring Dependency Injection behavior to a MVC 3 application. In this post I’ll show you how you can use the ControllerActivator in order to activate controllers using your own behavior.

The IControllerActivator

In MVC 3 beta a new interface was introduced – the IControllerActivator. This interface is an injection point in order to create our own behavior in order to activate controllers. That interface is discoverable using the dependency resolver. If you don’t implement the interface and register it in the dependency resolver a default behavior which is to use the Activator.CreateInstance will activate controllers.
The interface includes only one method which is the Create method. This method has the same signature like the DefaultControllerFactory’s GetControllerInstance method.
Here is a simple way to implement the IControllerActivator using the previous post’s DependencyResolver:

     public class UnityControllerActivator : IControllerActivator

    {

      #region IControllerActivator Members

      public IController Create(RequestContext requestContext, Type controllerType)

      {

        return DependencyResolver.Current.GetService(controllerType) as IController;      

      }

      #endregion

    }

As you can see I use the current DependencyResolver to get the Unity behavior. Of course you can use other behaviors to implement the controller activation. Here is how the InitContainer method from the previous post will look like now:

    private static IUnityContainer InitContainer()    

    {                   

      var container = new UnityContainer();        

      // Register the relevant types for the         

      // container here through classes or configuration 

      container.RegisterType<IControllerActivator, UnityControllerActivator>();                

      container.RegisterType<IMessageService, MessageService>();

      return container;

    }

I just added the registration of the IControllerActivator to the container. Now if you will debug the application and set a breakpoint in the Create method you will see that all controller activations will pass through the IControllerActivator. When running the application you will get the same result as in the previous post:

Summary

In this post I showed how to hook up your own controller activation behavior in MVC 3. This can be achieved by using the new IControllerActivator interface. The example I showed is using the Unity IoC and could be implemented in other ways as well.

Dependency Injection in MVC 3 Was Made Easier

Gil Fink — Sun, 17 Oct 2010 15:26:44 GMT

Dependency Injection in MVC 3 Was Made Easier

In the past I wrote a post that showed how to implement Dependency Injection using Unity in ASP.NET MVC framework. This post revisits that post and shows how you can do the same thing easily in MVC 3. Pay attention that the supplied code is based on MVC 3 beta and may change in the future.

The IDependencyResolver and DependencyResolver

MVC 3 introduces a new interface – the IDependencyResolver. This interface enables service location by providing two methods:

GetService(Type serviceType) – this method gets a service type and returns an object if the resolver succeeded in resolving the type. If the resolver couldn’t resolve the type you must return null in order to activate the default MVC behavior.
GetServices(Type serviceType) – this method gets a service type and returns an IEnumerable<object> of all the resolved objects. If the resolver couldn’t resolve the type you must return an empty collection to activate the default MVC behavior.

The DependencyResolver is a static class that you can use to register your custom IDependencyResolver. After you implement the IDependencyResolver, you set it in the DependencyResolver using one of the SetResolver overloaded methods. Then you will be able to use the Current property to get the current DependencyResolver in order to resolve types. If you don’t like to use the DependencyResolver ability you need to implement nothing there is default resolving behavior that is built inside the MVC implementation.

Building and Using a UnityDependencyResolver

Here is a simple implementation of a UnityDependencyResolver:

     public class UnityDependencyResolver : IDependencyResolver

    {

        #region Members

        private IUnityContainer _container;    

        #endregion

        #region Ctor

        public UnityDependencyResolver(IUnityContainer container)

        {

          _container = container;

        }

        #endregion

        #region IDependencyResolver Members

        public object GetService(Type serviceType)

        {

          try

          {

            return _container.Resolve(serviceType);

          }

          catch (Exception ex)

          {

            return null;

          }

        }

        public IEnumerable<object> GetServices(Type serviceType)

        {

          try

          {

            return _container.ResolveAll(serviceType);

          }

          catch (Exception ex)

          {

            return new List<object>();

          }

        }

        #endregion

    }

In order to use this resolver the appropriate place to build the container is the Global.asax file. Here is the implementation:

    public class MvcApplication : System.Web.HttpApplication

    {

        public static void RegisterGlobalFilters(GlobalFilterCollection filters)

        {

          filters.Add(new HandleErrorAttribute());

        }

        public static void RegisterRoutes(RouteCollection routes)

        {

          routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

          routes.MapRoute(

              "Default", // Route name

              "{controller}/{action}/{id}", // URL with parameters

              new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults

          );

        }

        protected void Application_Start()

        {

          AreaRegistration.RegisterAllAreas();

          RegisterGlobalFilters(GlobalFilters.Filters);

          RegisterRoutes(RouteTable.Routes);

          var container = InitContainer();

          DependencyResolver.SetResolver(new UnityDependencyResolver(container));       

        }

        private static IUnityContainer InitContainer()    

        {                   

          var container = new UnityContainer();        

          // Register the relevant types for the         

          // container here through classes or configuration                      

          container.RegisterType<IMessageService, MessageService>();

          return container;

        }

    }

As you can see I added the initialization of the container and also I set the DependencyResolver to the Unity implementation. The Message service and the controller are the same classes that I showed in my previous post:

    public interface IMessageService 

    { 

      string GetMessage();

    }

    public class MessageService : IMessageService

    {

      #region IMessageService Members

      public string GetMessage()

      {

        return "Hello Controller!";

      }

      #endregion

    }

and

    public class HomeController : Controller

    {

      #region Members     

      [Dependency]    

      public IMessageService MessageService { get; set; }

      #endregion

      #region Actions    

      public ActionResult Index()

      {

        ViewModel.Message = MessageService.GetMessage();

        return View();

      }

      public ActionResult About()

      {

        return View();

      }

      #endregion

    }

After running this example we will get the following expected result:

Summary

Let sum up, in MVC 3 beta there is a new way to use DI and IoC containers by implementing the IDependencyResolver interface and registering it in the DependencyResolver static class. There are other injection points that you can use like the IControllerActivator which I’ll write about in a following post.