Asp.Net MVC5 - 通过 jqGrid 添加对话将嵌套模型从视图传递到控制器

Question

我正在使用 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 的添加选项并填写详细信息后（大学和宗教是下拉列表 - 学生的嵌套模型）。填充的数据将传递给Controller。

    [HttpPost]
    public void AddEditStudent(Student StudentModel)
    {

    }

但是当我检查控制器接收到的数据时，我收到以下数据：学生姓名出生日期性别

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

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

Answer 1

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

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 函数提交数据。）

Answer 2

我终于明白了

{
            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，这里我们要提交给控制器的字段应该在名称属性中给出，并且要在网格中显示的字段应在 jsonmap 属性中给出。

Asp.Net MVC5 - 通过 jqGrid 添加对话将嵌套模型从视图传递到控制器

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

asp.net-mvc

jqgrid

jqgrid-asp.net

mvcjqgrid

asp.net-mvc-5