Utilisation de JQGrid DataUrl avec ASP.net (MVC 2.0)

Question

Je souhaite afficher une liste déroulante avec une boîte de dialogue d'ajout/édition sur Jqgrid. Je pourrais le faire avec des valeurs codées en dur. Mais maintenant je veux remplir les données de la base de données (action du contrôleur). Quelqu'un peut-il m'aider à écrire le code du contrôleur pour DataUrl. (A-t-il besoin d'une chaîne au format JSON de valeur & Texte?). Ma définition de grille est comme ci-dessous.

Mes autres actions url fonctionnent correctement.

 jQuery("#myGrid").jqGrid({ 
      pager: jQuery('#myGridPager'), 
      sortname: 'Name', 
      rowNum: 10, 
      rowList: [10, 20, 50], 
      sortorder: "asc", 
      height: "auto", 
      autowidth: true, 
      colNames: ['Id', 'Name', 'Dept', 'Status', 'ParentNodeName'], 
      colModel: [ 
       { name: 'Id', index: 'Id', hidden: true, key : true }, 
       { name: 'Name', index: 'Name', width: 200, editable: true, edittype: "text", editrules: { required: true} }, 
       { name: 'Dept', index: 'Dept', width: 90, editable: true, editrules: { required: true} }, 
       { name: 'Status', index: 'Status', width: 25, editable: true, edittype: "select", editoptions: { value: "A:Active;I:Inactive"} }, 
       { name: 'ParentNodeName', 
         index: 'ParentNodeName', 
         editable: true, 
         edittype: "select", 
         editoptions: { dataUrl: "/MyEntity/GetMyEntitys" } 
        }, 
       ], 
      datatype: 'json', 
      viewrecords: true, 
      mtype: 'GET', 
      jsonReader: { 
       root: "rows", 
       page: "page", 
       total: "total", 
       records: "records", 
       repeatitems: false, 
       userdata: "userdata" 
      }, 
      url: "/MyEntity/GetMyEntitysData", 
      multiselect: false, 
      editurl: "/MyEntity/EditMyEntity?__SESSIONKEY=<%=Model.SessionKey %>", 
      caption: "Data Entry" 
     }) 
     .navGrid('#myGridPager', { view: true, del: true, add: true, edit: true }, 
     { height: 150, reloadAfterSubmit: false, modal: true }, // default settings for edit 
     { height: 150, reloadAfterSubmit: true, modal: true, url: "/MyEntity/AddMyEntity?__SESSIONKEY=<%=Model.SessionKey %>" }, // settings for add 
     { height: "auto", reloadAfterSubmit: false, modal: true, url: "/MyEntity/DeleteMyEntity?__SESSIONKEY=<%=Model.SessionKey %>" }, // delete 
     { closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options 
     {} /* view parameters*/ 
    ); 

Answer 1

jqGrid attendent (élément HTML valide <select> avec le <options> désiré: <select><option value='1'>One</option>…</select>) fragment de code HTML que les données renvoyées par la dataUrl: "/MyEntity/GetMyEntitys". Parce que vous renvoyez les données au format JSON, vous devez convertir les données renvoyées à partir du serveur par rapport à la editoptionsbuildSelect. Vous pouvez voir l'exemple de code correspondant dans mon old answer.

Encore une petite remarque. Regardez the jqGrid documentation et vérifiez les paramètres que vous utilisez par défaut. Par exemple multiselect: false est le paramètre par défaut. Si vous supprimez les paramètres par défaut de la définition de grille, le code sera plus facile à lire et fonctionnera un peu rapidement. Dans des paramètres plus complexes comme jsonReader, vous pouvez inclure uniquement les propriétés que vous souhaitez modifier. Par exemple, vous pouvez utiliser jsonReader sous la forme jsonReader : { repeatitems: true} car repeatitems est la seule propriété de jsonReader que vous souhaitez modifier par défaut. De la même manière, vous pouvez réduire { view: true, del: true, add: true, edit: true } à { view: true }.

Answer 2

appel code contrôleur dataURL en utilisant les options de modification comme ci-dessous:

.aspx/js code: 

editoptions: { dataUrl: "/YourControllerName/TheFunction" }

Le code du contrôleur ici:

public string TheFunction() 
     { 
      return ConstructSelect(Model.YourList); 
     } 

     public string ConstructSelect(SelectList collection) 
     { 
      string result = "<select>"; 

      foreach (var item in collection) 
      { 
       result = result + "<option value = '" + item.Value + "'>" + item.Text + "</option>"; 
      } 

      result = result + "</select>"; 
      return result; 
     }