Asp.Net MVC5 - Passer le modèle imbriqué de la vue au contrôleur via jqGrid Ajouter un dialogue

Question

Je développe l'application Asp.Net MVC5 avec jqGrid. J'ai deux modèles Université et Religion. J'ai un modèle appelé Student dans lequel les deux classes ci-dessus sont imbriquées.

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

J'ai rempli le jqGrid avec la liste des étudiants.

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


); 

Après je cliqué sur l'option Ajouter des jqGrid et ils remplirent les détails (Uiversity et la religion sont dropdowns - modèles imbriqués d'étudiants). Les données remplies seront transmises au contrôleur.

[HttpPost] 
    public void AddEditStudent(Student StudentModel) 
    { 

    } 

Mais quand je vérifie les données reçues dans le contrôleur, je reçois les données suivantes: StudentName date de naissance Sexe

Mais ceux-ci sont à venir null: Université Religion

Note: Ce problème ne se pose que dans le cas de jqGrid, Si je soumets de la page (mêmes zones de texte et liste déroulante) alors tout va bien.

Answer 1

Enfin j'ai tout compris

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

c'est l'échantillon colModel de l'Université, correspondant ici e Le champ que nous voulons soumettre au contrôleur doit être donné dans l'attribut name, et le champ qui doit être affiché dans la grille doit être donné dans l'attribut jsonmap.

Answer 2

Voilà comment j'aurais modélisé mon objet étudiant:

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

Dans JQ Grille je lie les options d'une manière légèrement différente de la vôtre. Voici comment je lier les options à la colonne Université:

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

Maintenant lorsque vous enregistrez, l'identifiant de l'option sélectionnée sera mise en correspondance avec la propriété de l'objet étudiant (je suppose que vous utilisez la fonction saveRow de jqGrid soumettre des données.)