Question

I have a grid that fills select lists from a dataurl in the jqGrid edit form. These values populate successfully on the get. I am pulling back my data as json and there is a custom type of LookupItem w/fields Id and Name for the items that show in the select list – this part works fine. For example I have an object model representing a scheduled course (in 2nd code example below) which has a Location field which is of type LookupItem, and LookupItem has Id and Name fields.

My issue is that these fields are not posting back to the server though in my ActionResult method – i am getting null. I added a custom_func function and have verified that the value parameter holds the Id that I am looking for, but I’m not sure how to get that posted to the ActionResult method. Any ideas?

HTML/jqGrid code:

            $("#grid").jqGrid({
            url: 'ABC.Admin/CourseAdmin/GetScheduledCourses/',
            datatype: 'json',
            jsonReader: { repeatitems: false },
            mtype: 'GET',
            colNames: ['Id', 'Date', 'LocationId', 'Location', 'TimeId', 'Time', 'CostId', 'Cost', 'InstructorId', 'Instructor', 'Additional Info'],
            colModel: [
              { name: 'ScheduledCourseId', index: 'ScheduledCourseId', width: 40, key: true, hidden: true },
              { name: 'ScheduledCourseDate', index: 'ScheduledCourseDate', width: 50, editable: true },
              { name: 'Location.Id', index: 'Location.Id', width: 25, editable: false, hidden: true },
              { name: 'Location.Name', index: 'Location.Name', width: 150, editable: true, edittype: 'select',
                  editoptions: {
                      dataUrl: 'ABC.Admin/CourseAdmin/GetLookupItems?lookupType=locations',
                      buildSelect: createSelectList
                  },
                  editrules: {
                    custom: true, 
                    custom_func: locationCheck
                  }

              },
              { name: 'Time.Id', index: 'Time.Id', width: 25, editable: false, hidden: true },
              { name: 'Time.Name', index: 'Time.Name', width: 50, editable: true, edittype: 'select',
                  editoptions: {
                      dataUrl: 'ABC.Admin/CourseAdmin/GetLookupItems?lookupType=times',
                      buildSelect: createSelectList
                  }
              },
              { name: 'Cost.Id', index: 'Cost.Id', width: 25, editable: false, hidden: true },
              { name: 'Cost.Name', index: 'Cost.Name', width: 50, editable: true, edittype: 'select',
                  editoptions: {
                    dataUrl: 'ABC.Admin/CourseAdmin/GetLookupItems?lookupType=costs',
                    buildSelect: createSelectList 
                  }
              },
              { name: 'Instructor.Id', index: 'Instructor.Id', width: 25, editable: false, hidden: true },
              { name: 'Instructor.Name', index: 'Instructor.Name', width: 100, editable: true, edittype: 'select',
                  editoptions: {
                      dataUrl: 'ABC.Admin/CourseAdmin/GetLookupItems?lookupType=instructors',
                      buildSelect: createSelectList                      
                      }
              },
              { name: 'AdditionalInfo', index: 'AdditionalInfo', width: 200, editable: true, edittype: 'textarea',
                  editoptions: {
                      rows: "6", 
                      cols: "40"
                  } 
              },
            ],
            pager: jQuery('#pager'),
            rowNum: 20,
            sortname: 'Date',
            sortorder: "asc",
            viewrecords: true,
            caption: 'Scheduled Courses',
            height: 400,
            loadonce: true, // needs to be true for client side paging to work
            autowidth: true,
            loadtext: 'Loading...'
        })
        $("#grid").jqGrid('navGrid', '#pager', { edit: true, add: true, del: true },
            { /* edit options */
                url: 'ABC.Admin/CourseAdmin/UpdateScheduledCourse/',
                closeOnEscape: true,
                closeAfterEdit: true,
                width: 450
            },
            { /* add options */
                url: 'ABC.Admin/CourseAdmin/CreateScheduledCourse/',
                closeOnEscape: true,
                closeAfterAdd: true
            },
            { /* delete options */
                url: 'ABC.Admin/CourseAdmin/DeleteScheduledCourse/',
                closeOnEscape: true
            }
        );

    });

        function locationCheck(value, colname) {
            debugger;
            if (value < 0 || value > 20)
                return [false, "Please enter value between 0 and 20"];
            else
                return [true, ""];
        }

Object Model for ScheduledCourse:

public class ScheduledCourse
    {
        public ScheduledCourse() { }
    //for admin scheduled course page
    public ScheduledCourse(int scheduledCourseId, string scheduledCourseDate, int locationId, string locationName,
        int timeId, string timeName, int costId, string costName, int instructorId, string instructorName, string additionalInfo)
    {
        this.ScheduledCourseId = scheduledCourseId;
        this.ScheduledCourseDate = scheduledCourseDate;
        this.Location = new LookupItem(locationId, locationName);
        this.Time = new LookupItem(timeId, timeName);
        this.Cost = new LookupItem(costId, costName);
        this.Instructor = new LookupItem(instructorId, instructorName);
        this.AdditionalInfo = additionalInfo;
    }

    public int ScheduledCourseId { get; set; }
    public string ScheduledCourseDate { get; set; }
    public LookupItem Location { get; set; }
    public LookupItem Time { get; set; }
    public LookupItem Cost { get; set; }
    public LookupItem Instructor { get; set; }
    public string UserName { get; set; }
    public string AdditionalInfo { get; set; }
}
public class LookupItem
{
    public LookupItem(int id, string name)
    {
        this.Id = id;
        this.Name = name;
    }

    public int Id { get; set; }
    public string Name { get; set; }
}

Controller code:

        //colNames: ['Id', 'Date', 'LocationId', 'Location', 'TimeId', 'Time', 'CostId', 'Cost', 'InstructorId', 'Instructor', 'Additional Info'],
    [HttpPost]
    public ActionResult UpdateScheduledCourse(string oper, int id, string scheduledCourseDate, string location, string locationId, string timeId, 
        string timeName, string costId, string costName, string instructorId, string instructorName, string additionalInfo)
    {
        Models.ScheduledCourseProvider p = new Models.ScheduledCourseProvider();

        //Models.ScheduledCourse o = new Models.ScheduledCourse(
        //    id, scheduledCourseDate, Convert.ToInt32(locationId), locationName, Convert.ToInt32(timeId), timeName, Convert.ToInt32(costId), 
        //    costName, Convert.ToInt32(instructorId), instructorName, additionalInfo);

        //bool saved = p.UpdateScheduledCourse(o);

        bool saved = false;
        if (!saved)
        {
            Response.StatusCode = 500;
            return Content("Record not saved!");
        }
        else
        {
            return Json(false);
        }
    }

Here are the params that are being passed to the server when the ActionResult method is called in the controller (http://localhost:30320/OrchardLocal/ABC.Admin/CourseAdmin/UpdateScheduledCourse/) – notice the dot notation being used because I am using a shared type of LookupItem:

ScheduledCourseDate=07%2F01%2F2011&Location.Name=10016&Time.Name=1014&Cost.Name=1001&Instructor.Name=10001&AdditionalInfo=blahblahblah&oper=edit&id=12126

Answer 1

First of all you should change the name properties of columns to have no dot inside. For example you can use underscore instead. Additionally I am not sure that you need 'Location.Id', 'Time.Id' and 'Instructor.Id'. If it’s required on the server you can use name: 'location', jsonmap: 'Location.Name'. In the same way you can use name: 'scheduledCourseDate', jsonmap: 'ScheduledCourseDate' instead of name: 'ScheduledCourseDate'.

After the changes the choosed ids from selects will be posted by short names ‘location’, ‘time’ and ‘instructor’. So you can use the names in UpdateScheduledCourse method

[HttpPost]
public ActionResult UpdateScheduledCourse(string oper, int id, string scheduledCourseDate,
    string location, string time, string cost, string instructor, string additionalInfo)