Webgrid in Asp.Net MVC 4
In this
blog, I am going to tell how to show the content from database in the table or
grid structure in asp.net mvc 4 using the Webgrid control.
Webgrid is
used to display the content in the row column format just like table structure;
Webgrid is similar to the gridview in asp.net and datagridview in windows form.
Step -1
First
create a table named “Student” in the database with the following fields:
And insert
some dummy data in the table to show in the webgrid.
Step -2
Now create
an asp.net mvc 4 web application and add a model class named “Student” and
write the below code in it:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WebGridMvcApp.Models
{
public class Student
{
public string StudentId { get; set; }
public string Name { get; set; }
public string Age { get; set; }
public string Address { get; set; }
public string Course { get; set; }
}
}
Step -3
Now add a
controller to the project and named “HomeController” and write the below code
in it:
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebGridMvcApp.Models;
namespace WebGridMvcApp.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
List<Student> student = new List<Student>();
string ConnString = ConfigurationManager.ConnectionStrings["ConnString"].ConnectionString;
SqlConnection conn = new SqlConnection(ConnString);
conn.Open();
SqlCommand cmd = new SqlCommand("Select * From StudentInformation",conn);
SqlDataReader reader = cmd.ExecuteReader();
while (reader.Read())
{
student.Add(new Student {
StudentId = reader["StudentId"].ToString(),
Name = reader["Name"].ToString(),
Age = reader["Age"].ToString(),
Address = reader["Address"].ToString(),
Course = reader["Course"].ToString()
});
}
return View(student);
}
}
}
Step -4
Now add a
view to the project named “Index” and it will be strongly typed view like this:
@model IEnumerable<WebGridMvcApp.Models.Student>
@{
Layout = null;
}
@{
var grid = new WebGrid(Model, canPage: true,
rowsPerPage: 10,
selectionFieldName: "selectedRow", ajaxUpdateContainerId: "WebgridContent");
grid.Pager(WebGridPagerModes.NextPrevious);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
.webGrid { margin: 4px; border-collapse: collapse; width: 500px; background-color:#6ec0de;}
.header { background-color: #C1D4E6; font-weight: bold; color: #FFF; }
.webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }
.alt { background-color: #E4E9F5; color: #000; }
.gridHead a:hover {text-decoration:underline;}
.description { width:auto}
.select{background-color: #71857C}
</style>
</head>
<body>
<div>
<div id="WebgridContent">
@grid.GetHtml(tableStyle: "webGrid",
headerStyle: "header",
alternatingRowStyle: "alt",
selectedRowStyle: "select",
columns: grid.Columns(
grid.Column("Name", "Name"),
grid.Column("Age", "Age"),
grid.Column("Address", "Address"),
grid.Column("Course", "Course")
))
</div>
</div>
</body>
</html>
Step -5
Now add the connection string in web.config file
like below:
<connectionStrings>
<add name="ConnString" connectionString="Data Source=Your data source name;Initial Catalog=Your
database name;Integrated Security=true;"providerName="System.Data.SqlClient"/>
</connectionStrings>
Output
Run the application
No comments:
Post a Comment