How To Create A Website With Visual Studio 2012

Updated date Jun 22, 2012

116.4k
1

This article is about ASP.Net web pages that are a combination of HTML, C# and Razor syntax which produces dynamic web pages.

This article is about ASP.Net web pages that are a combination of HTML, C# and Razor syntax which produces dynamic web pages. They are not ASP.Net Web Forms because we can't use any ASP.Net server-side control and it is not the same as ASP.Net MVC because it does not follow the MVC design pattern; it uses an inline page model.

For this sample application, I have used Visual Studio 2012 RC, ASP.Net Web Page2 Betac and .Net Fx 4.5 RC.

First we will try with simple hello world application.

Step 1: Create a new web site in VS 2012 RC.

Step 2: Select Visual C# and select ASP.Net Web Razor V2. Give the web site name the "HelloWorld" as depicted in the following image:

Step 3: Once you have created the web site, you might add many existing pages, folders and assembly references. I will explain that in a different article.

Right-click on the project name in Solution Explorer-> Add New Item.

You will see the following Add new Item window and select new Content Page and give it the name "HelloWorld.cshtml". Refer to the following image:

Step 4:

Double-click or open the newly added "helloworld.cshtml" page:

Here you will see, two sets of code blocks:

Server side code block and
HTML code block.

1. Server side code block

The server-side code block starts with "@{" and ends with the "}" symbol.

Ex :

@{
Page.Title = "Title goes here" ;
//Layout = "Your Layout Page goes here";
}

Page.Title refers to the page title and you change this title using server-side coding/programming.

Layout refers to the URL for the layout page.

If you want to call a server-side variable or if it is a single-line statement, then start the one-line coding with the "@" symbol.
Ex :

@ sayhello

2. HTML code block

The HTML code block is just a placeholder for the HTML.

Ex:

< div > </ div >

Now we will do some changes on the existing code. Page.Title = "Hello World" ;
Layout = "~/_SiteLayout.cshtml" ;
var sayhello = "Hello World ! Welcome to Asp.net Web Pages 2." ;

The above code creates a new variable called "sayhello" that can be used anywhere in the current page.

To display this variable value, we need a HTML control. In this case, I have created a span tag inside the div control which is in a HTML code block:

< div >
< span >
</ span >
</ div >

To call the sayhello variable, the following code should be used: @ sayhello

Finally, the HTML code block looks like the following one: < div >
< span >
@ sayhello
</ span >
</ div >

Press F5 to run the application in your default browser.

Step 5:

You will see the page title as "Hello World - My ASP.NET Web Page". You might be wondering, from where "- My ASP.NET Web Page" is coming. This is coming from the Layout page. As of now, just ignore this text "- My ASP.NET Web Page".

In the body of the page you will see, "Hello World ! Welcome to Asp.net Web Pages 2." This value comes from the server-side variable @sayhello to HTML code block.

The Header and Footer sections are coming from the layout page.