I want the grid to appear when my page is loaded populated, by a json object which is derived from a generic list of objects (C#) held in  a session variable on teh server. If the session variable is empty it is fine for an empty grid to be displayed.

I also want users to be able to add or removed rows in the grid. Rows can be added by entering parameters for various fields and posting them to the server where a database query is performed. The results of this query are added to the session variable and the new value of the variable is sent back to the grid.

What I am finding is that I can do either of these things separately but I can't get both to happen from the same page. It is as though the page is in a state after the first retrieve (which is a GET action) that makes it unable to do the second retrieve (which is a POST). I can see that the function to display the grid is being reached the second time, but the nothing happens on the server.

My code is below, apologies if the formatting makes it difficult to follow.

Any help would be appreciated.

Here is the script to call the grid display functon:

<script type="text/javascript">

   $(document).ready(function() { 

      ShowGrid("json", "GET");

      $("#btnAdd").click(function(event) {

          ShowGrid("json", "POST");

      });

   }); 

</script>

Here is the grid:

<script type="text/javascript">

   function ShowGrid(dataType, mType){

      var jqDataUrl = "AddWork";

      $("#jqTable").jqGrid({

         url: jqDataUrl,

        datatype: dataType,

        mtype: mType,

        colNames: ["IRN", "Parent", "AccNo", "Creator", "Title", "Date"],

        colModel: [

             { name: "IRN", index: "IRN", width: 8, align: "left" },

             { name: "ParentIRN", index: "ParentIRN", width: 12, align: "left" },

             { name: "AccNo", index: "AccNo", width: 20, align: "left" },

             { name: "Creator", index: "Creator", width: 30, align: "left" },

             { name: "Title", index: "Title", width: 100, align: "left" },

             { name: "Date", index: "Date", width: 10, align: "left" }],

       width: 1200,

       height: 500,

       multiselect: true,

       viewrecords: true,

       scroll:true,

       rowNum: -1,

       gridview: true,

       multikey: shiftKey,

       sortname: "IRN",

       sortorder: "asc",

       postData: { Artist: $("#Artist").val(), Title: $("#Title").val(), AccNo: $("AccNo").val(), Irn: $("Irn").val() }

       });

   }

</script>

Here is the MVC server side function:

public ActionResult AddWork(string sidx, string sord, int page, int rows, string[] postData, string Artist, string Title, string Irn, string AccNo )

{

if (Request.HttpMethod == "POST")

{

    string irn = Irn == null ? null : Irn;

    string accNo = AccNo == null ? null : AccNo;

    string artist = Artist == "" ? null : Artist;

    string title = Title == "" ? null : Title;

    IList<ImagingWork> works = cmsWorksConverter.ConvertToImagingWorks(this.cMSWorkRepository.GetWorks (irn,accNo, artist, title));

 if (this.sessionWrapper.ImagingWorks != null)

{

     foreach (ImagingWork work in works)

    {

       this.sessionWrapper.ImagingWorks.Add(work);

    }

}

else

      this.sessionWrapper.ImagingWorks = works;

}

if (this.sessionWrapper.ImagingWorks != null)

{

     var imagingWorks = this.sessionWrapper.ImagingWorks.AsQueryable();

     // Send the data to the jQGrid

     var jsonData = new

     {

         total = "",

         page = "",

         records = "",

         rows = (from work in imagingWorks

         select new

        {

             Id = GetId(),

            cell = new string[]{

            work.IRN,

            work.ParentIRN,

            work.AccNo,

            work.Creator,

            work.Title,

           work.Date

      }).ToArray()

    };

    return Json(jsonData);

  }

    return null;

}