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

In my previous article ASP.NET MVC 5 - First Web Application: Part 1, I demonstrated how to develop a simple student registration form in MVC based web application. The only drawback of that application is that same data is not saved in the database. So we can’t get the student list from the database already saved. In this article, we will just expand the work to save the student registration data into the database and in the index page, populate the student list from database when view is loading.

For doing this, we need to create two new projects in the same solution.

Create project for the model structure

For this click on File, New, then Project and select Class Library project. After that provide the project name MVCDataModel and click on OK button.

Similarly, we create another class library projects name MVCDataService. The purpose of this class is to communicate with the database objects for database operations.

Now first thing, is to create a Model class under the new data model projects. For it, add a class file named Student.cs and write the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MVCDataModel
{
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 create a table named Student in the database as per the above data model objects.

Now add another new class under the MVCDataService project named BaseService.cs. This class is used as a base class for the base service of database operations.

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace MVCDataService
{
public class BaseService
{
public string DBConnection { get; set; }
public BaseService(string connString)
{
this.DBConnection = connString;
}
public int InsertUpdateDeleteData(string commandText)
{
using (SqlConnection conn = new SqlConnection(this.DBConnection))
{
conn.Open();
SqlCommand myCommand = new SqlCommand(commandText, conn);
int status = myCommand.ExecuteNonQuery();
conn.Close();
return status;
}
}
public DataTable FetchData(string commandText)
{
using (SqlConnection conn = new SqlConnection(this.DBConnection))
{
conn.Open();
SqlCommand myCommand = new SqlCommand(commandText, conn);
SqlDataReader reader = myCommand.ExecuteReader();
DataTable dtData = new DataTable();
dtData.Load(reader);
conn.Close();
return dtData;
}
}
}
}

Now, add another class StudentService.cs in the same project and write down the following code:

using MVCDataModel;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
namespace MVCDataService
{
public class StudentService : BaseService
{
public StudentService(string conString)
: base(conString)
{
}
public bool InsertStudentData(Student objStudent)
{
string strUrl = "Insert Into Student(StudentName,FatherName,DOB,Address,Class,RollNo) values (";
strUrl += "'" + objStudent.StudentName + "',";
strUrl += "'" + objStudent.FatherName + "',";
strUrl += "'" + objStudent.DateOfBirth + "',";
strUrl += "'" + objStudent.Address + "',";
strUrl += "'" + objStudent.Class + "',";
strUrl += "" + Convert.ToString(objStudent.RollNo) + ")";
int iStatus = base.InsertUpdateDeleteData(strUrl);
return true;
}
public List<Student> GetStudentList()
{
List<Student> lstData = new List<Student>();
DataTable dtData = base.FetchData("Select * from Student");
lstData = (from dr1 in dtData.AsEnumerable()
select new Student
{
StudentId = dr1.Field<Int32>("StudentId"),
StudentName = dr1.Field<string>("StudentName"),
FatherName = dr1.Field<string>("FatherName"),
Address = dr1.Field<string>("Address"),
Class = dr1.Field<string>("Class"),
RollNo = dr1.Field<Int32>("RollNo"),
DateOfBirth = dr1.Field<DateTime>("DOB")
}).ToList();
return lstData;
}
}
}

Now, we need to add database connection details in the web config file within the configuration tag.

<connectionStrings>
<add name="conn" connectionString="Data Source=DEB;Initial Catalog=ProjectSample;Password=abc;Integrated Security=True" providerName="System.Data.SqlClient" />
</connectionStrings>

Now we add a controller file named BaseController.cs and add the following code:

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MVC_Article.Controllers
{
public class BaseController : Controller
{
public string ConnectionString { get; set; }
public void setConnectionString()
{
ConnectionString = ConfigurationManager.ConnectionStrings["conn"].ConnectionString;
}
}
}

Now we make the changes in the student controller as in the following:

using MVCDataModel;
using MVCDataService;
using System.Collections.Generic;
using System.Web.Mvc;
namespace MVC_Article.Controllers
{
public class StudentController : BaseController
{
public StudentController()
{
base.setConnectionString();
}
// GET: Student
public ViewResult Index()
{
StudentService objStudentService = new StudentService(base.ConnectionString);
List<Student> lstData = objStudentService.GetStudentList();
return View(lstData);
}
[HttpGet]
public ViewResult StudentAdd()
{
return View();
}
[HttpPost]
public ViewResult StudentAdd(Student studentData)
{
StudentService objStudentService = new StudentService(base.ConnectionString);
if (objStudentService.InsertStudentData(studentData))
{
return View("ConfirmStudent", studentData);
}
else
{
return View(studentData);
}
}
}
}

Now we make some changes in the Index.cshtml file as in the following:

@model IEnumerable<MVCDataModel.Student>
@{
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")
<hr />
<br />
<table border="1" style="width:100%;">
<thead>
<tr style="background-color:WindowFrame;color:maroon;font-weight:bold;">
<td>Student Name</td>
<td>Father Name</td>
<td>Address</td>
<td>Date of Birth</td>
<td>Course</td>
<td>Roll No</td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
@foreach (var data in Model)
{
<tr>
<td>@Html.DisplayFor(modelItem => data.StudentName) </td>
<td>@Html.DisplayFor(modelItem => data.FatherName) </td>
<td>@Html.DisplayFor(modelItem => data.Address) </td>
<td>@Html.DisplayFor(modelItem => data.DateOfBirth) </td>
<td>@Html.DisplayFor(modelItem => data.Class) </td>
<td>@Html.DisplayFor(modelItem => data.RollNo) </td>
<td>@Html.ActionLink("Edit","")</td>
<td>@Html.ActionLink("Delete","")</td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html>

Also, we make some changes in the StudentAdd.cshtml file as in the following:

@model MVCDataModel.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 run the projects. Click on Register Student Button and save student details. Then click on Back to Index page and students list will appear as in the following screenshot: