Description
The View is one of the components in the MVC architecture.The View acts like a User interface in ASP.Net web forms and is communicated with the end user through the controller. The controller contains the views and act as a mediator between the end user and the view.
In general, ASP.Net user requests are mapped to web pages from the browsers. Whereas in case of MVC, user requests from the browser are not mapped to view. They are mapped to "Controller's Action Methods".
Description
ASP.Net MVC supports 3 types of views.
- View Page or Normal View View Page is similar to a web form in the ASP.Net. View Page is inherited from the View Page Class.
- Master Page View or Layout View Master Page is similar to the master page in ASP.Net. Master Page View is inherited from the View Master Page Class.
- Partial View Page Partial View Page is similar to web user control in ASP.Net. Partial View Page is inherited from the View User Control Class.
Image
Description
Before adding the view,one have to add the controller. To know about "How to add the controller?", read the previous chapter and for now, Follow the below steps to add the view.
Step 1
Go to the Solution Explorer. Open the folder named as Views. Delete the folders which is seen under the Views folder. Right click on the View, that's going to bring a popup menu. Select Add->View as shown in the below figure.
Step 2
By clicking on the View, that's going to bring a new window. Where one can give their own View name, and then uncheck the checkbox Use a layout. Click on Add button as shown in the below figure.
Step 3
Then, the code will be generated as shown in the following window.
Note
All the views which have the extension name as .cshtml are called as razor views Step 4
Now, write the code as follows to print a simple statement.
[html]
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>HomPage</title>
</head>
<body>
<div>
Welcome to Asp.net MVC 5. <!-- write this statement to a simple print statement -->
</div>
</body>
</html>
[/html]
Step 5
Now, Click on the controller, the one which have been created previously as shown in the below figure.
Step 6
Now, write the code as follows in the controller.
[csharp]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace HelloMVC.Controllers
{
public class HelloMVCController : Controller
{
// GET: HelloMVC
public ActionResult Index()
{
return View();
}
public ActionResult GotoHome() //GotoHome will invokes the Homepage
{
return View("HomePage");
}
}
}
[/csharp]
Step 7
Press f5 to run the application.
The following window will appear in the browser.
Step 8
An error will be occurred as shown in the above figure,because of not creating any index file.
Type the following URL in the address bar and press Enter. Then, it will print the statement which have been given previously as shown in the below figure.
Description
In general, a view page is used to perform the required design for the user interface element within the ASP.Net MVC.
The view, which one create's is a class and will contain the following additional properties.
- Ajax
- Html
- Model
- TempData
- URL
- Master
- Master Location
- Session
- RouteData
- Response
- View Bag
- View Data
- View Context
- Write
Description
Ajax is used to set or get Ajax helper class, and used to render HTML in Ajax scenario.
AjaxHelper Class includes methods which support Client-Side Functionality.
Like as
Namespace supported by Ajax
System.Web.MVC.AjaxHelper- Asynchronous Forms
- Rendering Links
- Equals(Object)
- Finalize()
- GetHashCode()
- GetType()
- ToString()
Description
Model Property is used to get the model property of the associated view data dictionary object.
Description
TempData Used to get the Temporary Data required to pass to the view.
The Namespace for the TempData is System.Web.MVC.TempDataDictionary
Refer the later chapters to know about the TempData briefly.
Description
URL is used to set or get the URL for the render page.
Description
ViewBag is similar to ViewData but ViewBag supports Dynamic DataType.
Refer the later chapters to know about the ViewBag briefly.
Description
View Context is used to set or get the information and used to render the view.
Here, the information means Form Context, TempData, ViewData Etc.
Description
ViewData is used to set or get the Key and Value pair in the form of a dictionary and used to pass the data from the controller to the view.
Refer the later chapters to know about the ViewData briefly.
Description
Write property is used to get the Text Writer and used to render the view in response. Write property is used to write the Html output.
Description
A Strongly Typed View is a view which bind with any model. In general, View inherits from the Viewpage whereas Strongly Typed View inherits from the Viewpage<Tmodel>. Where Tmodel is a type of model.
The Strongly Typed View has the following Advantages.
- Automatic Scaffolding
- Compile Time Type Checking
- IntelliSense
Example
Follow the below steps for creating an application.
Step 1
Go to solution Explorer-> Right-click on the Models folder and Add->class. Give the class name as Employee. Write the following code under the class.
[csharp]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace StronglyTypedView.Models
{
public class Employee
{
public int EmpId { set; get; }
public string EmpName { set; get; }
public string EmpDesignation { set; get; }
public DateTime EmpDOJ { set; get; }
public double EmpSal { set; get; }
public int EmpDeptNo { set; get; }
}
}
[/csharp]
Step 2
Go to Solution Explorer->Controllers->HomeController.cs and Add the below namespace in HomeController.cs
[csharp]using StronglyTypedView.Models;[/csharp]
Write the following code under the HomeController.cs
[csharp]
public ActionResult EmployeeDetails()
{
Employee obj = new Employee();
obj.EmpId=1;
obj.EmpName="James";
obj.EmpDesignation = "Developer";
obj.EmpDOJ = DateTime.Now;
obj.EmpSal = 70000;
obj.EmpDeptNo = 10;
return View(obj);
}
[/csharp]
Step 3
Go to Solution Explorer-> Views->Right Click on View Folder->Add->View.
Give the view name as EmployeeDetails and write the following code under the EmployeeDetails.cshtml
[html]
@{
ViewBag.Title = "EmployeeDetails";
}
<h2>
Welcome to SPLessons Tutorials>
</h2>
<table>
<tr>
<td>@Html.Label("lblId", "Employee Id")</td>
<td>@Html.TextBox("txtId")</td>
</tr>
<tr>
<td>@Html.Label("lblName", "Employee Name")</td>
<td>@Html.TextBox("txtName")</td>
</tr>
<tr>
<td>@Html.Label("lblDes", "Designation")</td>
<td>@Html.TextBox("txtDes")</td>
</tr>
<tr>
<td>@Html.Label("lblDOJ", "Employee DateOfJoining")</td>
<td>@Html.TextBox("txtDOJ")</td>
</tr>
<tr>
<td>@Html.Label("lblSalary", "Employee Salary")</td>
<td>@Html.TextBox("txtSal")</td>
</tr>
<tr>
<td>@Html.Label("lblDeptNo", "Department Number")</td>
<td>@Html.TextBox("txtDeptNo")</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="SUBMIT" name="btnSubmit" /></td>
</tr>
</table>
[/html]
Step 4
Change the Action name in the RouteConfig.cs
Press f5 to run the application. Then, the following output will appear in the browser as follows.
