The setup:

• Windows 8
• Visual Studio 2012, .NET 4.5,
• ASP.NET MVC web application
• Non domain-joined computer (it’s on my home network)
• Using a Microsoft account (FKA Live ID) as the local account
• Using IIS Express/IIS
• Windows Authentication Enabled
• Anonymous Logon Disabled

<system.webServer>
    <security>
        <authentication>
            <windowsAuthentication enabled="true" />
            <anonymousAuthentication enabled="false" />
        </authentication>
    </security>
</system.webServer>

While there are a few proposed solutions, this is the only one that worked for me so far.

1. Start Internet Explorer
2. Click the settings Menu
3. Select Internet options
4. Click the Security tab
5. Select Local intranet
6. Click Sites
7. Click Advanced
8. Add http://localhost/ to the Local intranet zone
9. Close.
10. Verify it’s now working.

Done.

Alternatives welcomed. :)

After the first round, I felt compelled to KnockOut the code a bit more. I’d mentioned I wasn’t pleased with the code exactly. It needed some refactoring.

So, I’ve created a new Knockout binding handler. This binding handler replaces  named parameters with a model’s properties in a path.

For example, given this object:

The following paths would be converted thusly:

You get the idea. Here’s the JavaScript code:

ko.bindingHandlers['route'] = {
    // Examples: 
    //      <a data-bind="route: {model: $data, url: 'person_details', attr: 'href' }" >
    // or, you can shortcut the syntax to default to the currently bound object and just pass 
    // the url or the route name as a string directly
    //      <a data-bind="route: 'person_details' }" >
    update: function (element, valueAccessor, allBindingsAccessor, $data) {
        var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor());
        var options = ko.bindingHandlers.route.options || {};

        // look for the model property 
        var model = ko.utils.unwrapObservable(valueUnwrapped['model']);
        if (typeof model !== 'object') {

            model = ko.utils.unwrapObservable($data);
            if (typeof model === 'undefined' || model === null) {
                throw new Error('set route model to object (or nothing bound?)');
            }
        }

        // look for the url property first
        var url = ko.utils.unwrapObservable(valueUnwrapped['url']);
        // validate we've got something as a url (might be a name, might be a full url)        
        if (typeof url !== 'string' || url == "") {
            url = valueUnwrapped;
            if (typeof url !== 'string' || url == "") {
                throw new Error("set route url property to route name or url directly");
            }
        }

        // is it on the keyed collection?
        var map = options.map;
        if (typeof map !== 'undefined' && map !== null) {
            if (map.hasOwnProperty(url)) {
                url = map[url];
            }
        }
        // check for a routing function as well
        var fn = options.routeNameToUrl;
        if (typeof fn === 'function') { url = fn.call(null, url); }
        // did we get something meaningful?
        if (url !== null && url !== '' && url.length > 0) {
            url = ko.bindingHandlers.route.buildUrl(url, model);            
        }
        // the url might need some fixin after a routing, anything goes here (might just be a default)
        fn = options.fixUrl;
        if (typeof fn === 'function') { url = fn.call(null, url); }
        element.setAttribute(ko.utils.unwrapObservable(valueUnwrapped['attr']) || 'href', url);
    },    

    // given a model, this function replaces named parameters in a simple string 
    // with values from the model
    //     /path/to/some/{id}/{category}
    // with object { 'id' : 'abc', 'category' : 'cars' }
    // becomes
    //     /path/to/some/abc/cars
    buildUrl : function(url, model) {
        // unfixed if there's not a thing
        if (typeof model === 'undefined' || model === null) { return url; }

        var propValue;
        for (var propName in model) {                
            if (model.hasOwnProperty(propName)) {
                propValue = model[propName];
                if (ko) { propValue = ko.utils.unwrapObservable(propValue); }

                if (typeof propValue === 'undefined' || propValue === null) {
                    propValue = "";
                } else {
                    propValue = propValue.toString();
                }
                url = url.replace('{' + propName.toLowerCase() + '}', propValue);
            }
        }
        return url;
    },

    options: {
        // ** convert a route name to a url through whatever means you'd like
        // routeNameToUrl : function(routeName) { return url; } 

        // ** anything you want, called after routeNameToUrl, might add a virtual directory
        // ** for example
        // fixUrl: function(url) { return url;  }  

        // ** A map route names to URLs **
        // all other functions are called if set (to possibly override this)
        // this is not required if you use one of the other functions
        // map : { 'a_route_name' : '/path/to/something/{id}/{action}' }        
    }
};

In another JavaScript file, I did initialize some of the options:

ko.bindingHandlers.route.options.routeNameToUrl = getRoute;
ko.bindingHandlers.route.options.fixUrl = app_url;

The getRoute function just maps a route name to a path, and the app_url prepends the virtual directory to the path as needed.

Here it is in use:

<div data-bind="foreach: data.persons">
    <h3 class="title" data-bind="text: Title"></h3>
    <div>
        <a data-bind="route: { model: $data, url: 'person_details', attr: 'href' } ">Details2</a>
        <a data-bind="route: '/data/details/{id}/{title}' ">Details</a>
        <a data-bind="route: 'person_details' ">Details</a>
    </div>
</div>

You’ll probably like the new way better syntactically at least compared to the old way. A route binding requires one input when used in it’s most basic form:

• url = the URL or route name to use as the template for the replacement. It should contain (or later resolve to) curly-braced enclosed property name keys which will be substituted by values from the model. The value of the property could be either a route name (see options below) or a path.

When using just the basic form you can use the shortened syntax:

<a data-bind="route: 'research_details' ">Details</a>

This handily binds to the current object (via the bindingContext.$data property of the bindingHandler update function call, which is also the fourth parameter, which I’ve renamed to $data rather than the typical viewModel). So, you won’t need to necessarily (explicitly) set the model for the binding.

If you need a a bit more control, you can change the syntax and get access to a few other options (including direct access to the model you want to bind to if the current item isn’t directly what you want to use).

• model = this is the object that contains the properties and values to be used as replacements within the url
• attr (optional) = the name of the attribute to set the generated url into. Defaults to href if not set.

There are a few global options you can control as well:

• routeNameToUrl = (function)(routeName) optionally, given a route name, should return the path (or the original value). Here you can do a lookup of routeName to path.
• map = {object} the object properties should be route names and set equal to the path. this optional lookup is performed before the routeNameToUrl function is called.
• fixUrl = (function)(url) do anything here. this is called after the mapping and routeNameToUrl is optionally called. I use this to correct javascript Ajax request paths by appending the application virtual directory

(Thanks to Ryan for the suggestion to use the $data on the bindingContext, and then again for the nudge to just use the 4th parameter. )

This is just an example of how to build one – it’s not secure.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.SessionState;
using System.Web.Routing;
using System.IO;

namespace TestWebApplication1
{
    public class Global : System.Web.HttpApplication
    {
        void Application_Start(object sender, EventArgs e)
        {
            RouteTable.Routes.Add(new Route("Assets/{locale}/{assetID}", new CustomRouteHandler()));
        }
    }

    public class CustomRouteHandler : IRouteHandler
    {
        public IHttpHandler GetHttpHandler(RequestContext requestContext)
        {            
            return new SimpleFileHttpHandler(requestContext);
        }
    }

    public class SimpleFileHttpHandler : IHttpHandler
    {
        private RequestContext _requestContext;
        private HttpContext _httpContext;

        public RequestContext RequestContext { get; private set; }

        public SimpleFileHttpHandler(RequestContext requestContext)
        {
            _requestContext = requestContext;
        }

        public bool IsReusable
        {
            get { return false; }
        }

        public void ProcessRequest(HttpContext context)
        {
            _httpContext = context;

            string assetID = _requestContext.RouteData.Values["assetID"].ToString();
            string locale = _requestContext.RouteData.Values["locale"].ToString();

            if (string.IsNullOrWhiteSpace(assetID) || string.IsNullOrWhiteSpace(locale)) {
                throw new ArgumentException();
            }
            // this is not adaquate and definitely not secure as it would allow any file to be selected and downloaded
            // needs to prevent any sort of hack attempts using encoded paths, etc. should just be a relative path within the
            // folder that contains the content and no more. 
            string path = _httpContext.Request.MapPath("~/Content/" + assetID, "", false);
            if (File.Exists(path))
            {               
                // hard coded to the image/jpg type (obviously needs to adjust)
                context.Response.AddHeader("Content-Type", "image/jpg");
                context.Response.AddHeader("Content-Length", new FileInfo(path).Length.ToString());
                context.Response.WriteFile(path);
            }
        }
    }


}

To use it, I created a folder called Content and copied one of the sample photos included with Windows into the folder, and then modified Default.aspx:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="TestWebApplication1._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        Welcome to the Route Table Demonstrator
    </h2>
    <h3>This one should work as it's using the not-so-magical route table and a custom iroutehandler.</h3>
    <p>
        &lt;img src=&quot;/Assets/en-us/Penguins.jpg&quot; width=&quot;320&quot; height=&quot;200&quot; /&gt;
    </p>
    <p>
        <img src="/Assets/en-us/Penguins.jpg" width="320" height="200" />
    </p>
    <h3>THis one shouldn't work due to security in web.config for the folder</h3>
    <p>&lt;img src=&quot;/Content/Penguins.jpg&quot; /&gt;</p>
    <p>
        <img src="/Content/Penguins.jpg" />
    </p>    
</asp:Content>

In the Content Folder, I added a web.config file to prevent direct access to the content within the folder:

<?xml version="1.0"?>
<configuration>

  <system.web>
    <authorization>
      <deny users="*"/>
    </authorization>
 
  </system.web>

  <system.webServer>
     <modules runAllManagedModulesForAllRequests="true"/>
  </system.webServer>
</configuration>

This should work without modification on IIS7+ and Visual Studio 2010.

<script src="Scripts/MicrosoftAjax/Start.debug.js" type="text/javascript"></script>
<script type="text/javascript">

    var ajaxPath = "";

    Sys.activateDom = false;

All you must do is set Sys.activateDom to false as shown above (make sure this is set after the new Start.js JavaScript file loads, otherwise your code will crash when you try to set the Sys object before it has been properly constructed).

Then, to begin the attach process, just call Sys.activateElements:

Sys.activateElements(document.documentElement);

In the code line above, though I’ve specified that I want the entire HTML document activated, you could provide any element you want as a starting point (for example to optimize the use of the library and prevent unnecessary DOM searching for example).

I’m adding the delay in some JavaScript code because I wanted to set up a few variables in advance of the attach occurring. I tend to write my JavaScript code in an object oriented fashion these days (using the prototype pattern), including code that is interacting with the DOM. In this case, I’ll create a class that represents the logic of the page rather than following the typical purely functional model that is done on many JavaScript pages. But, when using the “eval” syntax of the Microsoft Ajax library “{{ code }}”, occasionally, I’ll need to delay the eval or the page will crash.

From my recent post on making a simple command extension to the Microsoft Ajax library, I wanted to make that more object oriented by referring to an instance of my class, rather than pointing directly to a function:

<body sys:attach="wpc" 
    wpc:onbubbleevent="{{$view.onCommand}}"  
    xmlns:sys="javascript:Sys" xmlns:wpc="javascript:WiredPrairie.Commanding">

$view represents the instance of my page’s behavior. However, if the attach were to occur too early, this variable is not yet set. I’m using the slick script loading functionality of the ajax library, specifying the various JavaScript libraries and their dependencies, including my page’s behavior. It’s not until that JavaScript code is loaded that the code can create an instance – and that could be AFTER the page has already done the attach logic. The attach happens before Sys.onReady for example. (Sys.onDomReady happens before onReady, but not all JavaScript files may have been downloaded).

Sys.onReady(function() {
    $view = new WiredPrairie.MainView();
    
    Sys.activateElements(document.documentElement);

When using the sys:attach attribute, note that the attach and instantiation process happens before any code you’ve specified in onReady is executed (Microsoft currently uses the same method for determining when everything is ready by adding a function call to onReady – but their call is first in the queue).