MVC Webgrid example with paging, sorting & custom Design

Models:

public class EmailDetails
    {
        public Int32 ID { get; set; }
        public String EMPID { get; set; }
        public String EMailId { get; set; }
        public String empname { get; set; }
        public String EMAILSTATUS { get; set; }
        public String BCC { get; set; }
        public String CC { get; set; }
        public String EMAILSUBJECT { get; set; }
        public String ATTACHMENT { get; set; }
        public String BODY { get; set; }
    }

Controller: 

 public ActionResult List()
        {
            List<EmailDetails> lst = new List<EmailDetails>();
         
            DataSet objds = objBLLEmailServices.ExecuteDataset(objBLLEmailServices);
            foreach (DataRow dr in objds.Tables[0].Rows) // loop for adding add from dataset to list<modeldata>
            {
                lst.Add(new EmailDetails
                {
                    ID = Convert.ToInt32(dr["ID"]),
                    EMPID = dr["EMPID"].ToString(),
                    EMailId = dr["EMailId"].ToString(),
                    empname = dr["empname"].ToString(),
                    EMAILSTATUS = dr["EMAILSTATUS"].ToString(),
                    BCC = dr["BCC"].ToString(),
                    CC = dr["CC"].ToString(),
                    EMAILSUBJECT = dr["EMAILSUBJECT"].ToString(),
                    ATTACHMENT = dr["ATTACHMENT"].ToString(),
                    BODY = dr["BODY"].ToString()
                });
            }

            return View(lst);

        }

List.cshtml

@using ProjectName.Models;

@{
    ViewBag.Title = "List";
    Layout = "~/Views/Shared/_Layout.cshtml";
    @model IEnumerable<EmailDetails>
    WebGrid EmailDetails = new WebGrid(Model, rowsPerPage: 5);
}
<style type="text/css">
    .bg-info {
        background:#fff;
    }

</style>
<h2>List</h2>
<div class="row">
    <div class="table-responsive">
     
        @EmailDetails.GetHtml(

    tableStyle: "table table-bordered  bg - info", // applying style on grid
   rowStyle: "bg-info",
    alternatingRowStyle: "bg-info",
    fillEmptyRows: false,
    //show empty row when there is only one record on page to it will display all empty rows there.
    headerStyle: "bg-info", //applying style.

    footerStyle: "bg-info", //applying style.

    mode: WebGridPagerModes.All, //paging to grid
    firstText: "<< First",
    previousText: "< Prev",
    nextText: "Next >",
    lastText: "Last >>",

    columns: new[]  // colums in grid
    {
        /*EmailDetails.Column(columnName:"Username",header:"User Name"),*/ //the model fields to display
        EmailDetails.Column(columnName:"empname",header:"Emp name"), //the model fields to display
        EmailDetails.Column(columnName:"EMailId",header:"EMail Id", format: (item) => new HtmlString(item.EMailId)),
        EmailDetails.Column(columnName:"EMAILSUBJECT",header:"EMAIL SUBJECT"),
        EmailDetails.Column(columnName:"CC",header:"CC"),
        EmailDetails.Column(columnName:"BCC",header:"BCC"),

        EmailDetails.Column(columnName:"BODY",header:"BODY", format: (item) => new HtmlString(item.BODY)),
  })


    </div>
    </div>