Categories
.NET ASP.NET MVC Setup Umbraco

Umbraco CMS with ASP.NET MVC – Part 3 Inside Visual Studio

In this post for Umbraco CMS we will learn regarding creating Visual Studio Solution. Main motive behind creating VS Solution is to work in proper structured manner and when work in team it is helpful so that Team can Commit their file changes under Source Control when developing with Umbraco CMS.

In the Introduction post you can read the brief roadmap about posts on Umbraco CMS and MVC development. Part 2 of this series describes about Umbraco installation and IIS configurations.

For this post I have used Visual Studio 2013 but 2012 version will also do. This version of Umbraco is using .NET Framework 4.5

Step 1 – Create Blank Solution for UMBRACO CMS

Start Visual Studio and use the shortcut for create new project i.e. Ctrl+Shift+N

Create a Blank Visual Studio Solution.

In Visual Studio 2013, Navigate to ‘Visual C#‘ > ‘Web’ > Select ‘ASP.NET Web Application‘ as can be seen in the screen below.

Create Empty Web Solution

Note: If you are using Visual Studio 2012 or else the step to create Blank Solution may be different. For example in Visual Studio 2012 you can navigate to ‘Visual C#’ > ‘Web’ > Select ‘ASP.NET MVC 5 Empty Project’.

Considering you have followed the Part 2 regarding Umbraco Installation and Site root folder; keep the backup of the Umbraco site root folder specifically web.config, Global.asax and ‘Views’ folder.

Then uncheck the option for “Create directory for solution”

Set the Location to the Umbraco site root folder.

Set the Solution name. Here we have created Solution with name “UmbracoMvc” and then click “OK”

Next in the “New ASP.NET Project” dialog, Select template “Empty” and tick the “MVC” check box option

Select Blank Application Type

Then click “OK”.

Step 2 – Verify the Solution Structure and Physical Files

After this you can verify the folder structure is created as below screen. Here “Umbraco” is the Solution Folder and “UmbracoMvc” is the Project Folder.

Blank Solution Directory View

After we create blank solution, Visual Studio replaces the existing Umbraco web.config and other imp. files due to this behaviour of VS; we need to restore the files and folders (shown in below screen) from the original version that we have in backup, that we took in previous step, to “UmbracoMvc” project folder.

Copy extracted source code to IIS website root directory

Now we have successfully created blank solution and recovered the files needed. So we need to verify that the Umbraco site is still working at URL ‘http://UmbracoMvc/’.

STEP 3 – Include NECESSARY files in the Solution

Open Visual Studio’s Solution Explorer and select option “Show All Files” highlighted in screen below.

Select Show All Files in Visual Studio Solution

Next include the files and folder as required but do not include the folders named “Umbraco” and “Umbraco_Client” because those part we will not work. I have shown in below screen what I have included in my solution.

Files and Folder Included as part of the Umbraco Web Application project

STEp 4 – Umbraco MVC Configurations

In Umbraco MVC, we generally not define routes. For this reason we will clean up the routes definition from “RouteConfig.cs” as shown in screen below.

Remove or Empty the Route Config

Next we will configure the Umbraco site for default rendering to MVC as shown in the screen below.

Open the “umbracoSettings.config” from “Config” folder and change the template’s default Rendering to “Mvc”.

Default Rendering Engine to MVC

Note: This will affect the creation of new Templates from Umbraco Client/Administration region. Also in new version of Umbraco default rendering is ‘Mvc’, so you can skip this part for Umbraco version 7.1.1

Conclusion

So we have completed the exercise to Create Visual Studio Solution for Umbraco Web development and we also did configurations for ASP.NET MVC 5 version. After this much you can add the source files and folders to any Source Control that works for you. Your Team will love to work in Umbraco CMS after these efforts.

In the next post we will see the how Umbraco CMS works with MVC or in other words how to cook the ASP.NET MVC recipe in Umbraco and also migration points for converting existing ASP.NET MVC sites to Umbraco MVC.

 

Keep sharing your ideas and suggestions in the comments.

Liked this post? Then spread this post to your friends.

 

Categories
.NET ASP.NET IIS MVC Setup Umbraco

Umbraco CMS with ASP.NET MVC – Part 2 Installation

In this post we will see how to start with Umbraco CMS website development with ASP.NET MVC.

In previous Introduction post here you can read the brief roadmap about posts on Umbraco MVC.

Step 1 – Download Latest Umbraco release

Download fresh installation of Umbraco CMS from Official Umbraco Site. For this post Umbraco version 7.1.1 is used and use full source code release package highlighted in bold “UmbracoCms.7.1.1.zip” in screen below.

Download Umbraco full source code release package

Step 2 – Extract the package

After downloading release package in ‘.zip’ format extract the package to temporary location.

Extract Umbraco source code to temporary location

 

Step 3 – Setup the website in IIS

After extracting the release package, the next step is to copy the extracted content to IIS web root directory by creating new folder for the Umbraco MVC website or configure the extracted folder in IIS directly in next steps.

The extracted content will look something as shown below screenshot

Copy extracted source code to IIS web root directory

Now Add a new Website in IIS. To open IIS manager you may use the cmd command ‘inetmgr.exe’.

Add a Website in IIS

Now the Add Website configuration dialog will show up. Configure the Website as below with local domain binding ‘umbracomvc’ on port ’80’

Add a Website - Configuration Dialog in IIS

Now the IIS Website is configured.

Step 4 – Create Local-only domain binding

We have configured the IIS Website with local binding definition in above steps but to correctly resolve and browse host name ‘http://umbracomvc/’ we need to configure the hosts entry in the local system with local IP address. Hosts file configuration and file path is shown in screenshot below.

Edit hosts file to point to local only domain

Note: Open the notepad or notepad++ in Administrator mode. Additionally after this configuration use the cmd command ‘ipconfig /flushdns’

Step 5 – Start Umbraco Installation

After above steps browse the website in browser at URL ‘http://umbracomvc/’ (refer ‘Host Name’ configured in IIS Website Configuration Dialog for the URL if changed in your case). When browsing for first time Umbraco will automatically initiate the Installation wizard and ask for following – Configure the licence (if any), Database connection, User credentials for Umbraco Admin, Starter Kit theme.

Few excerpts from the installation wizard are shown below:

1. Installation Welcome screen

Open browser and start umbraco installation

2. Select ‘No thanks, do not install a Starter Kit’ in Starter Kit Selection Step

Select No Starter Kit

3. Final step screen

Umbraco Installation final step

4. Verify the Umbraco Admin panel access at http://UmbracoMvc/Umbraco/ with configured user credentials in Installation wizard

Umbraco Administration

Note: Above Installation wizard screenshot were captured using Umbraco CMS version 7.0.4 but later upgraded to Umbraco CMS version 7.1.1

Conclusion

In this post we went thru steps to download & install Umbraco CMS on local system. In the next post we will see how to create Visual Studio Solution for this website.

 

I hope this post was easy to understand and screenshot images helped you to visually connect with the minimum required steps.

If you liked this kindly like or subscribe. Keep comments flowing if you have any ideas or suggestions.