How to bind Model List data to Jqgrid present in a view, mvc

Question

hii to all,

  I have requirement that i need to display a table data in JqGrid present in a sqlserevr database using Entity Framework.Iam trying with ViewBag to bind data to JqGrid but iam unable to meet my requirement,please help me how to meet my requirement using ViewBag or provide any other alternatives to achieve my requirement.

=>This is My Controller Code:-

 public ActionResult Index(TableData model)

        {

            //ViewBag.Message = "Welcome to ASP.NET MVC!";

            Employee empDetails = new Employee();

            using (personalEntities db = new personalEntities())

            {

                var emply = (from p in db.empdetails

                             select p);

                model.getobj = emply.ToList();

                ViewBag.Name= model.getobj.ToList();

            }

            return View(model);

        }

=>This is My Employee Model Code:-

public class Employee

    {

        public int EmployeeId { get; set; }

        public string EmpName { get; set; }

        public string Designation { get; set; }

        public int Salary { get; set; }

        public int DeptNo { get; set; }

    }

=>This is My TableData Model Code:-

public class TableData

    {

        public List<empdetail> getobj { get; set; }

    }

=>This is My View code:-

@model JQGrid.Models.TableData

@{

    ViewBag.Title = "Home Page";

}

   var x = @ViewBag.Name 

      

<link href="@Url.Content("~/Content/themes/base/ui.jqgrid.css")" rel="stylesheet" type="text/css" />

 

<script src="@Url.Content("~/JS/jquery-1.7.2.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/JS/jquery.jqGrid.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/JS/grid.locale-en.js")" type="text/javascript"></script>

<table id="student-grid-array"></table>

<script type="text/javascript">

    $("#student-grid-array").jqGrid({

        datatype: "local",

        colNames: ["EmployeeID", "EmpName", "Designation", "Salary","DeptNo"],

        colModel:[

                { name: "EmployeeID", index: "EmployeeID" },

                { name: "EmpName", index: "EmpName" },

                { name: "Designation", index: "Designation" },

                { name: "Salary", index: "Salary", sorttype: "int" },

                {name:"DeptNo", index: "DeptNo",sorttype:"int"}

            ],

        multiselect: true,

        shrinkToFit: false,

        caption: "Employee List - Loading via Array"

    });

for (var i = 0; i <= x.length; i++) {

        $("#student-grid-array").addRowData(i,getobj[i]);

    }

</script>

In the top third line(i.e in view code) i tried to store viewbag data to some variable "x" but i was unable to do that,please guide me how to achieve this task,thanks in advance

Thanks

Ramu