How
to display Database data in WebGrid with Mvc 4.0 (using Paging Sorting and Style)
Note: In
this topic I will show how to bind data to
webgrid by using entity in Asp.Net MVC 4.0 using C#.Net
. In this I will fetch data from database by using linq query in c#.net with lambda
expression.
-- Sql
Query.....................................
create database test
use
test
CREATE TABLE Stu_Details
(
RollNo int primary key,
Name varchar(50),
Gender varchar(50),
Course varchar(50),
EmailId varchar(50) unique,
Pass bit
)
create table StateName
(
SrNo int identity(1,1),
StateCode nvarchar(50) primary key ,
StateName nvarchar(50) unique
)
First we will open Visual Studio 2012 AFTER THAT following
below steps
Step
1:
File -> New Project -> ASP.NET MVC 4 Web Application
And select Internet Application with Razor View engine
(as like below)
Step
2:
After that we will add Controller which name
is MyWebGridController and
write code
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
//using this namespace....................
using
WebGridConceptInMvc4.Models;
namespace
WebGridConceptInMvc4.Controllers
{
public class MyWebGridController : Controller
{
//
// GET: /MyWebGrid/
testEntities tt = new testEntities();
//
this for State Details.....
public ActionResult Index()
{
var st = new List<StateName>();
st = tt.StateNames.OrderBy(r
=> r.SrNo).ThenBy(d => d.StateName1).ThenBy(x =>
x.StateCode).ToList();
return View(st);
}
//
this is for Student Details……………………..
public ActionResult StudentRecord()
{
var stu = new List<Stu_Details>();
stu =
tt.Stu_Details.ToList();
return View(stu);
}
}
}
Step
2:
After that we will add View with Index……..
@model List<WebGridConceptInMvc4.Models.StateName>
@{
Layout = null;
//var data = Model.ToList();
//var grid = new
WebGrid(data);
var grid = new WebGrid(source: Model,
canPage: true, rowsPerPage: 3);
grid.Pager(WebGridPagerModes.All);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<div id="grid">
@grid.GetHtml()
</div>
</div>
</body>
</html>
Result:
Step
3:
After that we will add View with StudentRecord ……..
@model List<WebGridConceptInMvc4.Models.Stu_Details>
@{
Layout = null;
ViewBag.Title = "List of
Students";
var grid = new WebGrid(source: Model,
canPage: true, rowsPerPage: 3);
grid.Pager(WebGridPagerModes.FirstLast);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>StudentRecord</title>
<style type="text/css">
table
{
border: solid 3px Black;
background-color:#33FF00;
margin:10px 10px 10px 10px;
width:100%;
}
.tb
{
font-family:Verdana;
font-size: 1.0em;
width: 75%;
display: table;
border-collapse:collapse;
border: solid 3px Black;
background-color:white;
}
.tb td, th
{
border: 1px solid #E022C2;
padding: 2px 2px 2px;
}
.wgheader
{
background-color: #ff6a00;
color:White;
padding-bottom: 4px;
padding-top: 5px;
text-align: left;
}
.wgfooter
{
}
.wgrowstyle
{
padding: 2px 2px 2px;
}
.wgalternaterow
{
background-color: #00ff90;
padding: 3px 7px 2px;
}
</style>
</head>
<body>
<table>
<tr><td ><center><b><i>How to display
DataBase data in WebGrid with Mvc 4.0</i></b></center></td></tr>
<tr>
<td>
<center>
@grid.GetHtml
(
tableStyle:"tb",
headerStyle:"wgheader",
footerStyle:"wgfooter",
alternatingRowStyle:"wgalternaterow",
rowStyle:"wgrowstyle",
columns:grid.Columns
(
//here i will add column for
serial no
grid.Column(header:"SrNo", format:@<text><div>@(item.WebGrid.Rows.IndexOf(item)+1)</div></text>),
grid.Column(columnName:"RollNo",header:"RollNo"),
grid.Column(columnName:"Name",header:"Name"),
grid.Column(columnName:"Gender", header:"Gender"),
grid.Column(columnName:"Course", header:"Course"),
grid.Column(header:"EmailId", format:@<text><a href="mailto:@item.EmailID">@item.EmailId</a></text>),
grid.Column(header:"Is
Pass?",
format:@<text><input type="checkbox" checked="@item.Pass" disabled="disabled" /></text>)
))
</center>
</td>
</tr>
</table>
</body>
</html>
Result
How to dynamically set row effect in WebGrid MVC 4.0 with JQuery........................
Note : In this concept (using jquery) we will
discuss the row which is blinking are
failed Students.
@model List<WebGridConceptInMvc4.Models.Stu_Details>
@{
Layout = null;
ViewBag.Title = "List of
Students";
var grid = new WebGrid(source: Model,
canPage: true, rowsPerPage: 10);
grid.Pager(WebGridPagerModes.FirstLast);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>StudentRecord</title>
<style type="text/css">
/*You have to use same style sheet as above because that's same thing*/
</style>
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.20.min.js"></script>
<script src="~/Scripts/jquery-1.7.1.intellisense.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$("#mydata
tbody tr").each(function (i, row)
{
var $tRow = $(row);
if ($tRow.find('input[type=checkbox]').prop('checked') == false)
{
$tRow.css('background-color', '#ffd800');
$tRow.css('color', '#f00');
var $ccol;
$tRow.children().each(function (i, col)
{
$ccol = $(col);
//$(this).css('color',
'#f00');
//alert($ccol.text());
});
function blink()
{
$tRow.show("slow");
$tRow.hide("slow");
}
setInterval(blink, 1000);
}
else
{
$tRow.css('background-color', 'white');
}
});
});
</script>
</head>
<body>
<table>
<tr><td ><center><b><i>How to display
DataBase data in WebGrid with Mvc 4.0</i></b></center></td></tr>
<tr><td>
<center>
<div id="mydata">
@grid.GetHtml(
tableStyle:"tb",
headerStyle:"wgheader",
footerStyle:"wgfooter",
alternatingRowStyle:"wgalternaterow",
rowStyle:"wgrowstyle",
columns:grid.Columns
(
//here i will add column for
serial no
grid.Column(header:"SrNo", format:@<text><div>@(item.WebGrid.Rows.IndexOf(item)+1)</div></text>),
grid.Column(columnName:"RollNo",header:"RollNo"),
grid.Column(columnName:"Name",header:"Name"),
grid.Column(columnName:"Gender", header:"Gender"),
grid.Column(columnName:"Course", header:"Course"),
grid.Column(header:"EmailId", format:@<text><a href="mailto:@item.EmailID">@item.EmailId</a></text>),
grid.Column(header:"Is
Pass?",
format:@<text><input type="checkbox" checked="@item.Pass" disabled="disabled" /></text>)
))
</div>
</center>
</td></tr>
</table>
</body>
</html>
Result
Sir ,, please tell me how to store data in database in hindi font and how to type in hindi in textbox.... While using web application .... like if we use sign up form then i want to type in hindi in Name textbox.....please help me...
ReplyDeleteSrNo goes to wrong when page size is 2 Showing result as SrNo 1 and 2 on all pages.Sir give solution of this problem.
ReplyDelete