(My visual studio version is 2013)
MVC : Model View Controller
Step 01
Open visual studio and click new project.
Step 02
Fig : 1.1
Step 03
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.
Step 04
Fig : 3.0
Step 05
<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>
Step 06
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;
}
}
}
Step 07(Model Part)
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);
}
}
Step 08
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)
Step 09
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;
}
}
Step 10 (Controller Part)
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);
}
}
Step 11 (View Part)
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
Step 12
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....