MVCContrib Grid - comment ajouter et supprimer des lignes avec ajax?

Question

Je me demande quelle est la meilleure stratégie pour supprimer une ligne dans la grille générée par MVCContrib.

Tenir compte de cette grille:

Html.Grid(Model.Proc.Documents).Columns(column => 
{ 
    column.For(c => c.Name).Named("Title"); 
    column.For(c => c.Author.Name).Named("Author"); 
    column.For("Action").Action(
      delegate(DocumentDto doc) 
      { 
       const string cbxFrmt = 
         "<td><strong><a href=\"#\" onclick=\"DocDetails({0})\">View details</a></strong> | " + 
          "<strong><a href=\"#\" onclick=\"RemoveDoc({1})\">Delete</a></strong>" + 
         "</td>"; 


       Response.Write(string.Format(cbxFrmt, doc.Id, doc.Id)); 
      } 
      ).DoNotEncode().Named("Action"); 

}) 
.Attributes(id => "documentgrid")); 

Chaque ligne a un lien qui appelle RemoveDoc (docid) fonction javascript, où je devrais supprimer la ligne en appelant une action dans le contrôleur pour éliminer effectivement le document dans le modèle de données, ce qui est assez facile, mais je n'arrive pas à comprendre comment enlever la ligne de tbody avec Jquery. S'il vous plaît donnez votre avis. Suis-je sur une piste complétement fausse? Quelle est la meilleure façon de le faire?

Et d'ajouter une ligne. Au début, je pensais que de le faire en quelque sorte comme ça:

function UploadDocument() { 

    var action = '<%=Html.BuildUrlFromExpression<MyController>(c => c.UploadDocument(parameters))%>'; 

    $.ajax({ 
     type: "POST", 
     url: action, 
     data: { data to upload }, 
     cache: false, 
     dataType: 'text', 
     success: function (data, textStatus) { 
     var newRow = "<tr class='gridrow'><td>" + v1 + 
       "</td><td>" + doc_author + "</td>" + 
       "<td><strong><a href=\"#\" onclick=\"DocDetails(doc_id_returned_by_ajax)\">View details</a></strong> | " + 
        "<strong><a href=\"#\" onclick=\"RemoveDoc(doc_id_returned_by_ajax)\">Delete</a></strong>" + 
       "</td>" +        
       "</tr>"; 
      var docgrid = $('#documentgrid'); 
      var tbody = $("table[class='grid']>tbody"); 
      $(tbody).append(newRow); 
     }, 
     error: function (xhr, textStatus, errorThrown) { 
      var msg = JSON.parse(xhr.responseText); 
      alert('Error:' + msg.Message); 
     } 
    }); 
} 

Mais je ne suis pas sûr que ce soit la meilleure pratique de le faire. D'autres stratégies?

Merci!

Answer 1

Peut-être quelque chose entre les lignes:

<%= Html.Grid<Document>(Model.Proc.Documents) 
    .Columns(column => { 
     column.For(c => c.Name).Named("Title"); 
     column.For(c => c.Author.Name).Named("Author"); 
     column.For("TableLinks").Named(""); 
    }) 
%> 

et TableLinks.ascx:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SomeNs.Document>" %> 
<td> 
    <% using (Html.BeginForm<HomeController>(c => c.Destroy(Model.Id))) { %> 
     <%= Html.HttpMethodOverride(HttpVerbs.Delete) %> 
     <input type="submit" value="Delete" /> 
    <% } %> 
</td> 

et dans le contrôleur:

[HttpDelete] 
public ActionResult Destroy(int id) 
{ 
    Repository.Delete(id); 
    return RedirectToAction("Index"); 
} 

Comme vous pouvez le voir, j'utiliser un formulaire standard avec un bouton de soumission à supprimer. Si vous voulez utiliser AJAX, il est très facile de générer un lien simple et joindre à l'événement, cliquez avec jquery que vous avez fait dans votre exemple:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SomeNs.Document>" %> 
<td> 
    <%= Html.ActionLink(
     "Delete document", 
     "Destroy", 
     new { id = Model.Id }, 
     new { @class = "destroy" } 
    ) %> 
</td> 

et enfin améliorer progressivement le lien:

$(function() { 
    $('.destroy').click(function() { 
     $.ajax({ 
      url: this.href, 
      type: 'delete', 
      success: function(result) { 
       alert('document successfully deleted'); 
      } 
     }); 
     return false; 
    }); 
}); 

Vous pouvez voir ces concepts en action dans this sample project.