ASP.NET MVC 5 - First Web Application: Part 1

ASP.NET MVC is a web development framework or architecture from Microsoft that combines the tidiness and effectiveness of model view controller (MVC) architecture which is the most up - to - date techniques from agile development. It is a complete alternate technology of traditional ASP.NET Web Forms. In this article, we will discuss about the ASP.NET MVC 5 with its new features. Also learn how to develop your first program in MVC 5.

Some disadvantages of Traditional ASP.NET Web Forms:

• View State weight
• Page life cycle
• False sense of separation of concern
• Limited control over HTML

In today’s development world, web development technology has been progressing rapidly. Now a days web sites and web based applications are used on variety of devices and browsers than ever before. Also after introducing HTML5, it has begun to enter mainstream use and provides the web developer with rich capabilities that allow the client to perform work that used server side earlier.

Main benefits of ASP.NET MVC

In October 2007, Microsoft announced a new MVC Web development platform, built on the core ASP.NET platform, specially designed as a direct response to the evolution of technologies.

1. MVC Architecture: It is important to distinguish between the MVC architecture pattern and the ASP.NET MVC Framework. Actually MVC pattern is not new - it dates back to 1978 and the Smalltalk project at Xerox PARC - it achieved its most popularity today as a pattern for web development because user interactive with an MVC application follows a natural cycle : the user takes an action and in response the application changes its data model and delivers an updated view to the user. And then the cycle repeats. This is a convenient fit for Web Applications delivered as a series of HTTP requests and response.
   
   
2. Extensibility: MVC framework is developed on basis of independent components that satisfy a .NET interface or that are built on an abstract base class. We can easily replace components such as the routing system, the view engine and the controller factory, with a different one of your own implementation.
   
   
3. Strong control over HTML and HTTP: ASP.NET MVC produces clean, standard-compliant markup. Its built in HTML helper methods produce a standards - compliant output, but there is a more significant change compared with web forms.
   
   
4. Testability: The MVC architecture gives us a great start in making your application maintainable and testable because you normally separate your application into different independent parts. Also to support Unit testing, it took the framework's component oriented design and made sure that each separate piece is structured to meet the requirements of unit testing and mocking tools.
   
   
5. Routing System: The style of urls developed as a web application technology has improved. In web application, urls are looks like the following: App_code/Project/HomePage.aspx?user_id=xyz 

           Whereas in MVC technology, it is now very much simpler and clean 

            Login/HomeIndex 

 

 Now, how to create your first application in MVC 5. For this, we first open Visual Studio 2013 and click on File, New, then Projects

Provide project name and click on OK button.

Click on MVC as per the above image and click ok. Your MVC Project has been created. You can run the project which will show you a sample template of MVC project. But we create our own custom Page.

Now in your solution explorer, there is a folder name Controller. Select the folder and right click the mouse and click on Add a Controller.

Select MVC 5 Empty Controller and Click on Add Button.

Type controller name as Student and click on Ok.

The StudentController creates with default action method named Index which return ActionResult. We change the return type to ViewResult.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVC_Article.Controllers
{
    public class StudentController : Controller
    {
        // GET: Student
        public ViewResult Index()
        {
            return View();
        }
    }
}

Now right click on Index and click on Add View and then Click on Ok.

 

 

Now right the following code in index.cshtml page.

@{
    ViewBag.Title = "Index";
}

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title> Student Add</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-2.1.4.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</head>
<body>
    <h2>Student Database Project</h2>
    <div class="btn-link">
        @Html.ActionLink("Register Student", "StudentAdd")
    </div>
</body>
</html>

Actually, we want to create a Student Registration form. For this, first we need to define the student model class. So we will add a Student Class under Model folder and define the student class. 

public class Student
    {
        public int StudentId { get; set; }
        public string StudentName { get; set; }
        public string FatherName { get; set; }
        public DateTime DateOfBirth { get; set; }
        public string Address { get; set; }
        public string Class { get; set; }
        public int RollNo { get; set; }
    }

Now in the StudentController, we add another viewresult method named StudentAdd() and also add a view against this method with strongly type model.

public ViewResult StudentAdd()
        {
            return View();
        }

The following is the code of StudentAdd view:

@model MVC_Article.Models.Student

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title> Student Add</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-2.1.4.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</head>
<body>
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()

        <div class="form-horizontal">
            <h2>Register New Student</h2>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.StudentName, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.StudentName, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.StudentName, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.FatherName, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.FatherName, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.FatherName, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.DateOfBirth, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.DateOfBirth, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Class, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownListFor(x => x.Class, new[] {
                    new SelectListItem() {Text="BCA",Value="BCA"},
                    new SelectListItem() {Text="BBA",Value="BBA"},
                    new SelectListItem() {Text="BTECH",Value="BTECH"},
                    new SelectListItem() {Text="BCA",Value="MCA"},
                    new SelectListItem() {Text="BBA",Value="MBA"},
                    new SelectListItem() {Text="BTECH",Value="MTECH"}
               })
                    @Html.ValidationMessageFor(model => model.Class, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.RollNo, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.RollNo, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.RollNo, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-success" />
                </div>
            </div>
        </div>
    }

    <div>
        @Html.ActionLink("Back to Home", "Index")
    </div>
</body>

</html>

Now after clicking on CREATE button, it will redirect to a confirmation page. For this, we change the studentcontroller as in the following code snippet: 

using MVC_Article.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVC_Article.Controllers
{
    public class StudentController : Controller
    {
        // GET: Student
        public ViewResult Index()
        {
            return View();
        }

        [HttpGet]
        public ViewResult StudentAdd()
        {
            return View();
        }

        [HttpPost]
        public ViewResult StudentAdd(Student studentData)
        {
            return View("ConfirmStudent", studentData);
        }
    }
}

Now Add a ConfirmStudent Named view and add the following code:

@model MVC_Article.Models.Student

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title> Student Registration Confirm</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-2.1.4.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</head>
<body>
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()

        <div class="form-horizontal">
            <h2>Confirm Register</h2>
            <hr />
            <div>
                <h1>Thanks @Model.StudentName !</h1>
                <h3>Your Registration has been complete.</h3>
            </div>
        </div>
    }

    <div>
        @Html.ActionLink("Back to Home", "Index")
    </div>
</body>

</html>

Now run the application and it will show the following: