How to create a simple Hello World website in ASP.NET MVC using Razor Syntax:
(Note: I am using Visual Studio 2012 )
Step 1:
Create a new empty mvc
project in razor syntax.
Fileà Newà Project à Select Web in the left side panel à ASP .NET MVC4 Web applicationàEnter the name as follows”SimpleHelloWorld”à Then Click ‘OK’.
Step 2:
Select which type of view engine you want to use.
EmptyàRazorà Click ‘Ok’.
(Note:If
you have made an testing select the check box near create a unit test project.)
Step 3:
View
Solution Explorer its created many folders named as
App_Data,App_Start,Controllers,Models,Views.... etc.
Model: In
this folder used to create the database or Class Model files.It refers to a set
of classes that describes the data that the application works with.In addition
these classes define the business logic that governs how the data can be
manipulated.
View: In
this folder used to create design and view engine files.It refers to the
components that define an application’s user interface.For example, the login
form that contains text boxes and buttons.
Controllers: In
this folder used to create the class files(.cs).It refers to a set of classes
that handle communication from the user and the overall applicaion flow.A
controller responds to user input,communicates with the model, and decides the
view to render.
App_Start:
RouteConfig.cs – Route map
of the wep application.
Ends with .cshtml -
These files contain the user interface code.
Ends
with .cs - These files contain C#
code.
Step 4:
Creating
new “HomeController”
Right Click Controllers FolderàAddà ControlleràRename Controller name as
follows “HomeController”.
Step 5:
Create
a new folder name “Home”.
Right Click Viewsà Addà New Folderà Home
Step 6:
Now
create a new view inside home folder .
Right Click Home Folderà Addà Viewà Rename view name as follows “Index”à Click Add.
Step 7:
Now
double tab the HomeController.cs file .Enter code below and save it.
ViewBag.Message=”Simple Hello World”;
ViewData:
ViewData is a dictionary
of objects from the System.Web.Mvc.ViewDataDictionary
class.It enables you to pass the data
between a controller and view.Here ,values can be set using key/value pairs in
the controller action method ,as shown in the following code snippet:
ViewData[“Message”]=”Welcome
to our website”;
ViewData[“ServerTime”]=”DateTime.Now”;
You can acess the values
added in the preceding code by using the Razor syntax, as shown below.
<p>
The
Message is:@ViewData[“Message”]
The
Date and Time is :@ViewData[“ServerTime”]
</p>
ViewBag:
ViewBag is a dynamic
object that allows passing data between a controller and a view.You can add
properties of multiple types and their values by using the ViewBag object in a
controller action method.The syntax of the code snippet:
ViewBag.Message=”Welcome
to our website”;
ViewBag.ServerTime=DateTime.Now;
You can acess the values
added in the preceding code by using the Razor syntax, as shown below.
<p>
The
Message is:@ViewBag.Message
The
Date and Time is :@ViewBag.ServerTime
</p>
Step 8:
Then double tab the Index.cshtml file.Enter code in <p> tag in below and
save it.
<div>
<p>
@ ViewBag.Message
</p>
</div>
Step 9:
Now go to App_Start folder double tab the
RouteConfig.cs file.
Check the below code snippet .
Check the below code snippet .
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action
= "Index", id = UrlParameter.Optional }
);
}
The above code represents
and checks both folders.
Controller=”Home”-
Action=”Index”
Step 10:
Finally run the application the output will be.
