Migrate an MVC 3 site to Umbraco

To migrate an MVC 3 website to Umbraco we first need to download Umbraco CMS which can be downloaded here

Once downloaded you will have a file called: UmbracoCms.6.1.6.zip

All contents of this file need to be copied into your website folder (all except the folders “App_Code” and “Bin”)

After this you need to open the website in Visual Studio

In Visual Studio you need to drag and drop all these newly copied files into the Solution Explorer so they are linked to the main solution

Following this, you need to open Package Manager Console and type the following: Install-Package UmbracoCms.Core –Version 6.1.6 and press Enter which should start a package installation

Once this completes, open UmbracoSettings.config and update the default rendering engine to Mvc as shown below:

<defaultRenderingEngine>Mvc</defaultRenderingEngine>

Now you need to create an empty database for Umbraco

Once the database is created you need to build the solution and run it

This should take you to the umbraco configuration wizard

Once you go through all the steps of this wizard your new Umbraco backed website should be configured with the new database you just created (it will ask about that database during the wizard)

There is a small change required at this point to make the solution work. You need to inherit all your controllers from the SurfaceController class (Umbraco.Web.Mvc.SurfaceController) as shown below:

public class HomeController : SurfaceController

This should complete your migration.

In order to open the website you need to know how the controllers will be routed by umbraco. They are routed in the following way:

/umbraco/surface/{controllername}/{action}/{id}

A noteworthy migration problem

During this migration I came across a very tricky problem. If you get the following error when adding a new controller:

You just need to delete the following reference and the error will be gone:

Our.Umbraco.uGoLive.47x.dll

Basic Ajax request

If we have to create an application that uses Ajax to dynamically get and manage data in an MVC 3 project we have to create a controller action that will deal with the Ajax request and an Ajax call at the user interface level which will call the action and manage the output. To implement this we first need to write down the following controller action.

Controller: 

public class HomeController : Controller

{

                public ActionResult TestAjax(string input)

{

List<string> output = new List<string>(){"a","b","c"};

output.Add(input);

       return Json(output, JsonRequestBehavior.AllowGet);

}

}

This is just like a normal controller action which takes input in the form of a string (called input), appends it to the list ‘output’ and returns the result as a JSon object (instead of a view which typical controllers return).

After this we need to write the following jQuery code to call this action and manage its result.

 

jQuery:

$(document).ready(function () {

   

    $(".link").click(function () {       

        $.ajax({

            type: "GET",

            url: "/Home/TestAjax",

            data: {input: "d"},

            dataType: "json",

            success: function(data) {

                alert(data);

            }

        });

    });

});

In the code above we have a javascript function that is executed whenever we click the control with class "link". This function creates a GET request to the url “…/Home/TestAjax” (which you might have noticed are the names of the controller and action we created above) and passes "d" to the actions’ input parameter “input”. The controller then creates a list containing "a,b,c" and appends the input parameter "d" to it and returns the final string i.e "a,b,c,d" as a JSon object. Once the controller successfully returns this output, the javascript function in the “success” parameter is executed, which gets the output provided by the action in its own variable “data” and shows it as an alert as shown below:

And that is it, a simple Ajax call made.

P.S: You might have noticed that this code is added to the document.ready function. This is done because if we don’t place it there we would have to specifically add it to the control’s onclick event.

Preview web.config transforms

If we have a solution that gets deployed onto a test environment before going live we will have different connection strings for each environment and various other settings that change from one environment to another.  In such cases, while deploying our solution to different environments we would have to change our web.config files to match each environment.

Let's suppose we have got the following connection string in our web.config file:

<add name="mainDB" connectionString="con1" providerName=" EntityClient" />

which, during deployment to the test environment changes to this:

<add name="mainDB" connectionString="conb" providerName=" EntityClient" />

To do this, we can maintain multiple web.config files for each environment and manually copy paste them during deployment or create a web.config transformation file which will automatically do it for us, saving us from maintaining multiple web.config files. 

To create a web.config transformation file we need to go to Build -> Configuration Manager. Once there we need to open the dropdown labelled "Active solution configuration" and click "< New...>". After this we need to follow the steps to create a new configuration. Once created, you will notice that the Web.config file will have a new file listed under it called web.[environment_name].config (Where environment_name is the name you just specified).

This new file is the web.config transformation file for your specified environment. Once we have created this file all we need to do is write down the differences between the existing and transformed web.config file in a proper syntax and everything is sorted during deployment. (To learn more about this syntax you can visit this page.)

 

As an example we can use the following syntax to transform the connection strings discussed above:

<add name="mainDB" connectionString="conb" providerName=" EntityClient" xdt:Transform="SetAttributes" xdt:Locator="Match(name)" />

The above line says: look for a web.config key whose attribute “name” is "mainDB"  and set all its attributes to the new value(s) listed. So the connection string becomes “conb” and the provider name becomes “ EntityClient” (if we had provided a different provider name here, that would have overridden the existing value).

Once this is all done, we need to test whether the transformation works fine. One way of doing it is to go through the entire build process and check the web.config file that comes out of it. Another way of doing this is to put the existing web.config file and the transformation web.config file onto a dodgy server and test the output (there are many freeware online tools available to do this).

Alternatively, you can download a visual studio extension called Slow Cheetah which will make it as easy as two clicks to see your transformed file.

This extension adds a new option when you right click on a web.config transformation file called "Preview Transform" (as shown above).

Once you click "Preview Transform" you are provided with a very easy interface which shows you both files side by side and that’s it, job done no need to build/deploy your solution or post your data onto dodgy servers.