public class Person
{
   [Key]
   public string FirstName { get; set; }
   [Key]
   public string LastName { get; set; }

   public int Age { get; set; }
}

The odata url for this model will look like:
GET http://localhost:33051/People(FirstName='Kate',LastName='Jones') HTTP/1.1

And we want to have strong typed parameters in web api actions to this URL.
  public Person Get([FromODataUri] string firstName, [FromODataUri] string lastName)

Note that the FromODataUri model binder attribute is used to parse from odata uri representation to clr type. In odata, string value is "'xxx'" and we want it to be "xxx".
In order to make the route to work, you can add a custom routing convention to parse the key path. Here is a sample implementation:

public class CompositeKeyRoutingConvention : EntityRoutingConvention
{
   public override string SelectAction(System.Web.Http.OData.Routing.ODataPath odataPath,System.Web.Http.Controllers.HttpControllerContext controllerContext, ILookup<string, System.Web.Http.Controllers.HttpActionDescriptor> actionMap)
   {
       var action = base.SelectAction(odataPath, controllerContext, actionMap);
       if (action != null)
       {
           var routeValues = controllerContext.RouteData.Values;
           if (routeValues.ContainsKey(ODataRouteConstants.Key))
           {
               var keyRaw = routeValues[ODataRouteConstants.Key] as string;
               IEnumerable<string> compoundKeyPairs = keyRaw.Split(',');
               if (compoundKeyPairs == null || compoundKeyPairs.Count() == 0)
               {
                   return action;
               }

               foreach (var compoundKeyPair in compoundKeyPairs)
               {
                   string[] pair = compoundKeyPair.Split('=');
                   if (pair == null || pair.Length != 2)
                   {
                       continue;
                   }
                   var keyName = pair[0].Trim();
                   var keyValue = pair[1].Trim();

                   routeValues.Add(keyName, keyValue);
               }
           }
       }

       return action;
   }
}

The convention is inherited from EntityRoutingConvention, which is the default convetion to handle entity key. By calling base.SelectAction, it will add the full key path into routeValues. The new convention will check if it contains "," and seperate it into multiple keys and set each of them into routeValues. So when web api select actions, it will use those values to determine which action to choose. If there is no "," found, it behaves same as base convetion.
To register the convetion, you need to set it when mapping odata route:

public static class WebApiConfig
{
   public static void Register(HttpConfiguration config)
   {
       config.EnableQuerySupport();

       var mb = new ODataConventionModelBuilder(config);
       mb.EntitySet<Person>("People");

       var conventions = ODataRoutingConventions.CreateDefault();
       conventions.Insert(0, new CompositeKeyRoutingConvention());

       config.Routes.MapODataRoute(
           routeName: "OData",
           routePrefix: null,
           model: mb.GetEdmModel(),
           pathHandler: new DefaultODataPathHandler(),
           routingConventions: conventions);
   }
}

Register the route at the postion 0 is to make it be executed before other default routing convetions. So the default EntityRoutingConvetion won't be executed before it. After that, you should be able to get routing work.
Then, how to build url for composite keys?
You don't need to do that for odata links include edit link and self link when using ODataConventionModelBuilder. It will automatically identify composite keys and build the uri for you.
However, you need to build the link for location header. Here is a sample code from PeopleController.cs to handle post request:

public HttpResponseMessage PostPerson(Person person)
{
   if (ModelState.IsValid)
   {
       _repo.UpdateOrAdd(person);

       HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, person);
       string key = string.Format(
           "{0}={1},{2}={3}",
           "FirstName", ODataUriUtils.ConvertToUriLiteral(person.FirstName, Microsoft.Data.OData.ODataVersion.V3),
           "LastName", ODataUriUtils.ConvertToUriLiteral(person.LastName, Microsoft.Data.OData.ODataVersion.V3));
       response.Headers.Location = new Uri(Url.ODataLink(
           new EntitySetPathSegment("People"),
           new KeyValuePathSegment(key)));
       return response;
   }
   else
   {
       return Request.CreateResponse(HttpStatusCode.BadRequest);
   }
}

The source code can be downloaded from: http://code.msdn.microsoft.com/Support-Composite-Key-in-d1d53161

It's very common to have circular reference in models. For example, the following models shows a bidirection navigation property:

 1: public class Category 

 2: { 

 3:     public Category() 

 4:     { 

 5:         Products = new Collection<Product>(); 

 6:     } 

 7:     

 8:     public int Id { get; set; } 

 9:     public string Name { get; set; } 

 10:     public virtual ICollection<Product> Products { get; set; } 

 11: } 

 12:  

 13: public class Product 

 14: { 

 15:     public int Id { get; set; } 

 16:     public string Name { get; set; } 

 17:     public virtual Category Category { get; set; } 

 18: } 

When using with Web Api by generating an EF scaffolding api controller, it won't work by default, however. The following error will occur when serializing with json.net serializer:

Self referencing loop detected for property 'Category' with type 

'System.Data.Entity.DynamicProxies.Category_A97AC61AD05BA6A886755C779FD3F96E86FE903ED7C9BA9400E79162C11BA719'. 

Path '[0].Products[0]' 

The error occurs because the serializer doesn't know how to handle cirular reference. (Similar error occurs in xml serializer as well)

Disable proxy and include reference

EF proxy doesn't work well with POCO data serialization. There are several workarounds. For simplicity, we just disable it in the data context class:

 1: public CircularReferenceSampleContext() : base("name=CircularReferenceSampleContext") 

 2: { 

 3:     Database.SetInitializer(new CircularReferenceDataInitializer()); 

 4:     this.Configuration.LazyLoadingEnabled = false; 

 5:     this.Configuration.ProxyCreationEnabled = false; 

 6: } 

However, after disable proxy, the navigation property won't be lazy loaded. So you have to include the reference when retrieving data from database. Change the scaffolding controller code to:

 1: public IEnumerable<Product> GetProducts() 

 2: { 

 3:     return db.Products.Include(p => p.Category).AsEnumerable(); 

 4: } 

The include call will include the reference data for all records.

Fix 1: Ignoring circular reference globally

json.net serializer supports to ignore circular reference on global setting. A quick fix is to put following code in WebApiConfig.cs file:

 1: config.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore; 

The simple fix will make serializer to ignore the reference which will cause a loop. However, it has limitations:

• The data loses the looping reference information
• The fix only applies to JSON.net
• The level of references can't be controlled if there is a deep reference chain

Fix 2: Preserving circular reference globally

This second fix is similar to the first. Just change the code to:

 1: config.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling 

 2:     = Newtonsoft.Json.ReferenceLoopHandling.Serialize; 

 3: config.Formatters.JsonFormatter.SerializerSettings.PreserveReferencesHandling 

 4:     = Newtonsoft.Json.PreserveReferencesHandling.Objects; 

The data shape will be changed after applying this setting.

 1: [{"$id":"1","Category":{"$id":"2","Products":[{"$id":"3","Category":{"$ref":"2"},"Id":2,"Name":"Yogurt"},{"$ref":"1"}],"Id":1,"Name":"Diary"},"Id":1,"Name":"Whole Milk"},{"$ref":"3"}] 

The $id and $ref keeps the all the references and makes the object graph level flat, but the client code needs to know the shape change to consume the data and it only applies to JSON.NET serializer as well.

Fix 3: Ignore and preserve reference attributes

This fix is decorate attributes on model class to control the serialization behavior on model or property level. To ignore the property:

 1: public class Category 

 2: { 

 3:     public int Id { get; set; } 

 4:     public string Name { get; set; } 

 5:     

 6:     [JsonIgnore] 

 7:     [IgnoreDataMember] 

 8:     public virtual ICollection<Product> Products { get; set; } 

 9: } 

JsonIgnore is for JSON.NET and IgnoreDataMember is for XmlDCSerializer.
To preserve reference:

 1: // Fix 3 

 2: [JsonObject(IsReference = true)] 

 3: public class Category 

 4: { 

 5:     public int Id { get; set; } 

 6:     public string Name { get; set; } 

 7:  

 8:     // Fix 3 

 9:     //[JsonIgnore] 

 10:     //[IgnoreDataMember] 

 11:     public virtual ICollection<Product> Products { get; set; } 

 12: } 

 13:  

 14: [DataContract(IsReference = true)] 

 15: public class Product 

 16: { 

 17:     [Key] 

 18:     public int Id { get; set; } 

 19:  

 20:     [DataMember] 

 21:     public string Name { get; set; } 

 22:  

 23:     [DataMember] 

 24:     public virtual Category Category { get; set; } 

 25: } 

[JsonObject(IsReference = true)] is for JSON.NET and [DataContract(IsReference = true)] is for XmlDCSerializer. Note that: after applying DataContract on class, you need to add DataMember to properties that you want to serialize.

The attributes can be applied on both json and xml serializer and gives more controls on model class.

Download sample code here

User can use following URL to change the return format to json instead of setting Accept header: http://localhost/api/Values?$format=json

However, QueryableAttribute in Web Api OData package doesn't support $format.

ASP.NET Web Api provides such extensibility that you can change the default content negotiation by adding mappings to any part of the a request. So what we just need to do is to add following code to WebApiConfig.cs:

 1: public static class WebApiConfig 

 2: { 

 3:     public static void Register(HttpConfiguration config) 

 4:     { 

 5:         config.Formatters.JsonFormatter.AddQueryStringMapping("$format", "json", "application/json"); 

 6:         config.Formatters.XmlFormatter.AddQueryStringMapping("$format", "xml", "application/xml"); 

 7:         config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", 

 8:             defaults: new { id = RouteParameter.Optional } ); 

 9:     } 

 10: } 

In order to support QueryableAttribute together with $format, you also need to extend it to make it silent on unsupported query options. Following code do the trick:

 1: public class ExtendedQueryableAttribute : QueryableAttribute 

 2: { 

 3:     public override void ValidateQuery(System.Net.Http.HttpRequestMessage request) 

 4:     { // don't report error for unsupported query 

 5:     } 

 6: } 

BTW, at current point, the ValidateQuery method is not virtual in public nuget pacakge. You can use it nighly build feed to install the nightly build: http://www.myget.org/F/aspnetwebstacknightly/

Download Sample Code

I won't talk about too much about how backbone.js works. You can got to http://backbonejs.org for it's documentation and I findhttp://backbonetutorials.com is quite helpful to learn it.

You can download the sample here

Backbone.js Todo List Sample

To make things easy. I directly copy the sample code from backbone.js source.

The sample is quite simple. It implements a todo list and save the data in browser local storage.

Let's first take a look of backbone.js model

 1: // Our basic **Todo** model has `title`, `order`, and `done` attributes. 

 2: var Todo = Backbone.Model.extend({ 

 3:     // Default attributes for the todo item. 

 4:     defaults: function() { 

 5:         return { 

 6:             title: "empty todo...", 

 7:             order: Todos.nextOrder(), 

 8:             done: false }; 

 9:     }, 

 10: ... 

The model has three attributes: title, order and done. Each maps model property in C# world.

Backbone.js has a collection concept that represents a collection of model.

 1: // The collection of todos is backed by *localStorage* instead of a remote 

 2: // server. 

 3: var TodoList = Backbone.Collection.extend({ 

 4:     // Reference to this collection's model. 

 5:     model: Todo, 

 6:  

 7:     // Save all of the todo items under the `"todos"` namespace. 

 8:     localStorage: new Store("todos-backbone"), 

 9:  

 10: ... 

The collection defines its model as Todo and assign a local storage which will save the data to browser's storage. As we are going to use web api,

Create server model and web api

Based on the model on in the backbone.js sample, I create a corresponding EF code first mode.

 1: public class Todo 

 2: { 

 3:     public int Id { get; set; } 

 4:     public string Title { get; set; } 

 5:     public int Order { get; set; } 

 6:     public bool Done { get; set; } 

 7: } 

And create a EF scaffolding API controller based on the model. Simple? Yeah, it's done for the server side.

Connect client to the server

I just changed the localStorage line to the url to tell backbone to use a web api instead of browser storage.

 1: // The collection of todos is backed by *localStorage* instead of a remote 

 2: // server. 

 3: var TodoList = Backbone.Collection.extend({ 

 4:     // Reference to this collection's model. 

 5:     model: Todo, 

 6:     url: function () { return 'api/todos'; },

 7: ... 

You many notice that there is something different between server and client code: Model's property names are different by their first letter cases.

Web API uses JSON.NET to serialize and deserialize json. Fortunately, JSON.NET supports case insensitive deserialization by default. And it can support serialization as well by adding one line code in WebApiConfig.cs.

 1: public static void Register(HttpConfiguration config) 

 2: { 

 3:     config.Formatters.JsonFormatter.SerializerSettings.ContractResolver 

 4:         = new CamelCasePropertyNamesContractResolver(); 

 5:     config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); 

 6: } 

The CamelCasePropertyNamesContractResolver will automatically convert property name to camel case, which is same as the attribute name on client side.

After this change, every thing works like a charm.

Conclusion

To implement a SPA with backbone.js and ASP.NET web api is quite easy. It's because they are all based on Restful convention. Backbone.js enforce a best practice to organize client code which looks very useful when the application grows. It also supports hashtag routing. I will give it a try in a more complicated application.

You can download the sample here

As Web API is released with ASP.NET MVC 4 beta, it can be used in both web host and self host. You can view a sample code for self host here.

When writing self host app, you may probably want to use template engine to show web pages just like in Sinatra or Nancy. However, Web API doesn’t natively support it right now. You can use MVC but it depends on ASP.NET which can’t be self hosted.

This article is a tutorial on how to use latest Razor Engine v3 within Web API self host app.

Setup Web API Self Host Project

Follow the tutorial at here.

Install Razor Engine v3 Nuget Package

Add one more route to serve web page request

config.Routes.MapHttpRoute(
    "API Default", "api/{controller}/{id}",
    new { id = RouteParameter.Optional });

config.Routes.MapHttpRoute(
    "Default", "{controller}/{action}",
    new { controller = "Home", action = "Index" }); 

Inline Template

Add HomeController.cs to the project

using System.Net.Http;
using System.Web.Http;
using RazorEngine;

namespace SelfHost
{
    public class HomeController : ApiController
    {
        public HttpContent Index()
        {
            string template = "Hello @Model.Name! Welcome to Web API and Razor!";
            string result = Razor.Parse(template, new { Name = "World" });

            return new StringContent(result, System.Text.Encoding.UTF8, "text/html");
        }
    }
}

Web API doesn’t has a html media formatter right now, so I have to use HttpContent as return type to prevent it from using default JSON or XML formatter to format the return content.

Open browser and visit http://localhost:8080/, it should show the content:

Rendering Template files (cshtml)

Razor engine supports to inject resolver to resolve template name to template content. I will resolve template name to embedded resource content in this tutorial. You can resolve it from physical file like what MVC did as well.

Put following coding just next to the routing code

string viewPathTemplate = "SelfHost.Views.{0}";
TemplateServiceConfiguration templateConfig = new TemplateServiceConfiguration();
templateConfig.Resolver = new DelegateTemplateResolver(name =>
{
    string resourcePath = string.Format(viewPathTemplate, name);
    var stream = Assembly.GetExecutingAssembly().GetManifestResourceStream(resourcePath);
    using (StreamReader reader = new StreamReader(stream))
    {
        return reader.ReadToEnd();
    }
});
Razor.SetTemplateService(new TemplateService(templateConfig));

Next change the HomeController to use template file name to render

using System.Net.Http;
using System.Web.Http;
using RazorEngine;
using RazorEngine.Templating;

namespace SelfHost
{
    public class HomeController : ApiController
    {
        public HttpContent Index()
        {
            var model = new { Name = "World", Email = "someone@somewhere.com" };
            string result = Razor.Resolve("Index.cshtml", model).Run(new ExecuteContext());
            return new StringContent(result, System.Text.Encoding.UTF8, "text/html");
        }
    }
}

Add template file Index.cshtml to Views folder and set it as embedded resource

Copy the following content to the Index.cshtml file (Note: there is a known bug in Razor editor, which will hang when copying and pasting. Please open it by Html editor instead)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title>Hello @Model.Name</title>
    </head>
    <body>
        Email: <input type='text' value='@Model.Email'></input>
    </body>
</html>

Run the application and it will show the content in browser.

Support Layout page

Since we already implemented the resolver, Razor will use it to resolve the Layout template as well. So the change will be very simple.

Add Layout.cshtml file to the Views folder and set it as embedded resource.

Copy the following content to the file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title>Hello @ViewBag.Title</title>
    </head>
    <body>
        @RenderBody()
    </body>
</html>

Replace Index.cshtml with following content:

@{
    _Layout = "Layout";
    ViewBag.Title = @Model.Name;
}
Email: <input type='text' value='@Model.Email'></input>

Download Sample Code

Hongye Sun

Thanks for Scott Galloway's suggestion. AutoF5 1.3 now supports to refresh CSS file dynamically by javascript instead of reloading the whole page. With this feature, It will be very convenient to develop and style Ajax UI. 

In this update, I shamelessly copy the js snippet from http://snippets.dzone.com/posts/show/2069 and fixed the regular expression issue in it. It will dynamically change the href of stylesheet links and append a random seed to avoid browser cache.

Here is the code snippet:

 function updateStylesheets() {
 var i, a, s;
 a = document.getElementsByTagName('link');
 for (i = 0; i < a.length; i++) {
 s = a[i];
 if (s.rel.toLowerCase().indexOf('stylesheet') >= 0 && s.href) {
 var h = s.href.replace(/(&|\?)forceReload=\d*/g, '');
 s.href = h + (h.indexOf('?') >= 0 ? '&' : '?') + 'forceReload=' + (new Date().valueOf());
 }
 }
 }

To make it simple, I just reload all the stylesheets no matter it changed or not.

In the code behind, I changed the monitor handler for CSS file and tell the client to just reload all CSS files.

Some useless file monitors are also removed to avoid unintentional reload of page. Like cs, vb, config files are removed.

Nuget Package: http://nuget.org/List/Packages/AutoF5.

Source: https://github.com/hongyes/AutoF5.

Please leave comments here if you find any issue of it. Thanks.

It is always annoying to switch between Visual Studio and browser back and forth when implementing a simple UI change. Especially editing an MVC project, there is no designer at all.

Imagine that you want to adjust the size of an image, you have to do this:

1. Edit in CSS file

2. Save

3. Switch to Browser

4. F5 or click refresh button to see the changes

Then if you are not satisfied with the adjustment. You have to go through step 1-4 again. This method is very inefficient.

Another method is to :

1. Use IE development tool / Firebug to adjust the CSS changes in browser until you are satisfied

2. Switch to Visual Studio and you should remember all the changes you have made and edit them in CSS file

3. Save

4. Switch back to browser

5. F5 or click refresh button to see the changes

This is better since you can view your changes immediately in browser, but it is still not good enough, because you have to remember all the changes and save them back to the CSS file.

The solution is AutoF5 nuget package

I came out this idea to use ajax long polling to dynamically refresh browser, whenever a save operation is detected.

To install AutoF5, you can simply type command in PM Console on your website project:

PM> Install-Package AutoF5

After installation, you will immediately see your changes whenever you save the content file in Visual Studio.

You can view changes in IE, Firefox, Chrome at same time just by Ctrl+S. Here is a quick demo

[View:https://www.youtube.com/watch?v=jVjVbr8mjfo&hd=1]

The package supports all popular browsers and all asp.net project templates. WebMatrix should also be supported. 

Nuget Package: http://nuget.org/List/Packages/AutoF5.

Source: https://github.com/hongyes/AutoF5.

Please let me know if you find any issue. Thanks.

How to: Use Web Services to Enable and Configure Trace for Team Foundation Server Components

Enable Globally Trace in TFS AT

   <system.diagnostics>
        <assert assertuienabled="false" />
        <trace autoflush="false" indentsize="4" />
        <!--  Trace Switches
            Each of the trace switches should be set to a value between 0 and 4, inclusive.
              0: No trace output
              1-4: Increasing levels of trace output; see Systems.Diagnostics.TraceLevel
        -->
        <switches>
            <add name="API" value="4" />
            <add name="Authentication" value="4" />
            <add name="Authorization" value="4" />
            <add name="Database" value="4" />
            <add name="General" value="4" />
            <!-- WorkItem trace switches -->
            <add name="traceLevel" value="4" />

            <!-- Test Tools trace switches -->

            <add name="EqtTraceLevel" value="4" />

        </switches>        
    </system.diagnostics>

Enable TSWA Trace

Uncomment the system.diagnostics section in the TSWA's web.config file.

<system.diagnostics> <trace autoflush="true"> <listeners> <add name="TeamPlainTracer" type="System.Diagnostics.TextWriterTraceListener, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" initializeData="(Log Folder Path)\TswaLog.txt" /> <remove name="Default"/> </listeners> </trace> <switches> <add name="TSWA.General" value="Verbose"/> <add name="TSWA.Application" value="Verbose"/> <add name="TSWA.TeamFoundationServer" value="Verbose"/> <add name="TSWA.UserControl" value="Verbose"/> <add name="TSWA.Configuration" value="Verbose"/> <add name="TSWA.Security" value="Verbose"/> <add name="TSWA.API" value="Verbose"/> </switches> </system.diagnostics>

Enable TFS Client Logging

http://blogs.msdn.com/edhintz/archive/2007/03/30/tfs-client-tracing.aspx

Enable TFS Build Service Logging

Uncomment the system.diagnostics section in the tfsbuildservice.exe.config, which is located at <VS Installation Folder>/Common7/IDE/PrivateAssemblies/.

  <!-- Trace settings.
       Uncomment the system.diagnostics section below to get a trace log for the
       Team Build Service. Ensure that the C:\logs directory exists and is
       writeable by the Build Service user. 

       The following trace categories are provided for Team Foundation:
	    - API: Covers method usage, service to web service calls (from the caller's
	        perspective), public methods.
	    - Authorization: Covers authorization related components
	    - Authentication: Covers authentication components
	    - Database: Covers database interaction of the component
	    - General: Covers cases that do not fit the above categories.
        
      Trace Switches
	    Each of the trace switches should be set to a value between 0 and 4, inclusive.
	        0:No trace output
	      1-4:Increasing levels of trace output; see Systems.Diagnostics.TraceLevel
  -->

  <system.diagnostics>      
    <switches>
      <add name="API" value="4" />
      <add name="Authentication" value="4" />
      <add name="Database" value="4" />
      <add name="General" value="4" />
    </switches>
    <trace autoflush="true" indentsize="4">
      <listeners>
        <add name="myListener"
            type="System.Diagnostics.TextWriterTraceListener"
            initializeData="C:\logs\buildmachine.log" />
      </listeners>
    </trace>
  </system.diagnostics>