JqGrid Ajout d'une nouvelle ligne à la base de données

Question

J'ai configuré un JQGrid sur mon projet Asp.net MVC et tout fonctionne EXCEPTÉ d'ajouter une nouvelle ligne dans ma base de données SQL. Il ajoute avec succès une ligne au jQGrid mais ne crée pas la nouvelle entrée dans la base de données. Je mets un point d'arrêt dans la méthode d'action "créer" et il est appelé. Il vaut la peine de noter que "modifications" des entrées existantes fonctionnent parfaitement. Je suis à ce sujet depuis un moment. Une bière va à la meilleure réponse.

Controller:

public class SettingsController : Controller 
{ 
    // GET: Settings 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    // GET: Users 
    public ActionResult Users() 
    { 

     return View(); 
    } 
    SmartAdminMvcEntities db = new SmartAdminMvcEntities(); 
    public JsonResult GetValues(string sidx, string sord, int page, int rows) //Gets the todo Lists. 
    { 
     //System.Diagnostics.Debug.WriteLine("GetValues"); 
     //Debug.WriteLine("GetValues"); 
     Trace.Write("Error Message"); 

     int pageIndex = Convert.ToInt32(page) - 1; 
     int pageSize = rows; 
     var Results = db.AspNetUsers.Select(
      a => new 
      { 
       a.Id, 
       a.UserName, 
       a.Email, 
       a.LockoutEnabled, 
       a.AccessFailedCount, 
      }); 
     int totalRecords = Results.Count(); 
     var totalPages = (int)Math.Ceiling((float)totalRecords/(float)rows); 
     if (sord.ToUpper() == "DESC") 
     { 
      Results = Results.OrderByDescending(s => s.Id); 
      Results = Results.Skip(pageIndex * pageSize).Take(pageSize); 
     } 
     else 
     { 
      Results = Results.OrderBy(s => s.Id); 
      Results = Results.Skip(pageIndex * pageSize).Take(pageSize); 
     } 
     var jsonData = new 
     { 
      total = totalPages, 
      page, 
      records = totalRecords, 
      rows = Results 
     }; 
     return Json(jsonData, JsonRequestBehavior.AllowGet); 

    } 

    // TODO:insert a new row to the grid logic here 
    [HttpPost] 
    public string Create([Bind(Exclude = "Id")] AspNetUser obj) 
    { 
     //System.Diagnostics.Debug.WriteLine("Create"); 
     string msg; 
     try 
     { 
      if (ModelState.IsValid) 
      { 
       db.AspNetUsers.Add(obj); 
       db.SaveChanges(); 
       msg = "Saved Successfully"; 
      } 
      else 
      { 
       msg = "Validation data not successfull"; 
      } 
     } 
     catch (Exception ex) 
     { 
      msg = "Error occured:" + ex.Message; 
     } 
     return msg; 
    } 
    public string Edit(AspNetUser obj) 
    { 
     System.Diagnostics.Debug.WriteLine("Edit"); 
     string msg; 
     try 
     { 
      if (ModelState.IsValid) 
      { 
       db.Entry(obj).State = EntityState.Modified; 
       db.SaveChanges(); 
       msg = "Edit Successfully"; 
      } 
      else 
      { 
       msg = "Validation data Edit not successfull"; 
      } 
     } 
     catch (Exception ex) 
     { 
      msg = "Error occured Editing:" + ex.Message; 
     } 
     return msg; 
    } 
    public string Delete(int Id) 
    { 
     AspNetUser list = db.AspNetUsers.Find(Id); 
     db.AspNetUsers.Remove(list); 
     db.SaveChanges(); 
     return "Deleted successfully"; 
    } 

} 

Vue:

</div> 
    <!-- end row --> 

    <!-- widget grid --> 
    <section id="widget-grid" class=""> 

     <!-- row --> 
     <div class="row"> 

      <!-- NEW WIDGET START --> 
      <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 

       <table id="jqgrid"></table> 
       <div id="pjqgrid"></div> 


      </article> 
      <!-- WIDGET END --> 

     </div> 

     <!-- end row --> 

    </section> 
    <!-- end widget grid --> 

</div> 
<!-- END MAIN CONTENT --> 
@section pagespecific { 
<script type="text/javascript"> 
    $(document).ready(function() { 
     pageSetUp(); 

     jQuery("#jqgrid").jqGrid({ 
      url: "/Settings/GetValues", 
      datatype: "json", 
      mtype: 'GET', 
      height: 'auto', 
      colNames: ['Id', 'UserName', 'Email', 'LockoutEnabled', 'AccessFailedCount'], 
      colModel: [ 
      { 
       key: true, 
       hidden: true, 
       name: 'Id', 
       index: 'Id', 
       editable: true 
      }, { 
       key: false, 
       name: 'UserName', 
       index: 'UserName', 
       editable: true 
      }, { 
       key: false, 
       name: 'Email', 
       index: 'Email', 
       editable: true 
      }, { 
       key: false, 
       name: 'LockoutEnabled', 
       index: 'LockoutEnabled', 
       editable: true 
      }, { 
       key: false, 
       name: 'AccessFailedCount', 
       index: 'AccessFailedCount', 
       editable: true 
      }], 
      rowNum: 10, 
      rowList: [10, 20, 30], 
      pager: '#pjqgrid', 
      sortname: 'id', 
      toolbarfilter: true, 
      viewrecords: true, 
      sortorder: "asc", 
      gridComplete: function() { 
       var ids = jQuery("#jqgrid").jqGrid('getDataIDs'); 
       for (var i = 0; i < ids.length; i++) { 
        var cl = ids[i]; 
        be = "<button class='btn btn-xs btn-default' data-original-title='Edit Row' onclick=\"jQuery('#jqgrid').editRow('" + cl + "');\"><i class='fa fa-pencil'></i></button>"; 
        se = "<button class='btn btn-xs btn-default' data-original-title='Save Row' onclick=\"jQuery('#jqgrid').saveRow('" + cl + "');\"><i class='fa fa-save'></i></button>"; 
        ca = "<button class='btn btn-xs btn-default' data-original-title='Cancel' onclick=\"jQuery('#jqgrid').restoreRow('" + cl + "');\"><i class='fa fa-times'></i></button>"; 
        //ce = "<button class='btn btn-xs btn-default' onclick=\"jQuery('#jqgrid').restoreRow('"+cl+"');\"><i class='fa fa-times'></i></button>"; 
        //jQuery("#jqgrid").jqGrid('setRowData',ids[i],{act:be+se+ce}); 
        jQuery("#jqgrid").jqGrid('setRowData', ids[i], { 
         act: be + se + ca 
        }); 
       } 
      }, 
      editurl: '/Settings/Edit', 
      caption: "Users that have access to the site:", 
      multiselect: true, 
      autowidth: true 
     }); 


     // "/Settings/Create" is being called in the controller. I put in a 
     // break to test it. 
     jQuery("#jqgrid").jqGrid("navGrid", "#pjqgrid", {/*navGrid options*/ }, 
    {/*navGrid Edit*/ }, { url: '/Settings/Create' }, { url: '/Settings/Delete' }); 




     jQuery("#jqgrid").jqGrid('inlineNav', "#pjqgrid"); 
     /* Add tooltips */ 
     $('.navtable .ui-pg-button').tooltip({ 
      container: 'body' 
     }); 

     // remove classes 
     $(".ui-jqgrid").removeClass("ui-widget ui-widget-content"); 
     $(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default"); 
     $(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr"); 
     $(".ui-jqgrid-pager").removeClass("ui-state-default"); 
     $(".ui-jqgrid").removeClass("ui-widget-content"); 

     // add classes 
     $(".ui-jqgrid-htable").addClass("table table-bordered table-hover"); 
     $(".ui-jqgrid-btable").addClass("table table-bordered table-striped"); 

     $(".ui-pg-div").removeClass().addClass("btn btn-sm btn-primary"); 
     $(".ui-icon.ui-icon-plus").removeClass().addClass("fa fa-plus"); 
     $(".ui-icon.ui-icon-pencil").removeClass().addClass("fa fa-pencil"); 
     $(".ui-icon.ui-icon-trash").removeClass().addClass("fa fa-trash-o"); 
     $(".ui-icon.ui-icon-search").removeClass().addClass("fa fa-search"); 
     $(".ui-icon.ui-icon-refresh").removeClass().addClass("fa fa-refresh"); 
     $(".ui-icon.ui-icon-disk").removeClass().addClass("fa fa-save").parent(".btn-primary").removeClass("btn-primary").addClass("btn-success"); 
     $(".ui-icon.ui-icon-cancel").removeClass().addClass("fa fa-times").parent(".btn-primary").removeClass("btn-primary").addClass("btn-danger"); 

     $(".ui-icon.ui-icon-seek-prev").wrap("<div class='btn btn-sm btn-default'></div>"); 
     $(".ui-icon.ui-icon-seek-prev").removeClass().addClass("fa fa-backward"); 

     $(".ui-icon.ui-icon-seek-first").wrap("<div class='btn btn-sm btn-default'></div>"); 
     $(".ui-icon.ui-icon-seek-first").removeClass().addClass("fa fa-fast-backward"); 

     $(".ui-icon.ui-icon-seek-next").wrap("<div class='btn btn-sm btn-default'></div>"); 
     $(".ui-icon.ui-icon-seek-next").removeClass().addClass("fa fa-forward"); 

     $(".ui-icon.ui-icon-seek-end").wrap("<div class='btn btn-sm btn-default'></div>"); 
     $(".ui-icon.ui-icon-seek-end").removeClass().addClass("fa fa-fast-forward"); 

    }) 

    $(window).on('resize.jqGrid', function() { 
     $("#jqgrid").jqGrid('setGridWidth', $("#content").width()); 
    }) 

</script> 
    } 

Answer 1

Je ne vois aucune erreur manifeste dans le code d'action Create. Probablement il faut déboguer le code pour trouver la raison. Il y a surtout une chose, ce qui est important pour la création de l'élément: les propriétés du paramètre obj de Create. Si les propriétés sont correctes, alors l'interface jqGrid fonctionne correctement et l'origine de votre problème pourrait être uniquement du côté serveur (votre code C# et Entity Framework). Une chose, que je vous suggère: remplacer la ligne

db.AspNetUsers.Add(obj); 

avec

db.AspNetUsers.Add(new AspNetUser { UserName = obj.UserName, Email = obj.Email }); 

De plus, je vous recommande de mettre à niveau très ancienne version 4.4.4 (près de 5 ans), vous utiliser, à la version actuelle (4.15.2) de "free jqGrid". Si vous utilisez le package NuGet, vous devez le désinstaller et installer le package free-jqGrid. Après la mise à niveau vers jqGrid gratuit, vous pouvez utiliser de nombreuses nouvelles fonctionnalités. Par exemple, jqGrid gratuit contient le support natif de Font Awesome 4.x, ce qui simplifiera votre code. L'utilisation de gridComplete n'est pas nécessaire non plus. Je vous recommande de retourner toutes les données à partir du serveur (à partir de GetValues) à la fois et d'utiliser les options loadonce: true, forceClientSorting: true. Cela va simplifier votre code. Pour les autres nouvelles fonctionnalités, je vous recommande de commencer here au début, the wiki articles et READMEs à toutes les versions publiées précédemment. Par exemple, https://jsfiddle.net/OlegKi/su7ebs65/ montre certaines caractéristiques de la recherche.