0

我正在使用 jqGrid 开发 Asp.Net MVC5 应用程序。我有两个模型大学和宗教。

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; }
}

我有一个名为 Student 的模型，其中嵌套了上述两个类。

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; }
}

我用学生名单填写了 jqGrid。

//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"
    }


);

在我单击 jqGrid 的添加选项并填写详细信息后（大学和宗教是下拉菜单 - 学生的嵌套模型）。填充的数据将传递给控制器​​。

    [HttpPost]
    public void AddEditStudent(Student StudentModel)
    {

    }

但是当我检查控制器中收到的数据时，我收到以下数据：StudentName DOB Gender

但这些都将无效：大学宗教

注意：此问题仅在 jqGrid 的情况下出现，如果我从页面提交（相同的文本框和下拉菜单），那么一切正常。

4

2 回答 2

0

这就是我对学生对象建模的方式：

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; }
}

在 JQ Grid 中，我绑定选项的方式与您的方式略有不同。这就是我将选项绑定到大学列的方式：

编辑选项：“1：斯坦福；2：哈佛；3：耶鲁”

现在当你保存时，所选选项的Id会映射到Student对象的相应属性（我假设你使用jqGrid的saveRow函数来提交数据。）

于 2015-03-12T12:25:39.233 回答
0

最后我想通了

{
            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');"
                }
        }

这是大学的示例 colModel，这里我们要提交给控制器的字段应该在 name 属性中给出，要在网格中显示的字段应该在 jsonmap 属性中给出。

于 2015-03-13T10:47:19.830 回答