Asp.Net MVC5 - Passing Nested model from View to Controller through jqGrid Add dialogue

I am developing Asp.Net MVC5 Application with jqGrid. i have two models University and Religion.

public class University
{
    public int UniversityID { get; set; }
    public string UniversityName { get; set; }
}

public class Religion
{
    public int ReligionID { get; set; }
    public string ReligionName { get; set; }
}

I have a model called Student in which the above two classes are nested.

public class Student
{
    public int StudentId { get; set; }
    public string StudentName { get; set; }
    public DateTime DOB { get; set; }
    public string Gender { get; set; }
    public University University { get; set; }
    public Religion Religion { get; set; }
}

I filled the jqGrid with list of students.

//jqGrid binding through ajax Post
var jsonUnivList = $.parseJSON('@Html.Raw(Json.Encode(Model.Universities))'); //IEnumerable list of Universities
var jsonReligionList = $.parseJSON('@Html.Raw(Json.Encode(Model.Religions))'); // IEnumerable list of Religion

$("#list2").jqGrid({
    url: '/Student/StudentGridData',
    datatype: "json",
    colNames: ['Student Id', 'Student Name', 'Gender', 'DOB', 'University', 'Religion'],
    colModel: [
        { name: 'StudentId', index: 'StudentId', width: 70, hidden: true },
        { name: 'StudentName', index: 'StudentName', width: 130, sortable: true, editable: true, formoptions: { label: 'Name *' }, editoptions: { class: "validate[required]", "data-errormessage-value-missing": "*Name Required", "onblur": "$(this).validationEngine('validate');" } },
        {
            name: 'Gender', index: 'Gender', width: 80, align: "right", sortable: true, editable: true, edittype: 'select',
            editoptions:
                {
                    value: { '': '--select gender--', 'M': 'MALE', 'F': 'FEMALE' }
                }
        },
        { name: 'DOB', index: 'DOB', formatter: 'date', formatoptions: { srcformat: 'd/m/Y', newformat: 'ShortDate' }, width: 150, align: "right", sortable: true, editable: true, formoptions: { label: 'DOB *' }, editoptions: { class: "validate[required]", "data-errormessage-value-missing": "*DOB Required", "onblur": "$(this).validationEngine('validate');" } },
        {
            name: 'University.UniversityName', index: 'University.UniversityName', width: 150, align: "right", sortable: true, editable: true, edittype: 'select', formoptions: { label: 'Name *' },
            editoptions:
                {
                    dataUrl: '',
                    buildSelect: function (data) {
                        var s = '<select name="UniversityID" >';
                        if (jsonUnivList && jsonUnivList.length) {
                            for (var i = 0, l = jsonUnivList.length; i < l ; i++) {
                                s += '<option value="' + jsonUnivList[i].UniversityID + '">' + jsonUnivList[i].UniversityName + '</option>';
                            }
                        }
                        return s + "</select>";
                    },
                    class: "validate[required]", "data-errormessage-value-missing": "*University Required", "onblur": "$(this).validationEngine('validate');"
                }
        },
        {
            name: 'Religion.ReligionName', index: 'Religion.ReligionName', width: 150, align: "right", sortable: true, editable: true, edittype: 'select', formoptions: { label: 'Name *' },
            editoptions:
                {
                    dataUrl: '',
                    buildSelect: function (data) {
                        var s = '<select name= "ReligionID">';
                        if (jsonReligionList && jsonReligionList.length) {
                            for (var i = 0, l = jsonReligionList.length; i < l ; i++) {
                                s += '<option value="' + jsonReligionList[i].ReligionID + '">' + jsonReligionList[i].ReligionName + '</option>';
                            }
                        }                            
                        return s + "</select>";
                    },
                    class: "validate[required]", "data-errormessage-value-missing": "*Religion Required", "onblur": "$(this).validationEngine('validate');"                        
                }
        }
    ],
    rowNum: 10,
    rowList: [10, 20, 30],
    pager: '#pager2',
    sortname: 'StudentId',
    mtype: 'POST',
    viewrecords: true,
    sortorder: "desc",
    caption: "Student List",
    editurl: '/Student/AddEditStudent'
});
$("#list2").jqGrid('navGrid', '#pager2',
    {
        edit: true, add: true, del: true, search: true,
        searchtext: "Search", addtext: "Add", edittext: "Edit", deltext: "Delete"
    }


);

After i clicked on Add option of jqGrid and filled the details (Uiversity and Religion are dropdowns - nested models of student). The filled data will be passed to Controller.

    [HttpPost]
    public void AddEditStudent(Student StudentModel)
    {

    }

But when i check the data received in controller, i recieve the following data: StudentName DOB Gender

But these are coming null: University Religion

Note: This problem arise only in the case of jqGrid, If i submit from page(same textboxes and dropdown) then everything is ok.

Finally i figured it out

{
            name: 'University.UniversityID', index: 'University.UniversityName', jsonmap: "University.UniversityName", width: 150, align: "right", sortable: true, editable: true, edittype: 'select', formoptions: { label: 'University *', name: "University.UniversityID" },
            editoptions:
                {
                    value: valUnivList, // List of university as keyvalue pair
                    class: "validate[required]", "data-errormessage-value-missing": "*University Required", "onblur": "$(this).validationEngine('validate');"
                }
        }

this is the sample colModel of University, here the field which we want to submit to controller should be given in name attribute, and the field which is to be displayed in grid should be given in jsonmap attribute.