Wednesday, 20 November 2013

How to Add View in Mvc.4.0

Adding a View

The controller is named MyFirstController and the first method above is named Index. After we create view with this method Index (right click on index method and Add View)………

In this section you're going to modify the MyFirstController class to use view template files to cleanly encapsulate the process of generating HTML responses to a client.
You'll create a view template file using the Razor view engine introduced with ASP.NET MVC 3. Razor-based view templates have a .cshtml file extension, and provide an elegant way to create HTML output using C#. Razor
minimizes the number of characters and keystrokes required when writing a view template, and enables a fast,fluid coding workflow.
Start by creating a view template with the Index method in the MyFirstController class. Currently the Index method returns a string with a message that is hard-coded in the controller class. Change the Index method to return a View object, as shown in the following code:




There  are two view Engine used in MVC 3.0 and later version One is Razor (CSHTML) and another is ASPX(C#).If you want to use ASPX(C#) Engine then you have to implement this code in the Views Section—ControllerName Home---Index.aspx  




<div>

<%: "Today Date is"+System.DateTime.Now %><br />
<% for (int i=0; i<20; i++)
{ %>
<span style="color:Red; font-size:large;"><b><%: "value of i = "+i %><br/></b></span>
<%
}%>

</div>




If you want to use Razor Engine then you have to implement this code in the Views Section—ControllerName MyFirst---Index.cshtml



The Index method above uses a view template to generate an HTML response to the browser. Controller methods (also known as action methods), such as the Index method above, generally return an ActionResult (or a class derrived from ActionResult), not primitive types like string.
After Click Add you find this step for Code



@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<p>Hi this is  Mvc First Program</p>

Time is<span><font color="Green">@System.DateTime.Now</></span><br/>

@for (int i = 0; i <= 20; i++)
{
<span><font color="Red" >@i</font></span><br/>
}
</div>
</body>
</html>




Before running this project go to RouteConfig.cs  which in exist in  App_Start  folder  and check the name of Controller and the Controller Method which is mentioned in action tag. If you want to change the controller Go to Controller tag and put the name of your desired controller, same with the method of controller , The tags are highlighted below:




public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "MyFirst", action = "Index", id = UrlParameter.Optional }
);
}
}




When you  Run MVC  Project with F5  Its shows output


1 comments: