Create First Application using MVC Framework

December 03, 2017 0 Comments A+ a-

ASP .Net

Let us start to create our first application using ASP .NET MVC Framework.
We will learn all the related components in our upcoming article.

Step -1 
Open visual studio from all programs.

Step - 2
Select File --> New--> Project
New project pop up will open on your screen.
Choose web under Visual C# menu in Template categories.
Select "ASP .NET Web Application "
Change Project Name on name field.
Change project path as you wish.

Please find the below screenshot fig - 3.1 & 3.2 for your reference.

Create First Application using MVC Framework
Fig -3.1

Create First Application using MVC Framework
Fig - 3.2
Click OK button.
Step - 3
New "New ASP.NET Prject" popup will open.
Select template type empty or MVC
Check the MVC checkbox under add folders and core reference.
Please find the below screenshot fig - 3.3 for your reference.

Create First Application using MVC Framework
Fig - 3.3
Create First Application using MVC Framework
Fig - 3.4
Picture Fig - 3.4 describe the folder structure of MVC Project.
It can visible under Solution Explorer.

Step  - 4 
Create a new class file in model folder.
Here we are going to create new student model "StudentModel.cs" in our MVC Application.
Please find the below screenshot Fig - 3.5 for your reference.
Create First Application using MVC Framework
Fig - 3.5
StudentModel.cs :-
namespace FirstApplication.Models
{
    public class StudentModel
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }
}

Now our model is ready to use.

Step -5 
Create a new controller in our Controller folder.
Here we are going to create new Home controller "HomeController.cs" in our MVC Application.
Please find the below screenshot Fig - 3.6, 3.7 & 3.8 for your reference.
Create First Application using MVC Framework
Fig-3.6

Create First Application using MVC Framework
Fig - 3.7

Create First Application using MVC Framework
Fig - 3.8
HomeController.cs :-
using System.Collections.Generic;
using System.Web.Mvc;
using FirstApplication.Models;
namespace FirstApplication.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            List< StudentModel> studentModel = new List<StudentModel>() {
                new StudentModel { ID=1, Name="Neil"},
                new StudentModel {ID=2, Name="Lipsa" }
            };
            return View(studentModel);
        }
    }
}

Step - 6 
This is our final step.
Create a new view in our View folder.
Here we are going to create new Index view "Index.cshtml" under Home folder in our MVC Application.
Creation of View:-
Right click on Index action name in controller then select add view menu.
Please follow the below screenshot Fig - 3.9 & 3.10 for creation view in MVC Application.

Create First Application using MVC Framework
Fig - 3.9

Create First Application using MVC Framework
Fig - 3.10
Index.cshtml :-
@model IEnumerable<FirstApplication.Models.StudentModel>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
       <table border="1">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.ID)
            </th>
            <th>@Html.DisplayNameFor(model => model.Name)</th>
        </tr>   
    @foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.ID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
        </tr>
    }   
    </table>
</body>
</html>

The above code will generate automatically. 

Step - 7 
We are completed successfully our MVC application. We are going run the application in Visual Studio. 
Press f5 bottun.
Now we will see the output of our MVC Application.