How to bind data to Grid in MVC3?

Question

For past few days I had been working with MVC...

I have to show a bunch of data in a grid...these all days I managed to show it in a table but my requirement is to bind it to jquery grid or Webgrid...

I am stuck with this I don't know how to do this expecting ideas and suggestions....

Controller

     public ActionResult Index()
    {
        var bugList = GetList();
        return View(bugList);
    }
    public List<ProjectModel> GetList()
    {
        var modelList = new List<ProjectModel>();
        using (SqlConnection conn = new SqlConnection("Data Source=LMIT-0039;Initial Catalog=BugTracker;Integrated Security=True"))
        {
            conn.Open();
            SqlCommand dCmd = new SqlCommand("Select * from Projects", conn);
            SqlDataAdapter da = new SqlDataAdapter(dCmd);
            DataSet ds = new DataSet();
            da.Fill(ds);
            conn.Close();
            for (int i = 0; i <= ds.Tables[0].Rows.Count - 1; i++)
            {
                var model = new ProjectModel();
                model.ID = Convert.ToInt16(ds.Tables[0].Rows[i]["ProjectID"]);
                model.projectName = ds.Tables[0].Rows[i]["projectName"].ToString();
                model.Description = ds.Tables[0].Rows[i]["Description"].ToString();
                model.status = ds.Tables[0].Rows[i]["Status"].ToString();
                modelList.Add(model);
            }
        }
        return modelList;
    } 

View (ASPX)

<table>
<thead align="center">
<tr class="BoldCenterAlignHeaderStyle">    

    <th>
        ProjectName
    </th>    
    <th>
       Status
    </th>  
    <th align="center">
    Edit
    </th>          
</tr>
</thead> 
     <% foreach (var item in Model) { %>  
      <tr>        
        <td> 
        <%:Html.LabelForModel(item.projectName) %> 
        </td>       
       <td>
       <%:Html.LabelForModel(item.status) %>
       </td>
       <td align="center">
         <a href="<%:Url.Action("Edit",new{id=item.ID}) %>" class="Edit"><img src="../../Content/edit.gif"  height="8px"/></a>
          <%--<%:Html.ActionLink("Edit", "Edit", new { id = item.ID })%> --%>          
         <%--  <a href="<%:Url.Action("Delete",new{id=item.ID}) %>" class="Delete"><img src="../../Content/delete.gif" height="8px" /></a>--%>
         </td>        
       </tr>
   <%} %>

if i can do paging in a table how can i do that or else how should i display he data in a grid can any one help me please....can any one explain me how to do this

Answer 1

Example for webgrid:

@model IEnumerable<ProjectModel>
@{
     var grid = new WebGrid(
     source: Model,
     rowsPerPage: 4);
}
@grid.GetHtml(
    tableStyle: "grid",
    headerStyle: "header",
    rowStyle: "row",
    footerStyle: "footer",
    alternatingRowStyle: "altRow",
    columns: grid.Columns (
      grid.Column("projectName"),
      grid.Column("ProjectID")
))

Answer 2

You can use Webgrid for this.

Here are few links for understanding how webgrid works

Introduction to webgrid

http://www.mikesdotnetting.com/Article/154/Looking-At-The-WebMatrix-WebGrid http://msdn.microsoft.com/en-us/magazine/hh288075.aspx

Paging in webgrid

http://yassershaikh.com/webgrid-paging-with-pager-method-in-razor-mvc/

Advanced (Efficient) Paging in Webgrid

http://www.dotnetcurry.com/ShowArticle.aspx?ID=615

Hope this helps..!