Asp.net MVC 2 JqueryGrid table row empty

Question

I need some help with asp.net mvc

Controller:

<HandleError()> _
Public Class HomeController
    Inherits System.Web.Mvc.Controller

    Function Index() As ActionResult
        ViewData("Message") = "Welcome to ASP.NET MVC!"

        Return View()
    End Function

    Public Function GetMovieData() As ActionResult
        Dim sortColumn As String = (Request.Params("sidx")).ToString()
        Dim sortOrder As String = (Request.Params("sord")).ToString()
        Dim pageIndex As Integer = Convert.ToInt32(Request.Params("page"))
        'Remember this is NOT 0 based
        Dim rowCount As Integer = Convert.ToInt32(Request.Params("rows"))
        Dim movies As New Movies()
        Dim movieList = movies.GetMovies()
        Dim totalRecords As Integer = movieList.Count()
        Dim totalPages As Integer = CInt(Math.Ceiling(CSng(totalRecords) / CSng(rowCount)))

        ' Dim allRecords As IQueryable(Of Movie)
        ' allRecords = movieList.OrderBy(Function(movie) movie.Id).Skip((pageIndex - 1) * rowCount).Take(rowCount)
        'movieList = movieList.AsQueryable().OrderBy(Function(movie) movie.Id).Skip((pageIndex - 1) * rowCount).Take(rowCount) 
        Dim finalList = movies.Sort(movieList, sortColumn, sortOrder).Skip((pageIndex - 1) * rowCount).Take(rowCount)

        Dim jsonData = New With { _
                .total = totalPages, _
                .page = pageIndex, _
                .records = totalRecords, _
                .rows = (From m In finalList _
                    Select New With { _
                        .i = m.Id, _
                        .cell = New String() {m.Id.Value.ToString(), m.Name, m.Director, m.ReleaseDate.ToShortDateString(), m.IMDBUserRating, m.Plot, m.ImageURL} _
                    } _
                ).ToList()
                        }
        Return Json(jsonData)
    End Function

    Function About() As ActionResult
        Return View()
    End Function
End Class

View:

<%@ Page Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>
<asp:Content ID="PageHead" ContentPlaceHolderID="Head" runat="server" >
<link rel="stylesheet" type="text/css" media="screen" href="../../Scripts/grid/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../Scripts/grid/redmond/jquery-ui-1.8.2.custom.css" />
<script src="../../Scripts/grid/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/grid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Scripts/grid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%= Html.Encode(ViewData("Message")) %></h2>

    <script type="text/javascript">
        $(function () {
            $("#list").jqGrid({
                url: '/Home/GetMovieData',
                datatype: 'json',
                mtype: 'GET',
                colNames: ['id', 'Movie Name', 'Directed By', 'Release Date', 'IMDB Rating', 'Plot', 'ImageURL'],
                colModel: [
                  { name: 'id', index: 'Id', width: 55, sortable: false, hidden: true },
                  { name: 'Movie Name', index: 'Name', width: 250 },
                  { name: 'Directed By', index: 'Director', width: 250, align: 'right' },
                  { name: 'Release Date', index: 'ReleaseDate', width: 100, align: 'right' },
                  { name: 'IMDB Rating', index: 'IMDBUserRating', width: 100, align: 'right' },
                  { name: 'Plot', index: 'Plot', width: 55, hidden: true },
                  { name: 'ImageURL', index: 'ImageURL', width: 55, hidden: true}],
                pager: '#pager',
                rowNum: 10,
                rowList: [10, 20, 30],
                sortname: 'invid',
                sortorder: 'desc',
                viewrecords: true,
                caption: 'My first grid'
            });
        }); 
</script>
<table id="list"></table> 
<div id="pager"></div> 


    <p>
        To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc&lt;/a&gt;.
    </p>
</asp:Content>

When I run this code the table is always empty.

Answer 1

Just make sure to allow GET requests when returning JSON in the GetMovieData action because by default they are disabled:

Return Json(jsonData, JsonRequestBehavior.AllowGet)

I would recommend you using FireBug which allows you to see AJAX requests and possible error messages. It's much easier to debug problems like this.