This article will show you how you can add auto generated
row number in an asp.net mvc webgrid. This article you can use in MVC2, MVC3,
MVC4, MVC5 webgrid. This will also cover for dynamically add row number in mvc
webgrid.
Some of my previous articles are as follows:
Code
to Dynamically Bind Image To Asp.net MVC WebGrid, Display
User Detail Using jQuery ToolTip In Asp.Net MVC WebGrid, How
To Disable Sorting in Asp.net MVC Webgrid, MVC
WebGrid Custom paging With Page no and Shorting Data Using C#.Net, Frozen
Rows and Columns in Asp.Net Mvc Webgrid Using jQuery Like Excel Sheet,
How
to Bind Data to Webgrid in ASP.net MVC Using C#.Net.
In this we will add a dynamic row number in below shown
webgrid.
So for this article first we will create a new asp.net mvc
application and add a model class file.
|
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MvcApplication6.Models
{
public class StudentModel
{
public
List<Student>
StudentList { get; set;
}
}
public class Student
{
public
string Name { get;
set; }
public
int ClassOfStudent { get;
set; }
public
string Section { get;
set; }
public
string Address { get;
set; }
}
}
|
After adding model class file we will add a controller in
our project. After adding controller we will create view for this controller
action.
Controller
|
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcApplication6.Models
{
public class HomeController
: Controller
{
//
// GET:
/Home/
public
ActionResult Index()
{
StudentModel
_objstudentmodel = new StudentModel();
_objstudentmodel.StudentList = new List<Student>();
_objstudentmodel.StudentList.Add(new Student {
Name = "Name1", ClassOfStudent =
1, Section = "B", Address = "Address1" });
_objstudentmodel.StudentList.Add(new Student {
Name = "Name2", ClassOfStudent =
3, Section = "A", Address = "Address2" });
_objstudentmodel.StudentList.Add(new Student {
Name = "Name3", ClassOfStudent =
2, Section = "C", Address = "Address3" });
_objstudentmodel.StudentList.Add(new Student {
Name = "Name4", ClassOfStudent =
5, Section = "A", Address = "Address4" });
_objstudentmodel.StudentList.Add(new Student {
Name = "Name5", ClassOfStudent =
8, Section = "B", Address = "Address5" });
return
View(_objstudentmodel);
}
}
}
|
Here in above code I have added some value to student list to display in webgrid.
View
|
@model MvcApplication6.Models.StudentModel
@{
ViewBag.Title = "Auto
Increment Row Value In Asp.net MVC WebGrid Using C#.Net";
}
<style type="text/css">
table
{
font-family:
verdana,arial,sans-serif;
font-size:
11px;
color:
#333333;
border-width:
1px;
border-color:
#666666;
border-collapse:
collapse;
}
table
th
{
border-width:
1px;
padding:
8px;
border-style:
solid;
border-color:
#666666;
background-color:
#dedede;
}
table
td
{
border-width:
1px;
padding:
8px;
border-style:
solid;
border-color:
#666666;
background-color:
#ffffff;
}
</style>
@using
(Html.BeginForm("Index", "Home"))
{
var
grid = new WebGrid(Model.StudentList,
canSort: false, canPage: false);
//---This
variable is used for creating dynamic row value----
int
rowVal = 0;
<div>
@grid.GetHtml(columns:
grid.Columns
(
grid.Column("Sr.No.", format: item => rowVal =
rowVal + 1),
grid.Column("Name", "Stud
Name"),
grid.Column("ClassOfStudent", "Class"),
grid.Column("Section", "Section"),
grid.Column("Address", "Address")
), mode: WebGridPagerModes.Numeric)
</div>
}
|
In above please check the grid.Column("Sr.No.", format: item => rowVal = rowVal + 1)
line of code. In this I first I have declared a integer variable and then
added to the webgrid column incremented by 1. This will responsible for
creating dynamic now number.
Now run the application to check the output.
DOWNLOAD
About the Author
very helpful... especially the "rowVal" part which allows you for example to assign a unique DropDownList to each row
ReplyDeleteThanks for your valuable comment.
DeleteIt works perfect if there is only one page ,but when multiple pages are there it starts indexing form 1 in next page.which should't happen.
ReplyDelete