Opérations CRUD dynamiques dans MVC

Question

J'ai créé des opérations CRUD pour ma liste de vues arborescentes, mais elles sont statiques - les rechargements de page lors de l'envoi des données au contrôleur. Comment puis-je le rendre dynamique, de sorte que la page n'aura pas à recharger à chaque fois que j'ajoute, supprime ou édite un élément. Dans ce cas, je veux juste savoir comment faire pour l'opération ADD.

Vue:

@helper PopulateDivs(List<Tree_List.Controllers.Element> elements) 
{ 

    <ul> 
     @foreach (var element in elements) 
     { 
      <li> 
       <div class="element_wrapper" data-id="@element.ID" data-parent="@element.PARNET_ID" @*style="display:none"*@> 
        <button class="toggler_btn" type="button" data-id="@element.ID" data-parent="@element.PARNET_ID">+</button> 
        @element.NAME 
        <button class="add_btn" type="button" data-id="@element.ID">Add</button> 
        <button class="edit_btn" type="button" data-id="@element.ID" data-parent="@element.PARNET_ID">Edit</button> 
        <button class="delete_btn" type="button" data-id="@element.ID">Delete</button> 
        <ul id="childItems-@element.ID"></ul> 
       </div> 
      </li> 
     } 
    </ul> 
} 

CONTRÔLEUR PROCEDE DE CREER:

 //MODAL POPUP FOR CREATE 

     public ActionResult CreateNewItem(int id) 
     { 
      if (id == 0) 
      { 
       H_Table item = new H_Table(); 
       return PartialView(item); 
      } 
      else 
      { 
       H_Table item = db_connection.H_Table.Find(id); 
       return PartialView(item); 
      } 

     } 

     //POST: CREATE ITEM 

     [HttpPost] 
//  [ValidateAntiForgeryToken] 
     public ActionResult CreateNewItem(string name, int parent) 
     { 
      H_Table item = new H_Table(); 
      if (parent == 0) 
      { 
       item.NAME = name; 
       item.PARENT_ID = null; 
      } 
      else 
      { 
       item.PARENT_ID = parent; 
       item.NAME = name; 
      } 

      if (ModelState.IsValid) 
      { 
       db_connection.H_Table.Add(item); 
       db_connection.SaveChanges(); 
       return RedirectToAction("Index"); 
      } 
      return View(item); 
     } 

JS:

 $('body').on('click', '.add_btn', function() { 
     $.get("/List/CreateNewItem", { id: $(this).data('id') }, function (data) { 
      $('#modal_window').replaceWith('<div id="modal_window">' + data + '</div>'); 
      $('#modal_window').show(); 
     }); 
    }); 

Vue partielle pour Créer:

@model Tree_List.Models.H_Table 

<form action="/List/CreateNewItem" method="post"> 
    <div class="form-horizontal"> 
     <h4>CREATE NEW ITEM</h4> 
     <div class="form-group"> 
      <div class="control-label col-md-2">NAME</div> 

      <div class="col-md-10"> 
       <input name="name" type="text" value="" /> 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="control-label col-md-2">PARENT</div> 
      <div class="col-md-10"> 
       <input name="parent" type="text" value="@Model.ID" readonly /> 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="submit" value="Create" class="btn btn-default" /> 
      </div> 
     </div> 
    </div> 
</form> 

<div> 
    @Html.ActionLink("Back to List", "Index") 
</div> 

Answer 1

Pour être en mesure d'avoir une page qui se met à jour sans rechargement ou publication, votre liste html doit être un composant ajax. Vous ne serez pas en mesure d'avoir ce comportement avec un simple

@foreach (var element in elements) 
     { 
      <li> 
       ... 
      </li> 
     } 

Je ne suis pas familier avec les composants ajax asp.net donc je vous suggère de vérifier que (telerik a quelques-uns). Ou vous pouvez simplement mettre à jour votre Javascript: remplir la liste à partir d'un appel ajax et mettre à jour la liste en ajoutant une ligne après votre appel "ADD".

Bien qu'il soit généralement préférable de commencer à chercher un cadre d'extrémité avant (réagir, angulaire, etc) en allant comme ça.