Displaying data using Webgrid with ajax
Controller.cs
public ActionResult WebgridSample()
{
ObservableCollection<Student> FeeRemaining = new ObservableCollection<Student>();
FeeRemaining.Add(new Student { RollNo = "08330001", Name = "Surbhi", Branch = "C.S", FeeRemaining = 18000 });
FeeRemaining.Add(new Student { RollNo = "08330004", Name = "Arun", Branch = "C.S", FeeRemaining = 2500 });
FeeRemaining.Add(new Student { RollNo = "08329006", Name = "Ankita", Branch = "I.T", FeeRemaining = 31000 });
FeeRemaining.Add(new Student { RollNo = "08329007", Name = "Anshika", Branch = "I.T", FeeRemaining = 9450 });
FeeRemaining.Add(new Student { RollNo = "08329014", Name = "Anubhav", Branch = "I.T", FeeRemaining = 2670 });
FeeRemaining.Add(new Student { RollNo = "08311023", Name = "Girish", Branch = "E.N", FeeRemaining = 11200 });
FeeRemaining.Add(new Student { RollNo = "08311024", Name = "Yogesh", Branch = "E.N", FeeRemaining = 3370 });
return View(FeeRemaining);
}
View.cshtml
<html>
<head>
<title>Fee Remaining in Webgrid</title>
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
.table { margin: 4px; width: 500px; background-color:#FCFCFC;}
.head { background-color: #C1D4E6; font-weight: bold; color: #FFF; }
.webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }
.altRow { background-color: #E4E9F5; color: #000; }
.gridHead a:hover {text-decoration:underline;}
.description { width:auto}
.selectRow{background-color: #389DF5}
</style>
</head>
<body>
@{
WebGridSampleApplication.Models.Student Student = new WebGridSampleApplication.Models.Student();
}
@{
var gd = new WebGrid(Model, canPage: true, rowsPerPage: 5, selectionFieldName: "selectedRow",ajaxUpdateContainerId: "gridContent");
gd.Pager(WebGridPagerModes.NextPrevious);}
<div id="gridContent">
@gd.GetHtml(tableStyle: "table",
headerStyle: "head",
alternatingRowStyle: "altRow",
selectedRowStyle: "selectRow",
columns: gd.Columns(
gd.Column("RollNo", format: (item) => item.GetSelectLink(item.RollNo)),
gd.Column("Name", " Name"),
gd.Column("Branch", "Branch", style: "description"),
gd.Column("FeeRemaining", "FeeRemaining")
))
@if (gd.HasSelection)
{
Student = (WebGridSampleApplication.Models.Student)gd.Rows[gd.SelectedIndex].Value;
<b>Roll No</b> @Student.RollNo<br />
<b>Name</b> @Student.Name<br />
<b>Branch</b> @Student.Branch<br />
<b>Remaining Fee</b> @Student.FeeRemaining<br />
}
</div>
</body>
</html>
Displaying data using foreach loop
<table>
@foreach (var item in Model)
{
<thead>
<tr>
<th>RollNo</th>
<th>Name</th>
<th>Branch</th>
<th>Fee Remaining</th>
</tr>
</thead>
<tr>
<td class="left">@item.RollNo</td>
<td class="left">@item.Name</td>
<td class="left">@item.Branch</td>
<td class="right">@item.FeeRemaining</td>
</tr>
}
</table>
Controller.cs
public ActionResult WebgridSample()
{
ObservableCollection<Student> FeeRemaining = new ObservableCollection<Student>();
FeeRemaining.Add(new Student { RollNo = "08330001", Name = "Surbhi", Branch = "C.S", FeeRemaining = 18000 });
FeeRemaining.Add(new Student { RollNo = "08330004", Name = "Arun", Branch = "C.S", FeeRemaining = 2500 });
FeeRemaining.Add(new Student { RollNo = "08329006", Name = "Ankita", Branch = "I.T", FeeRemaining = 31000 });
FeeRemaining.Add(new Student { RollNo = "08329007", Name = "Anshika", Branch = "I.T", FeeRemaining = 9450 });
FeeRemaining.Add(new Student { RollNo = "08329014", Name = "Anubhav", Branch = "I.T", FeeRemaining = 2670 });
FeeRemaining.Add(new Student { RollNo = "08311023", Name = "Girish", Branch = "E.N", FeeRemaining = 11200 });
FeeRemaining.Add(new Student { RollNo = "08311024", Name = "Yogesh", Branch = "E.N", FeeRemaining = 3370 });
return View(FeeRemaining);
}
View.cshtml
<html>
<head>
<title>Fee Remaining in Webgrid</title>
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
.table { margin: 4px; width: 500px; background-color:#FCFCFC;}
.head { background-color: #C1D4E6; font-weight: bold; color: #FFF; }
.webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }
.altRow { background-color: #E4E9F5; color: #000; }
.gridHead a:hover {text-decoration:underline;}
.description { width:auto}
.selectRow{background-color: #389DF5}
</style>
</head>
<body>
@{
WebGridSampleApplication.Models.Student Student = new WebGridSampleApplication.Models.Student();
}
@{
var gd = new WebGrid(Model, canPage: true, rowsPerPage: 5, selectionFieldName: "selectedRow",ajaxUpdateContainerId: "gridContent");
gd.Pager(WebGridPagerModes.NextPrevious);}
<div id="gridContent">
@gd.GetHtml(tableStyle: "table",
headerStyle: "head",
alternatingRowStyle: "altRow",
selectedRowStyle: "selectRow",
columns: gd.Columns(
gd.Column("RollNo", format: (item) => item.GetSelectLink(item.RollNo)),
gd.Column("Name", " Name"),
gd.Column("Branch", "Branch", style: "description"),
gd.Column("FeeRemaining", "FeeRemaining")
))
@if (gd.HasSelection)
{
Student = (WebGridSampleApplication.Models.Student)gd.Rows[gd.SelectedIndex].Value;
<b>Roll No</b> @Student.RollNo<br />
<b>Name</b> @Student.Name<br />
<b>Branch</b> @Student.Branch<br />
<b>Remaining Fee</b> @Student.FeeRemaining<br />
}
</div>
</body>
</html>
Displaying data using foreach loop
<table>
@foreach (var item in Model)
{
<thead>
<tr>
<th>RollNo</th>
<th>Name</th>
<th>Branch</th>
<th>Fee Remaining</th>
</tr>
</thead>
<tr>
<td class="left">@item.RollNo</td>
<td class="left">@item.Name</td>
<td class="left">@item.Branch</td>
<td class="right">@item.FeeRemaining</td>
</tr>
}
</table>
No comments:
Post a Comment