How to bind data to Grid in MVC3? - asp.net-mvc-3

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">
<img src="../../Content/edit.gif" height="8px"/>
<%--<%:Html.ActionLink("Edit", "Edit", new { id = item.ID })%> --%>
<%-- <img src="../../Content/delete.gif" height="8px" />--%>
</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..!