.less files gives 404 or 406 error on IIS

A quick reminder to myself if I ever run into this problem:  When using .less as css it might work fine when running thru Visual Studio but it fails with a 404 or a 406 when deploying to the IIS server. (ie. the CSS is not applied to the web page).

Probable solutions are here (404 - need to specify mime type) and here (406 - need to have consistent types).

Also should have IIS in Integrated Mode, not Classic if possible. Found this tip here

Problems installing ASP.NET MVC3

I recently installed the CMS Umbraco 5, but I had problems getting it to run because I didn't have MVC3 installed. When I used Web Platform Installer to install it - it didn't work (I think there was no error message even) - after installing MVC3 the files where nowhere to be found.

The error you'll receive is (when running Umbraco): Could not load file or assembly 'System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' or one of its dependencies. The system cannot find the file specified.

The reason MVC3 won't install is because I had a newer version of NuGet installed (v1.5). The installer produces a fatal error when it finds a newer (than 1.2) version instead of continuing. The semi-official fix from Microsoft is to uninstall Nuget, install MVC then reinstall Nuget.

There is also another workaround, to manually run the installation files after the installer has extracted them (start installation, when it fails find the extracted installation files in the Temp folder and copy them somewhere else. Then install them manually after finishing the first install).

Note that the problem is actually in the 'MVC3 Tools' package, so for me it worked to simply install the binaries (since I'm just going to run Umbraco, not develop MVC3 apps I don't need the tools).

Download just the runtime from here: http://www.microsoft.com/en-us/download/details.aspx?id=4211

The tools are here (in case you need them): http://www.microsoft.com/en-us/download/details.aspx?id=1491

ASP.NET MVC 4 and mobile web

Here is how to set up for mobile web on MVC 4 (or at least my preferred way) follow instructions here:

• 51Degrees.mobi and MVC4

Note the comment from Chip below the article, there is a Last-In-First-Out principle for the order of specifying the order of devices. So instead of the order used in the article, use Chip's.

Also note that the examples are for MVC 4 developer preview, the correct way in MVC 4 beta is 

• DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("mobile")

instead of

• DisplayModes.Modes.Insert(0, new DefaultDisplayMode("mobile")

Look here if you get the error "Could not load type 'System.Web.WebPages.DisplayModes'.

So updating and combining the info, this is the correct way in global.asax:

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("mobile") {
          ContextCondition = Context => Context.Request.Browser.IsMobileDevice
});


DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("Tablet"){
          ContextCondition = Context => [how to id tablet]

});

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("AndroidTablet"){
         ContextCondition = Context => [how to id android tablet]

});

)

jQuery Mobile stuff

I just started using jQuery Mobile and ran into a few gotchas. First is that when going from one page to another what actually happens is that jQuery Mobile does some Ajax magic in the background. This means that the second page is not loaded in the traditional way.

I got hit with this when my third page in a sequence was supposed to load a javascript file, i did this in the header but since it was ajax, the header referencing the script file wasn't actually loaded - same with document.ready(). It was a little head scratching before consulting the docs where it is actually written clear:

Important: Use $(document).bind('pageinit'), not $(document).ready()

Same with referenced javascript files, they have to be referenced in the page contents not the header.

Second after showing some html I got through my own ajax service in a dialog, the next time it showed it would be without styling. jQuery Mobile only styles elements once, so second time the dialog was shown jQuery Mobile assumed that it already had styled the html in it. To force a restyling do like this:

            $.ajax({
                url: urltosomeajaxservice,
                type: 'POST',
                data: form_data,
                success: function (data) {
                    $('#streets').html(data);
                    $.mobile.changePage('#mydialogpage', true, true);
                    $('#mydiv').trigger("create");
                },
                error: function () {
                    //alert("Error!");
                }
 
            });

 Note the .trigger("create") - which does the restyling. The markup:

<div data-role="dialog" id="mydialogpage">
    <div data-role="content" data-theme="b">
        <div id="mydiv">
        </div>
    </div>
</div>