Webgrid in MVC 4 razor

Hell everyone, I am going to share the code sample for how to use Add, Update and Delete in MVC WebGrid.

If we need to display data in our app, we look for a asp.net grid view. The ASP.net Grid view is always perform to display all the data and other activities like add items, update items and delete items etc.

But in MVC, for the same we use MVC WebGrid control. The MVC WebGrid not have features to perform the operation like add, update and delete that time we need to put some extra work to achieve this functionality.

The code sample as given below.

//MVC WebGrid control

@model IEnumerable<MedC.Svc.Data.Doctor>

<h4>Doctor List</h4>

<p>

    @Html.ActionLink("Create New", "Create")

</p>

@{

    WebGrid grid = new WebGrid(Model, canPage: true, rowsPerPage: 5,canSort:true);

}

<div id="GridContent">

    @grid.GetHtml(tableStyle: "webgrid-table", headerStyle: "webgrid-header", footerStyle: "webgrid-footer",   

    htmlAttributes:new{@id="webGrid"},

       columns: grid.Columns(

       grid.Column(columnName: "RegistrationNumber", format: @<text>@item.RegistrationNumber</text>),

       grid.Column("RegisteredWithMedicalAuthoritySince", format: @<text>@item.RegisteredWithMedicalAuthoritySince</text>),

       grid.Column("Specialization", format: @<text>@item.Specialization</text>),

       grid.Column("RegistrationAuthority", format: @<text>@item.RegistrationAuthority</text>),

       grid.Column("RegistrationCertificate", format: @<text>@item.RegistrationCertificate</text>),

       grid.Column("Tags", format: @<text>@item.Tags</text>),

       grid.Column("Introduction", format: @<text>@item.Introduction</text>),

       grid.Column("IsFeatured", format: @<text>@item.IsFeatured</text>),

       grid.Column("Rating", format: @<text>@item.Rating</text>),

       grid.Column("Awards", format: @<text>@item.Awards</text>),               

       grid.Column("",format:@<text>

            @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |

            @Html.ActionLink("Details", "Details", new { id = item.Id }) |

            @Html.ActionLink("Delete", "Delete", new { id = item.Id }</text>)

         )

     )

</div>

//MVC WebGrid control

@model IEnumerable<MedC.Svc.Data.Doctor>
<h4>Doctor List</h4>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
@{
    WebGrid grid = new WebGrid(Model, canPage: true, rowsPerPage: 5,canSort:true);
}
<div id="GridContent">
    @grid.GetHtml(tableStyle: "webgrid-table", headerStyle: "webgrid-header", footerStyle: "webgrid-footer",   
    htmlAttributes:new{@id="webGrid"},
       columns: grid.Columns(
       grid.Column(columnName: "RegistrationNumber", format: @<text>@item.RegistrationNumber</text>),
       grid.Column("RegisteredWithMedicalAuthoritySince", format: @<text>@item.RegisteredWithMedicalAuthoritySince</text>),
       grid.Column("Specialization", format: @<text>@item.Specialization</text>),
       grid.Column("RegistrationAuthority", format: @<text>@item.RegistrationAuthority</text>),
       grid.Column("RegistrationCertificate", format: @<text>@item.RegistrationCertificate</text>),
       grid.Column("Tags", format: @<text>@item.Tags</text>),
       grid.Column("Introduction", format: @<text>@item.Introduction</text>),
       grid.Column("IsFeatured", format: @<text>@item.IsFeatured</text>),
       grid.Column("Rating", format: @<text>@item.Rating</text>),
       grid.Column("Awards", format: @<text>@item.Awards</text>),               
       grid.Column("",format:@<text>
            @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
            @Html.ActionLink("Details", "Details", new { id = item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.Id }</text>)
         )
     )

</div>

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2