How to use WebGrid in Asp.Net MVC.
1>Create a Table Name UploadFile for an example.
CREATE TABLE [dbo].[UploadFile] (
[Id] INT IDENTITY (1, 1) NOT NULL,
[CategoryId] INT NOT NULL,
[TypeId] INT NOT NULL,
[Path] VARCHAR (MAX) NOT NULL,
[Status] BIT NULL,
PRIMARY KEY CLUSTERED ([Id] ASC)
);
2> Insert the dummy data , so that it will help to identify clearly.
6> Create View Index.cshtml for Index Action
Assign Model in IEnumerable <> ,So that the data fetched in List Format (Means bind with multiple rows) .
:- @model IEnumerable<ItsMe.Areas.Admin.Models.UploadFile>
:- Create object for WebGrid :- WebGrid grid = new WebGrid(Model, rowsPerPage: 10);
:- WebGrid Syntax.
div class="table-responsive" style="overflow: auto;">
@grid.GetHtml(
tableStyle: "table table-striped table-bordered table-hover", // applying style on grid
mode: WebGridPagerModes.All, //paging to grid
firstText: "<< First",
previousText: "< Prev",
nextText: "Next >",
lastText: "Last >>",
columns: new[] // colums in grid
{
grid.Column(header:"Category Id",format:@<text>@item.CategoryId</text>),
grid.Column(header:"Type Id",format:@<text>@item.TypeId</text>),
grid.Column(header:"Path",format:@<text>@item.Path</text>),
grid.Column(header:"Active",format:@<text><div style="pointer-events: none; opacity: 0.6;">
<input type="checkbox" checked="@item.Status" disabled="disabled" /></div></text>),
grid.Column(header:" ", format:@<text> <a href="@Url.Action("Edit", new { id = item.Id })">Edit</a>|<a href="@Url.Action("Delete", new { id = item.Id })">Delete</a></text>)
}) </div>
Follow the Format as per given in Snapshot.
1>Create a Table Name UploadFile for an example.
CREATE TABLE [dbo].[UploadFile] (
[Id] INT IDENTITY (1, 1) NOT NULL,
[CategoryId] INT NOT NULL,
[TypeId] INT NOT NULL,
[Path] VARCHAR (MAX) NOT NULL,
[Status] BIT NULL,
PRIMARY KEY CLUSTERED ([Id] ASC)
);
2> Insert the dummy data , so that it will help to identify clearly.
3> Create the model Mapp with Table Attribute and assign Table name with a braces
[Table("UploadFile")]
4> Here we Map the model with DbSet<UploadFile>, For read write operation.
5>Create a controller --> call DefaultConnection class make the object so we can access in every action for different operation like insert, update, delete & display,but here we want to display a list of data in web grid. we convert model to list format by using
IList<UploadFile> model= new List<UploadFile>();. So that we store multiple data.
And we called in Foreach loop to store in list of data.
6> Create View Index.cshtml for Index Action
Assign Model in IEnumerable <> ,So that the data fetched in List Format (Means bind with multiple rows) .
:- @model IEnumerable<ItsMe.Areas.Admin.Models.UploadFile>
:- Create object for WebGrid :- WebGrid grid = new WebGrid(Model, rowsPerPage: 10);
:- WebGrid Syntax.
div class="table-responsive" style="overflow: auto;">
@grid.GetHtml(
tableStyle: "table table-striped table-bordered table-hover", // applying style on grid
mode: WebGridPagerModes.All, //paging to grid
firstText: "<< First",
previousText: "< Prev",
nextText: "Next >",
lastText: "Last >>",
columns: new[] // colums in grid
{
grid.Column(header:"Category Id",format:@<text>@item.CategoryId</text>),
grid.Column(header:"Type Id",format:@<text>@item.TypeId</text>),
grid.Column(header:"Path",format:@<text>@item.Path</text>),
grid.Column(header:"Active",format:@<text><div style="pointer-events: none; opacity: 0.6;">
<input type="checkbox" checked="@item.Status" disabled="disabled" /></div></text>),
grid.Column(header:" ", format:@<text> <a href="@Url.Action("Edit", new { id = item.Id })">Edit</a>|<a href="@Url.Action("Delete", new { id = item.Id })">Delete</a></text>)
}) </div>
Follow the Format as per given in Snapshot.
7> Finally Run the Project , Webgrid with multiple data.
Thank You.