0

jqGridでAsp.Net MVC5アプリケーションを開発しています。大学と宗教の 2 つのモデルがあります。

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

上記の 2 つのクラスがネストされている 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 の [追加] オプションをクリックして詳細を入力した後 (Uiversity と Religion はドロップダウンであり、学生のネストされたモデルです)。埋められたデータは Controller に渡されます。

    [HttpPost]
    public void AddEditStudent(Student StudentModel)
    {

    }

しかし、コントローラーで受信したデータを確認すると、次のデータを受け取ります: StudentName DOB Gender

しかし、これらは無効になりつつあります：大学の宗教

注：この問題はjqGridの場合にのみ発生します。ページ（同じテキストボックスとドロップダウン）から送信すると、すべて問題ありません。

4

2 に答える 2

0

これは、私の 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; }
}

JQ Grid では、あなたの方法とは少し異なる方法でオプションをバインドします。これは、オプションを University 列にバインドする方法です。

editoptions : "1:スタンフォード;2:ハーバード;3:イェール"

保存すると、選択したオプションの Id が Student オブジェクトの対応するプロパティにマップされます (jqGrid の saveRow 関数を使用してデータを送信していると仮定しています)。

于 2015-03-12T12:25:39.233 に答える