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

Question

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.

score 0 · Answer 1 · answered Mar 12 '15 at 12:25

0

This is how I would have modeled my Student Object :

public class Student
{
    public int StudentId { get; set; }
    public string StudentName { get; set; }
    public DateTime DOB { get; set; }
    public string Gender { get; set; }
    public int UniversityID { get; set; }
    public int ReligionID { get; set; }
}

In JQ Grid I bind options in a slightly different manner than yours. This is how I would bind options to the University column :

editoptions : "1:Stanford;2:Harvard;3:Yale"

Now when you save, the Id of the selected option will be mapped to the corresponding property of Student object (I am assuming you are using saveRow function of jqGrid to submit data.)

answered Mar 12 '15 at 12:25

Aashish Upadhyay

840
1
7
22

Thanks for your reply. I am not using saveRow function. actually nested class properties University and Religion in student model is not mapped. rest of the properties in student are mapped. According to your answwer, is that a standard way to avoid nested models / classes ? – Mathew Abraham Mar 13 '15 at 04:31
University and Religion are going to be select controls and AFAIK the only thing you need to map for a select control is an Id – Aashish Upadhyay Mar 13 '15 at 06:35

score 0 · Accepted Answer · answered Mar 13 '15 at 10:47

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.

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

2 Answers2