connect jquery grid to database

See more:

MVC4

Hi,
I have to fill dta into a jquery grid from database.

Now i have the following code:

1. In controller

namespace JQGrid.Controllers
{
public class SampleJQGridController : Controller
{
SampleDAL sampleDal = new SampleDAL();
public ActionResult Index()
{
return View();
}

public ActionResult UserListing()
{
return View();
}

public s_GridResult GetData(string sidx, string sord, int page, int pageSize)
{
DataTable dt = new DataTable();
dt = sampleDal.UserRetrieve();
s_GridResult result = new s_GridResult();
List<s_rowdata> rowsadded = new List<s_rowdata>();
int idx = 1;
foreach (DataRow row in dt.Rows)
{
s_RowData newrow = new s_RowData();
newrow.id = idx++;
newrow.cell = new string[2]; //total number of columns
newrow.cell[0] = row[0].ToString();
newrow.cell[1] = row[1].ToString();
rowsadded.Add(newrow);
}
result.rows = rowsadded.ToArray();
result.page = page;
result.total = dt.Rows.Count;
result.record = rowsadded.Count;
return result;
}
}
}


2. In View

@model JQGrid.Models.SampleJQGrid

@{
    ViewBag.Title = "UserListing";
}

<link href="../../Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../../Content/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />

<script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.jqgrid.min.js" type="text/javascript"></script>

    <table id="Grid1"  align="center" width="100%"></table>
    <div id="pager"  style="text-align:center;"></div>


<script type="text/javascript">
   jQuery(document).ready(function () {
             jQuery("#Grid1").jqGrid({
                 url: 'SampleJQGrid/GetData',
                 datatype: 'json',
                 mtype: 'GET',
                 colNames: ['Name', 'UserName'],
                 colModel: [{ Name: 'Name', index: 'Name', width: 200 },
                   { UserName: 'UserName', index: 'UserName', width: 300}],
                 pager: '#pager',
                 sortname: 'Name',
                 viewrecoreds: true
             }).navGrid(pager,{edit:true,add:true,del:true,refresh:true,search:true});
         });
</script>

3. In Model

namespace JQGrid.Models
{
public class SampleDAL
{
SqlConnection con = new SqlConnection();
SqlCommand cmd = new SqlCommand();

public void Getcon()
{
con.ConnectionString = ConfigurationManager.ConnectionStrings["MVC4SampleConnection"].ToString();
con.Open();
}

public DataTable UserRetrieve()
{
Getcon();
cmd.Connection = con;
cmd.CommandType = CommandType.StoredProcedure;
cmd.CommandText = "dbo.UserRetrieve";
SqlDataAdapter ad = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
ad.Fill(dt);
con.Close();
return (dt);
}

}
}

namespace JQGrid.Models
{
    public class SampleJQGrid
    {
    }

    public struct s_GridResult
    {
        public int page;
        public int total;
        public int record;
        public s_RowData[] rows;


    }
    public struct s_RowData
    {
        public int id;
        public string[] cell;
    }
}

Now when i run the application i am getting error as:"Microsoft JScript runtime error: Object doesn't support this property or method"

Please help to solve this.