MVC : Model View Controller

Open visual studio and click new project.

Select ASP.Net Web Application, give your project name and click OK button (Fig : 1.1) :

                                                                   Fig : 1.1

Select MVC and click Ok button (Fig : 1.2).

                                                                   Fig : 1.2

After clicking on ok button your project is created. At right side (In Solution Explorer) you can see Model (M), View (V), Controller (C) part (Fig 2.1).

                                                                          Fig : 2.1

Now if you want, you can delete
AccountController and HomeController under Controller Folder,
AccountViewModels and IdentityModels under Models Folder,
Account and home folder under Views folder.

Now create a database and a database table named Student (Fig 3.0)

                                                                          Fig : 3.0

Now goto Web.config (There are more than one Web.config in your project you have to select Web.config Under Startup.cs) and write below code before <appSettings> :

<connectionStrings>
<add name=”BasicDBConnectionString” connectionString=”Data Source=YourSource; Initial Catalog=BasicDB; Integrated Security=True”/>
<add name=”ApplicationServices”
connectionString=”data source=.SQLEXPRESS; Integrated Security=SSPI; AttachDBFilename=|DataDirectory|aspnetdb.mdf; User Instance=true”
providerName=”System.Data.SqlClient” />
</connectionStrings>

Create a folder named DBConnections and a class under this folder named DBConnection.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;

public class DBConnection
{
        private SqlConnection _oSqlConnection;
        private SqlCommand _oSqlCommand;

        public DBConnection()
        {
            _oSqlConnection = new SqlConnection(ConfigurationManager.ConnectionStrings[“BasicDBConnectionString”].ConnectionString);
            _oSqlCommand = new SqlCommand();
        }

        public SqlConnection SqlConnectionObj
        {
            get { return _oSqlConnection; }
        }

        public SqlCommand SqlCommandObj
        {
            get
            {
                _oSqlCommand.Connection = _oSqlConnection;
                return _oSqlCommand;
            }
        }
}

Now create a class under Models folder named Student.cs.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using BasicMVC.DAL;

public class Student
{
        public Student()
        {
            StudentId = 0;
            Name = “”;
            Roll = “”;
            BirthDate = DateTime.Today;
        }

        public int StudentId { get; set; }
        public string Name { get; set; }
        public string Roll { get; set; }
        public DateTime BirthDate { get; set; }

        public bool Save(Student oStudent)
        {
            StudentDAL oStudentDAL = new StudentDAL();
            return oStudentDAL.Save(oStudent);
        }
}

Now goto view -> Server Explorer Fig(Fig 3.1)

                                                                          Fig : 3.1
Next click on red circle (Fig 3.2):

                                                                          Fig : 3.2
Next select Microsoft SQL Server and click continue (Fig 3.3)

                                                                          Fig : 3.3
Select server name and database name then click ok button (Fig : 3.4)

                                                                         Fig : 3.4

Next create a folder named DAL and a class under this folder named StudentDAL.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using BasicMVC.Models;
using BasicMVC.DBConnections;

 public class StudentDAL : DBConnection  //Must Add
 {
        public bool Save(Student oStudent)
        {
            SqlConnectionObj.Open();
            string sSQL = “INSERT INTO Student (Name, Roll, BirthDate)” +
                                       “VALUES (‘” + oStudent.Name + “‘,'” + oStudent.Roll + “‘,'” + oStudent.BirthDate.ToString(“dd MMM yyyy”) + “‘)”;
            SqlCommandObj.CommandText = sSQL;
            SqlCommandObj.ExecuteNonQuery();
            SqlConnectionObj.Close();
            return true;
        }
 }

Now create a class under Controller folder named StudentController.cs.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using BasicMVC.Models;
using System.Web.Script.Serialization;

public class StudentController : Controller  //Must Add
{
        public ActionResult View_Students()
        {
            Student oStudent = new Student();
            return View(oStudent);
        }

        [HttpPost]

        public JsonResult Save(Student oStudent)
        {
            bool bIsSaveSuccess = true;
            try
            {
                bIsSaveSuccess = oStudent.Save(oStudent);
            }
            catch (Exception ex)
            {
                bIsSaveSuccess = false;
            }
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            string sjson = serializer.Serialize(bIsSaveSuccess);
            return Json(sjson, JsonRequestBehavior.AllowGet);
        }
}

a) Create a folder named Student under Views folder.
b) Now Create a  .cshtml page under Student folder named View_Students.cshtml

View_Students.cshtml : 

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <title>Add Student</title>
    <script src=”~/Scripts/jquery-1.10.2.min.js”></script> 
</head>
<body>
    <h2 style=”text-align:center;”>Add Student Informations</h2>
    <table style=”margin:0 auto;”>
        <tr>
            <td style=”text-align:right;”>
                Name :
            </td>
            <td>
                <input id=”txtName” type=”text” placeholder=”Write Name” style=”width:100%;” />
            </td>
        </tr>
        <tr>
            <td style=”text-align:right;”>
                Roll :
            </td>
            <td>
                <input id=”txtRoll” type=”text” placeholder=”Write Roll Number” style=”width:100%;” />
            </td>
        </tr>
        <tr>
            <td style=”text-align:right;”>
                Birth Date :
            </td>
            <td>
                <input id=”txtBirthDate” type=”date” style=”width:100%;”/>
            </td>
        </tr>
        <tr>
            <td style=”text-align:right;”></td>
            <td>
                <input id=”btnSave” type=”button” value=”Save” style=”float:right;” />
            </td>
        </tr>
    </table>  
</body>
</html>
<script type=”text/javascript”>
    $(document).ready(function () {
    });

    $(“#btnSave”).click(function () {
        if($.trim($(“#txtName”).val()) == “”)
        {
            alert(“Please give Student Name.”);
            $(“#txtName”).focus();
            return false;
        }

        if ($.trim($(“#txtRoll”).val()) == “”)
        {
            alert(“Please give Student Roll Number.”);
            $(“#txtRoll”).focus();
            return false;
        }

        if ($.trim($(“#txtBirthDate”).val()) == “”) {
            alert(“Please give Student Birthday Date.”);
            $(“#txtBirthDate”).focus();
            return false;
        }
        var oStudent = {
            Name: $.trim($(“#txtName”).val()),
            Roll: $.trim($(“#txtRoll”).val()),
            BirthDate: $.trim($(“#txtBirthDate”).val())
        };

        $.ajax({
            type: “POST”,
            dataType: “json”,
            url: “/Student/Save”,   //ControllerName/FunctionName
            traditional: true,
            data: JSON.stringify(oStudent),
            contentType: “application/json; charset=utf-8”,
            success: function (data) {
                var bIsSaveSuccess = jQuery.parseJSON(data);
                if (bIsSaveSuccess) {
                    alert(“Save Successful.”);
                } else {
                    alert(“Something Went Wrong.”);
                }
            },
            error: function (xhr, status, error) {
             
            }
        });
    });
</script>

So Fig(4.0) shows the current state of this project :

                                                                         Fig : 4.0

This is final step. Set your startup page.
a) Click App Start folder and open RouteConfig.cs class.
b) Change RegisterRoutes with below code :

public static void RegisterRoutes(RouteCollection routes)
{
     routes.IgnoreRoute(“{resource}.axd/{*pathInfo}”);

     routes.MapRoute(
        name: “Default”,
        url: “{controller}/{action}/{id}”,
        defaults: new { controller = “Student“, action = “View_Students“, id = UrlParameter.Optional }
            );
}

Now Run this project and you will see below interface :

Fill the fields and click Save button.

Your MVC Project is DONE….