ASP.NET Web Pages With Visual Studio 2012
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.
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 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 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>
![ASPWbPg4.jpg](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_toOTrIPIEmlBTaEkJyLTKeM0DAdpezpDqwLMikc2V9Gc5fMPRoLjQ77oB3wRx455zNpS5irwRnOBdfMVQpXIoeu04zoPQkPWI1t8mDeYzmkXt0DR5_iNlk0Dxhzy_V6EIFmd-SVxK8-cx7ItcOJio0DL8-_9k6pKNwqS_vEYU3PKjVQcAw88NVAdF-G-Ls7eLLp_uLCxfK=s0-d)
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.
![ASPWbPg5.jpg](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tc9ktbElrxFNIdvmXMbE-WNvOKK0FbIxHyWBd-0PySIfMvZTcb9aM983SyxcsWXFACbcHUkdeeX9I5wrJRK7Pl5QF0vcr3agEjaFAyfje5hlT3Ikr-CevrYNWYgx2oCLMKkq9Pyhbnzvd7EQ04qHk8ICwPhCx-u1pTibXYM-V_q27aLqoG1V-yDqaN7UyCPrQVD5HWoHc=s0-d)
Step 6:
If you look at the page source, it is a clean HTML and there is no view state information and server-side code information:
![ASPWbPg6.jpg](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sIhgj1UwFKPcvjIOBeEQohq1Vxlbfx0y1RF0Mrq5-oAQ7jSbt_R_qD01kGghZxfIWaknmMTGdXWlPwWK3Fyk3b9c4MLZwbg5mU-jpHp6XX-P_CDvAD_EXbBihCEQn7UU7VMxIzqdmGZSdwGIU5rDRrYoXXCNUdfhD_ZOM1AZjYAOBznkBLt4X-jUfJDXRLEOlq5Ng2MrWp=s0-d)
@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.
Step 6:
If you look at the page source, it is a clean HTML and there is no view state information and server-side code information:
No comments:
Post a Comment