I cannot get my jqGrid to populate

Question

Edited with working code as per Mark's answer below.

I'm really starting to loath MVC. I have been trying all day to get a simple grid to work, but I'm having more luck banging a hole in my desk with my head.

I'm trying to implement a search page that displays the results in a grid. There are 3 drop-down lists that the user can use to select search criteria. They must select at least one. After they have searched, the user will be able to select which records they want to export. So I will need to include checkboxes in the resulting grid. That's a future headache.

Using JqGrid and Search form - ASP.NET MVC as a reference I have been able to get the grid to appear on the page (a major achievement). But I can't get the data to populate.

BTW, jqGrid 4.4.4 - jQuery Grid

here is my view:

@model Models.ExportDatex

<script type="text/javascript">

  $(document).ready(function () {
    $('#btnSearch').click(function (e) {

        var selectedSchool = $('#ddlSchool').children('option').filter(':selected').text();
        var selectedStudent = $('#ddlStudent').children('option').filter(':selected').text();
        var selectedYear = $('#ddlYear').children('option').filter(':selected').text();
        var selectedOption = $('#exportOption_1').is(':checked');

        if (selectedSchool == '' && selectedStudent == '' && selectedYear == '') {
            alert('Please specify your export criteria.');
            return false;
        }

        selectedSchool = (selectedSchool == '') ? ' ' : selectedSchool;
        selectedStudent = (selectedStudent == '') ? ' ' : selectedStudent;
        selectedYear = (selectedYear == '') ? ' ' : selectedYear;

        var extraQueryParameters = {
            school: selectedSchool,
            student: selectedStudent,
            year: selectedYear,
            option: selectedOption
        };

        $('#searchResults').jqGrid({
            datatype: 'json',
            viewrecords: true,
            url: '@Url.Action("GridData")?' + $.param(extraQueryParameters),
            pager: '#searchResultPager',
            colNames: ['SchoolID', 'Student Name', 'Student ID', 'Apprenticeship', 'Result'],
            colModel: [
                { name: 'SchoolID' },
                { name: 'Student Name' },
                { name: 'StudentID' },
                { name: 'Apprenticeship' },
                { name: 'Result' }]
        }).trigger('reloadGrid', [{ page: 1 }]);
    });
  });

</script>

@using (Html.BeginForm("Index", "Datex", FormMethod.Post))
{
  <h2>Export to Datex</h2>
  <div class="exportOption">
    <span>
        @Html.RadioButtonFor(model => model.ExportOption, "true", new { id = "exportOption_1" })
        <label for="exportOption_1">VET Results</label>
    </span>
    <span>
        @Html.RadioButtonFor(model => model.ExportOption, "false", new { id = "exportOption_0" })
        <label for="exportOption_0">VET Qualifications</label>
    </span>
</div>

<div class="exportSelectionCriteria">
    <p>Please specify the criteria you want to export data for:</p>

    <table>
        <tr>
            <td>School:</td>
            <td>@Html.DropDownListFor(model => model.SchoolID, Model.Schools, new { id = "ddlSchool" })</td>
        </tr>
        <tr>
            <td>Student: </td>
            <td>@Html.DropDownListFor(model => model.StudentID, Model.Students, new { id = "ddlStudent" })</td>
        </tr>
        <tr>
            <td>Year Completed:
            </td>
            <td>
                @Html.DropDownListFor(model => model.YearCompleted, Model.Years, new { id = "ddlYear" })
            </td>
        </tr>
    </table>
    <table id="searchResults"></table>
    <div id="searchResultPager"></div>
  </div>
  <div class="exportSearch">
    <input type="button" value="Search" id="btnSearch" />
    <input type="submit" value="Export" id="btnExport" />
  </div>
}

Here is my Controller. As we don't have a database yet, I am just hardcoding some results while using an existing table from a different DB to provide record IDs.

[HttpGet]
public JsonResult GridData(string sidx, string sord, int? page, int? rows, string school, string student, string year, string option)
{
  using (SMIDbContainer db = new SMIDbContainer())
  {
      var ds = (from sch in db.SCHOOLs
                where sch.Active.HasValue
                && !sch.Active.Value
                && sch.LEVEL_9_ORGANISATION_ID > 0
                select sch).ToList();

      var jsonData = new
      {
          total = 1,
          page = 1,
          records = ds.Count.ToString(),
          rows = (
          from tempItem in ds
          select new
          {
              cell = new string[]{
                  tempItem.LEVEL_9_ORGANISATION_ID.ToString(),
                  tempItem.SCHOOL_PRINCIPAL,
                  "40161",
                  "No",
                  "Passed (20)"
              }
          }).ToArray()
      };
      return Json(jsonData, JsonRequestBehavior.AllowGet);
  }
}

Answer 1

Is the JSON you are passing back to the grid valid? Are you passing back the information that the jqGrid needs? Why setup your jqGrid inside of an ajax call instead of inside your $(document).ready(function () { ?

Here is an example of the portion of code I use to format my json for jqGrid:

 var jsonData = new
            {
                total = (totalRecords + rows - 1) / rows,
                page = page,
                records = totalRecords,                
                rows = (
                    from tempItem in pagedQuery
                    select new
                    {
                        cell = new string[] {
                            tempItem.value1,
                            tempItem.value2, ........

                     }
               }).ToArray()
      };
      return Json(jsonData, JsonRequestBehavior.AllowGet);

If you want to make your user search first, you can on the client side, set the jqgrid datatype: local and leave out the url. Then after your user does whatever you want them to do you can have the jqGrid go out and fetch the data, via something like:

 $('#gridName').jqGrid('setGridParam', { datatype: 'json', url: '/Controller/getGridDataAction' }).trigger('reloadGrid', [{ page: 1}]);

If you want to pass in the search data, or other values to the controller/action that is providing the data to the jqGrid you can pass it via the postData: option in the jqGrid. To set that before going out you can set it via the setGridParam option as shown above via postData: { keyName: pairData}.

MVC and jqGrid work great...there are a ton of examples on stackoverflow and Oleg's answers are a vast resource on exactly what you are trying to do. No hole in desk via head banging required!