Web Grid with Razor Engine,Paging and Customized Edit and Delete facility

In this post I will show you how to use web grid in Asp.Net MVC 3 with Razor Engine with customization it contains Edit ,Delete facilities as we find in normal Asp.Net Web Application :

@model IEnumerable<ContactMangerModel.ContactModel>

@{

          ViewBag.Title = "List";

    }
@{
   
    var grid = new WebGrid(source: Model,
                                           defaultSort: "First Name",
                                           rowsPerPage:5, fieldNamePrefix:"wg_",
                                           canPage:true,canSort:true,
                                           pageFieldName:"pg",sortFieldName:"srt"
                                           ); 
 }

 <table cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td>
            @grid.GetHtml(tableStyle:"listing-border",headerStyle:"gridhead",footerStyle:"paging",rowStyle:"td-dark",alternatingRowStyle:"td-light",
                            columns:
                                grid.Columns(
                                grid.Column(header:"", format: @<text><input id="chk" type="checkbox" value="@item.ID" /></text>),
                                    grid.Column("FirstName", "First Name", style: "colFirstName"),
                                    grid.Column("LastName", "Last Name", style: "colLastName"),
                                    grid.Column("Phone", "Phone", style: "colPhone"),
                                    grid.Column("Email", "Email", style: "colEmail"),
                                    grid.Column("ContactType_Name", "Contact Type", style: "colContactType"),
                                    grid.Column("IsActive", "Status",
                                                    format: (item) => (item.IsActive) ? Html.Raw("<img src='../../Content/images/active.png' />") :
                                                                                        Html.Raw("<img src='../../Content/images/inactive.png' />"),
                                                    style: "colOperation"),
                                    grid.Column(header: "Edit", format: @<text><a href="@Url.Action("Edit", "Contact", new { id = item.id })" ><img src="../../Content/images/edit.png" alt="" style="border:none;" /></a></text>, style: "colOperation"),
                                    grid.Column(header: "Delete", format: @<text><a href="@Url.Action("Delete", "Contact", new { id = item.id })" onclick="javascript:return ConfirmDelete();"><img src="../../Content/images/delete.png" alt="" style="border:none;" /></a></text>, style: "colOperation")
                                ),mode:WebGridPagerModes.Numeric)
        </td>
    </tr>
 </table>
<script type="text/javascript">
    function ConfirmDelete() {
        return confirm("Are you sure you want to delete contacts?");
    }
</script>

My Style Sheet :

.listing-border { background: #fd7d0f;}
.gridhead { background:#FFAA5F;  font: bold 13px Arial, Helvetica, sans-serif; color:#000000; text-decoration: none; height: 27px; text-align: left;}
.gridhead th a {text-decoration:none;color:#000000;}
.gridhead th a:hover {text-decoration:underline;color:#FF0000;}
.td-dark { background: #ffffff; height: 20px; }
.td-light { background: #FFE2BF; height: 20px; }
.paging { background: #fd7d0f;text-align: right;color:#000000;}
.paging span { font: bold 12px Arial, Helvetica, sans-serif; color:#FFFFFF; margin-right: 3px; padding: 1px 3px 1px 3px }
.paging a { font: bold 12px Arial, Helvetica, sans-serif; color:#000000; text-decoration: none; margin-right: 3px; border: 1px solid #ffffff; background: #fd7d0f; padding: 1px 3px 1px 3px }
.paging a:hover { font: bold 12px Arial, Helvetica, sans-serif; color:#000000; text-decoration: none; border: 1px solid #ffffff; background: #ffffff; }
.colFirstName{width:18%;text-align:left;}
.colLastName{width:18%;text-align:left;}
.colPhone{width:14%;text-align:left;}
.colEmail{width:19%;text-align:left;}
.colContactType{width:18%;text-align:left;}
.colOperation{width:50px;text-align:center;}


Final Output :

Download Link : Click Here

How to make AJAX Call for Database Transaction

At Page Behind make your method :

[System.Web.Services.WebMethod]
public static string SavePopUpData(string Id)
{
     //-- Your Save Data Code

}


 //-- Put following code in script tag and it will call above method using AJAX request :

In url : ""
In data:""

$.ajax({
                    type: "POST",
                    url: "Test.aspx/SavePopUpData",
                    data: "{Id':'1'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(msg) {
                        AlertMsg = msg.d;
                        if (AlertMsg.length > 0)
                           alert("Data Saved");
                    },
                    error: function(msg) {

                    }
                });