Categories
.NET ASP.NET MVC Umbraco

Umbraco CMS with ASP.NET MVC – Part 4 The MVC Recipe

Dear readers,

Its been very long time that I have written any blog posts and in meantime there has been significant changes in Umbraco and its documentation on ASP.NET MVC.

Few updates on this topic before I start,

  1. ASP.NET MVC is now enabled out of the box rather than WebForms in Umbraco.
  2. This blog series was first started with Umbraco version 7.1.1 but concept is same in latest version 7.2.8 also.
  3. Documentation on ASP.NET MVC support for Umbraco has improved a lot.

In this post we will see how to develop website using Umbraco CMS and ASP.NET MVC.

In the Introduction post you can read the brief on this blog series.

Before starting please note that this may take a while to understand the concept wholly but let us try & understand, also you can refer Umbraco documentation such as Implementing Custom controller.

There are two parts of this story ASP.NET MVC side and Umbraco side.

First Part of this story – ASP.NET MVC

First let us see what we have in ASP.NET MVC part of the story. So we have three basic things to know. It is possible that you know these things already so you may skip to next section –

  1. Model
  2. View
  3. Controller

Concept MVC Recipe in Umbraco CMSBrief for each of these is –

Model

Model is POCO which contains getter and setter properties and sometimes we have ViewModel for certain complex scenarios.

View

View is just outputting html. View is written in Razor sharp syntax in .cshml or ASP.NET syntax in .aspx

Controller

Controller is C# class. It is the main class which controls how the request would be served. It knows what Model and View will go together, How to validate incoming request and application data whereabouts. As you might know that there are many ways controller works; it all depends on requirements and skill-set of the developers working on the solution.

Second PART OF THIS STORY – Umbraco Page

Now second part of the story – Creating a page in Umbraco. So we have three basic things here to know,

  1. Document Type
  2. Template
  3. Content Item

Building Blocks of an Umbraco PageBrief for each of these is –

Document Type

Document Type is the definition content item. Like we define database table and columns in SQL, here we define the properties that we require in a Page. Each Document Type has Standard Values associated with it. Standard Values are to define default property values that gets initialized as a new Content is created. We can image this like constructor of a Class. For sake of simplicity Standard Values are not depicted in the diagram.

Now to we will see how Document Type looks like as we talk about this.

Document Type
Document Type ‘HelloWorld’ that has Template with same name.
Properties of Document Type
Properties tab of Document Type

Above image shows the properties of Document Type. For example purpose here Document Type ‘HelloWorld’ has one property defined as ‘Page Title’. To use this property in code we refer this using Alias i.e. ‘pageTitle’, which is also shown in the image above.

Template

Template is the Layout definition content item. Template file extension can be .aspx and .cshml depending on configuration. We can imagine ‘Template’ as two-dimensional thing, one is Logical i.e. Content Item and other is Physical i.e. html file (.chtml or .aspx). As shown in diagram each Template has association with Content Item and both exists independently.

Here is how Template looks like.

Template alongwith View in Visual Studio
Template along with View in Visual Studio

In the image above we can see how Template in Umbraco is directly related to View in Visual Studio. To make a clear understanding here, two different screens are stitched together in the image.

Content Item

To create new Page we need to create Content Item. Content Item is the central part of all three, sometimes also referred as Web Page. Content Item is based on Document Type and presentation is controlled by Template. Also I have noticed practices to define Content Items which does not have any functional presentation, it means they are nothing but just Data Repository which can be reused anywhere in the Website such as Navigation, Contact Information, Office Address, etc.

So here is how Content Item looks like.

Content Item
Content Item

Reference Book

Read Information Architecture for more regarding how to structure and re-purpose data in Content Management System.

Refer above UML diagram to understand the relationship of Document Type, Template and Content Item.

I hope everything is clear until this point. Now comes the Final part where we see how the ASP.NET MVC and Umbraco work together.

Final Part of the Story – ASP.NET MVC + Umbraco

Here we will try to relate each concept from ASP.NET MVC to Umbraco,

MVC Model== C# Model

There is no special requirement for creating Model classes. However by default Umbraco layout uses RenderModel class in Controllers but no hard dependency.

Model in Visual Studio
Model in Visual Studio

MVC Controller== Document Type Name

Document Type name suffixed with ‘Controller’ becomes Controller.

For example Document Type with name ‘HelloWorld’ becomes ‘HelloWorldController’ Controller.

By default Controller inherits from SurfaceController but if we intend to write custom logic within Controller then it should inherit from RenderMvcController

MVC Action method name== Template Name

Controller should always have default Action ‘Index’ and otherwise we can create Action with any name e.g. ‘GetProducts’ Action.

Note that if Umbraco engine is not able to map request to any defined Actions in the Controller then default action ‘Index’ of that Controller class will get executed.

Controller and Action in Visual Studio
Controller and Action in Visual Studio

Concluding

Therefore, each Content Item of Umbraco maps uniquely to one Controller and one View only. We can change which View should get executed for particular Content Item by selecting appropriate Template directly on Content Item or at the Document Type.

Here is the final output how this whole stuff looks like and This just starting of the entire story that we can build with Umbraco and ASP.NET MVC.

Hello World Page
Hello World Page

I hope this helps you and do comment for any suggestions or questions.

Categories
.NET C#

Regular expression for US and Canada phone number

Regular Expressions
Regular Expressions (Photo credit: Jeff Kubina)

This a quick post regarding how to validate US and Canada phone number in very possible formats.

Requirements:

To determine whether a user entered a North American phone number in a common format, including the local area code. The supported formats are 1234567890, 123-456-7890, 123.456.7890,  123 456 7890, (123) 456 7890, and all related combinations. If the phone number is valid, we will convert that our standard format,  (123) 456-7890, so that the phone number records are consistently recorded.

Suggested expression: ^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$

Valid phone number series for the expression:

  • 123-456-7890
  • 123 456-7890
  • 123-456 7890
  • (123)-456-7890
  • 123 456 7890

 

.NET C# Code Snippet

string userInput = txtPhoneNumber.Text;

Regex regexPhoneNumber = new Regex(@"^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$");

if (regexPhoneNumber.IsMatch(userInput))
{
	string formattedPhoneNumber = regexPhoneNumber.Replace(userInput, "($1) $2-$3");
}
else
{
	// Invalid phone number
}

The following layout breaks the regular expression into its individual parts, excluding the repeating groups of digits:

^ Assert position at the beginning of the string.
\( Match a literal “(“
  ? between zero and one time.
( Capture the enclosed match to back reference 1
  [0-9] Match a digit
{3} exactly three times.
) End capturing group 1.
\) Match a literal “)”
? between zero and one time.
[-. ] Match one character from the set “-. “
? between zero and one time.
? [Match the remaining digits and separator.]
$ Assert position at the end of the string.

Here, ‘^‘ and ‘$‘ are meta-characters named an anchor or assertion. ‘^ is used to mask the start of regular expression and $ is used to mark the end. ‘$’ is used to stop matching too much string into final result than required.

 

For people seeking more information regarding the expression are suggested to visit detailed post here: http://blog.stevenlevithan.com/archives/validate-phone-number