Workaround for Relative Path / Base URL mismatch on Visual Studio 2012 and Hosting on IIS


This post deals with how we can use relative paths in a .NET web project ( Single Page Application using AngularJS and Bootstrap for cosmetics, ASP.NET MVC4 for hosting WebAPIs and providing initial view.) and make it working properly both when running from Visual Studio as well as after hosting on a Remote Server (IIS). There was a lot of trial and error as well as research carried on to find a sleek solution for this problem. I’m not mentioning each and every bit of it, Let’s jump straight in to the main issues encountered.

There were three areas in which I wanted to use relative paths.

  1. Linking scripts and styles
  2. Ajax calls
  3. Angular routes

For the first one, that is for linking scripts, I got the solution easily which is using  tilde(‘~’) character as prefix as shown below.

<script src="~/Scripts/App.js"></script>

But the second and third apparently didn’t seem to support that solution, So I had to think of some other alternatives. After some research the solution got was to use a base url using the base tag in head node of my Home/Index page.

<base href="/MyApp/"/>

Note: You have to use ‘/MyApp/’. MyApp/ or /MyApp will not work.

In angular js routes I defined it like templateUrl:’Partials/Main.html’ as using slash before will cause it to search in the root folder in IIS. Ajax call urls are given like $http.post(‘api/mymodule/myaction’).

The problem with adding a base URL is that although it works fine in deployment, it breaks in Visual studio as there is no virtual directory with that name. Which means I need a different version of Index.html after publishing. I need the base tag only in published location.  I need to runs some operations post publish to change the source. For this purpose I added the following code in my project file.

  <UsingTask AssemblyFile="bin\PublishTasks.dll" TaskName="PublishTasks.AddBaseURL" />
 <Target Name="CustomTarget" AfterTargets="CopyAllFilesToSingleFolderForPackage"  >
    <AddBaseURL FilePath="$(_PackageTempDir)\Views\Home\Index.cshtml"  BaseURL="/MyApp/">
      <Output TaskParameter="Result" PropertyName="BaseResult" />
    </AddBaseURL>
    <Message Importance="high" Text="Result: $(BaseResult)" />
  </Target>

The first line is for adding the custom task I created to the project.  Find its code below.

namespace PublishTasks
{
    public class AddBaseURL : ITask
    {
        public string BaseURL { get; set; }
        public string FilePath { get; set; }

        [Output]
        public string Result { get; set; }

        #region ITask Members

        public IBuildEngine BuildEngine { get; set; }

        public bool Execute()
        {
            try
            {
                HtmlDocument htmlDoc = new HtmlDocument();
                htmlDoc.Load(FilePath);

                HtmlNode head = htmlDoc.DocumentNode.SelectSingleNode("/html/head");

                HtmlNode baseTag = htmlDoc.CreateElement("base");
                HtmlAttribute href = htmlDoc.CreateAttribute("href");
                href.Value = BaseURL;
                baseTag.Attributes.Add(href);
                head.AppendChild(baseTag);
                htmlDoc.Save(FilePath);
            }
            catch (Exception e)
            {
                Result = "Add BaseURL Error:" + e.ToString();
                return false;
            }

            Result = "Added Base url successfully.";
            return true;
        }

        public ITaskHost HostObject { get; set; }

        #endregion
    }
}

Here I implemented the ITask class to create a custom task. You can find the documentation regarding tasks in Microsoft website. It is having two arguments, FilePath and BaseURL which is given in the project file code above. You can also see that I have used HTMLAgilityPack for easy access of HTML file.

$(PackageTempDir) points to a temporary folder where all projects before publishing is copied to. So, If we edit the file there, it will be reflected in the publish folder as it gets copied. A custom target is used with AfterTargets set to CopyAllFilesToSingleFolderForPackage. The target “AfterPublish” was not working due to a bug in Visual Studio. Now, when we publish after setting the logging level to diagnostic, you can see the following in build log.

2> Using "AddBaseURL" task from assembly "...\PublishTasks.dll".
 2> Task "AddBaseURL"
 2> Task Parameter:FilePath=obj\Release\Package\PackageTmp\Views\Home\Index.cshtml
 2> Task Parameter:BaseURL=/MyApp/
 2> Done executing task "AddBaseURL".
 2> Task "Message"
 2> Task Parameter:Importance=high
 2> Task Parameter:Text=Result: Added Base url successfully.
 2> Message: Result: Added Base url successfully.
 2> Done executing task "Message".

Now, that’s a long fix for a simple issue!

Grep N’ Reassign Technique for Removing elements from Array of objects


Hello folks, missed me? This is a quick post for JavaScript/jQuery rookies and intermediates. Its been a couple of years that I’m mucking around with the JavaScript library called jQuery. Moving my focus suddenly from desktop applications on C++ or even C# made me confused on what this client side scripting language has become; a magic wand or just a party stunt thingy. Because as a C++ developer, there are lot of things that you may feel a euphoria upon seeing it working like a charm with JS while the same were nightmares in those well mannered programming languages.

I just want to share yet another party stunt (or a spell) which I found when I was in a serious thought of how to remove an object from an array by matching some attributes with out using any loops. I cannot give a guarantee on its performance benefits, but take a look at it. I want to call it Grep N’ Re-assign (I didn’t invent it, so giving name is a bit melodramatic I know).

If I have an array items and I want to remove a group of objects, say the ones with quantity field is ‘1’. So I would suggest the following way.

items = $.grep( items, function( e ) { return e.quantity != 1 });

That’s it! Instead of searching for the element by matching it manually using loops, we just filtered it using the grep function in jQuery library and re-assigned it to the same variable.