---
title: "MVC Application using Razor View"  
description: "This artice simply demonstrate how to create ASP.NET MVC application using razor view engine and how to use data access technology i.e. Entity Framewo"  
author: "Chris Anderson"  
published: 2012-09-10  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/997/mvc-application-using-razor-view  
category: "asp.net mvc"  
tags: ["asp.net mvc"]  
reading_time: 5 minutes  

---

# MVC Application using Razor View

This artice simply demonstrate how to create ASP.NET MVC application using razor view engine and how to use data access technology i.e. Entity Framework(EF) while creating ASP.NET MVC 3 application.\

Before creating the MVC 3 Application in Visual studio create a table in the database with name and structure as given below:

```
CREATE TABLE [dbo].[Students]
(
      [ID] [INT] IDENTITY PRIMARY KEY,
      [NAME] [VARCHAR](50),
      [AGE] [INT],
      [CITY] [VARCHAR](50)
)
```

You can create applications using either Visual Basic or Visual C# as the programming language. Select Visual C# on the left and then select ASP.NET MVC 3 for this sample. Name your project "MvcSampleApp" and then click OK.

![MVC Application using Razor View](https://www.mindstick.com/mindstickarticle/e56c9dca-f331-455d-810d-fdeac1e14a6c/images/3a75b1d0-92cd-471c-9c67-dd456fca5a57.png)

In the New ASP.NET MVC 3 Project dialog box, select Internet Application. Check Use HTML5 markup and leave Razor as the default view engine.

![MVC Application using Razor View](https://www.mindstick.com/mindstickarticle/e56c9dca-f331-455d-810d-fdeac1e14a6c/images/6b07ac5f-ba8e-4ade-bb24-bbbac468c01d.png)

In Solution Explorer, right click the Models folder, select Add, and then select Class.

Name the class Student.

Add the following four properties to the Student class:

```
  public class Student
    {
        public int ID
        {
            get;
            set;
        }
 
        public string NAME
        {
            get;
            set;
        }
 
        public int AGE
        {
            get;
            set;
        }
 
        public string CITY
        {
            get;
            set;
        }
    }
```

We'll use the student class to represent student in a database. Each instance of a Student object will correspond to a row within a database table, and each property of the Student class will map to a column in the table.

In the same file, add the following StudentDbContext class

```
public class StudentDbContext : DbContext
{
        public DbSet<Student> Students
        {
            get;
            set;
        }
}
```

The StudentDbContext class represents the Entity Framework student database context, which handles fetching, storing, and updating Student class instances in a database. The StudentDbContext derives from the DbContext base class provided by the Entity Framework.

After adding Model class, open the application root Web.config file.

Add the following connection string to the <configuration> element in the Web.config file.

```
<connectionStrings>    <add name="StudentDbContext"connectionString="Data Source=.\SQLEXPRESS; Initial Catalog=sample; Integrated Security=true;"providerName="System.Data.SqlClient"/></connectionStrings>
```

Add a controller class. In Solution Explorer, right-click the Controllers folder and then select Add Controller.

![MVC Application using Razor View](https://www.mindstick.com/mindstickarticle/e56c9dca-f331-455d-810d-fdeac1e14a6c/images/650c8faf-6397-4b4c-aa5c-c1aada41a6c2.png)

Select the following options:

· **Controller name:** StudentController.

· **Template**: Controller with read/write actions and views, using Entity Framework.

· **Model class**: Student (MvcSampleApp.Models).

· **Data context class:** StudentDbContext (MvcSampleApp.Models).

· **Views:** Razor (CSHTML). (The default.)

![MVC Application using Razor View](https://www.mindstick.com/mindstickarticle/e56c9dca-f331-455d-810d-fdeac1e14a6c/images/bb6195a0-63bc-4f48-bc10-2871ed4129d4.png)

Click Add. Visual Web Developer creates the following files and folders:

· A **StudentController.cs** file in the project's Controllers folder.

· A **Student** folder in the project's Views folder.

· Create.cshtml, Delete.cshtml, Details.cshtml, Edit.cshtml, and Index.cshtml in the new Views\Student folder.

![MVC Application using Razor View](https://www.mindstick.com/mindstickarticle/e56c9dca-f331-455d-810d-fdeac1e14a6c/images/2b9fe0d2-9611-49cb-bf08-51381d0e0b50.png)

After adding StudentController, add a **HomeController (the default controller)** as shown below:

![MVC Application using Razor View](https://www.mindstick.com/mindstickarticle/e56c9dca-f331-455d-810d-fdeac1e14a6c/images/5e701420-2434-4343-9c8b-30e7f3e085f6.png)

Modify the Index action of HomeController as shown below:

```
public class HomeController : Controller
{
        public ActionResult Index()
        {
            return RedirectToAction("Index", "Student");
        }
}
```

It will redirect to the **Index** method of **Student controller**.

Now run or debug your application and add some student records. It will something look like as shown below:

![MVC Application using Razor View](https://www.mindstick.com/mindstickarticle/e56c9dca-f331-455d-810d-fdeac1e14a6c/images/3506eb1f-fd6e-442d-bc5e-4141c6bfed9e.png)

You can also edit and delete the records and view the details of student. \

![MVC Application using Razor View](https://www.mindstick.com/mindstickarticle/e56c9dca-f331-455d-810d-fdeac1e14a6c/images/6ff16179-fb26-4193-8e43-1a90077d21d2.png)Further, I am going to explain how to add search functionality in order to search the student by their name and city.

Add the following code in the Index.cshtml to implement and display the search functionality to the user. Add the following code below the@Html.ActionLink:

```
@Html.ActionLink("Create New", "Create")
@using (Html.BeginForm("Index","Student",FormMethod.Get))
{
     <p>City: @Html.DropDownList("cityList","All") Name: @Html.TextBox("stname")</p>
     <input type="submit" value="Search" />
}
```

Modify the Index action of StudetController as shown below:

```
public ViewResult Index(string cityList, string stname){            //select all student records            var students =  from s in db.Students                           select s;              //get list of cities            var citylist = from c in students                           orderby c.CITY                           select c.CITY;              //set distinct list of cities in ViewBag property            ViewBag.cityList = new SelectList(citylist.Distinct());              //search record by city and name              if (!string.IsNullOrEmpty(stname))                students = students.Where(m => m.NAME.Contains(stname));              if (!string.IsNullOrEmpty(cityList))                students = students.Where(m => m.CITY == cityList);                          return View(students); }
```

Run an application. Now you can easily search the records of student on the basis

\

of their names or city or both.

![MVC Application using Razor View](https://www.mindstick.com/mindstickarticle/e56c9dca-f331-455d-810d-fdeac1e14a6c/images/8ad60cf5-b93d-4bde-8656-4890f86c18b0.png)

Thanks for reading this article.

---

Original Source: https://www.mindstick.com/articles/997/mvc-application-using-razor-view

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.