Je ne comprends pas comment je peux convertir la construction de table MVC pour utiliser AJAX?

Question

Donc, je travaille à mieux comprendre comment utiliser AJAX pour remplir une table dans une vue MVC. J'ai une table en cours de construction dans ma vue et maintenant je veux le convertir en utilisant AJAX. J'ai regardé quelques vidéos et regardé quelques exemples, mais chacun d'entre eux prend juste quelques valeurs simples et les ajoute à une table existante. C'est tout bon s'il n'y a pas de vraie logique à regarder lors de la création de chaque ligne mais que faites-vous quand vous avez besoin de logique? Exemple, voici un exemple de ma vue MVC. Je fais une boucle dans ma liste et regarde conditionnellement chaque élément d'enregistrement pour déterminer si j'affiche certains boutons ou non.

<tbody> 
@foreach (var item in Model.listExceptions) 
{ 
    <tr> 
     <td>@item.InsertDateTime.ToString("MM/dd/yyyy HH:mm")</td> 
     <td>@item.CommentText</td> 
     <td> 
      @if (item.Status.ToUpper() != "A" && item.Status.ToUpper() != "D" && Model.isAdmin == true) 
      { 
       <a href="@Url.Action("ExceptionApproveDeny", "Exception", new { rid=item.RID, arg="A", shift=item.ShiftDate })" 
        onclick="return confirm('APPROVE this exception?')" 
        class="btn btn-sm btn-success"> 
        <span class="fa fa-check-square-o" aria-hidden="true"></span> Approve 
       </a> 

       <a href="@Url.Action("ExceptionApproveDeny", "Exception", new { rid=item.RID, arg="D", shift=item.ShiftDate })" 
        onclick="return confirm('DENY this exception?')" 
        class="btn btn-sm btn-danger"> 
        <span class="fa fa-close" aria-hidden="true"></span> Deny 
       </a> 
      } 
     </td> 
    </tr> 
} 
</tbody> 

Cependant, tous les exemples que j'ai trouvé de travail avec AJAX ils créent manuellement une ligne de table et juste ajouter à la fin de la table. C'est le code d'un des exemples que j'ai regardé. Comment puis-je exécuter un code conditionnel comme je l'ai fait dans ma vue, mais en utilisant AJAX?

Answer 1

Il existe plusieurs façons de le faire. Une façon consiste à ajouter une nouvelle propriété au modèle de vue ou à la structure de données que vous renvoyez de l'action EmpDetails pour inclure l'URL. Vous pouvez utiliser l'assistant Url.Action dans votre code de contrôleur pour générer l'URL et l'envoyer. Dans l'action du contrôleur, vous définissez la propriété ApprovalUrl. Dans l'exemple ci-dessous, je suis en train de le coder en dur pour le premier élément. Mais vous pouvez le faire conditionnellement avec les mêmes contrôles que vous avez en question.

public ActionResult EmpDetails() 
{ 
    var list = new List<ItemVm>(); 

    list.Add(new ItemVm { Id=1, Name="John", 
       ApprovalUrl=Url.Action("ExceptionApproveDeny",new { rid=1,arg="A"}) }); 

    list.Add(new ItemVm { Id=1, Name="Scott" }); 
    return Json(list,JsonRequestBehavior.AllowGet); 
} 

maintenant dans l'appel ajax, vous cochez la ApprovalUrl existe pour chaque élément que vous itérez dans la boucle et l'utiliser.

$.getJSON("@Url.Action("EmpDetails")",function(json) { 
     var tr; 
     $.each(json,function(i, item) { 
       tr = $('<tr/>'); 
       tr.append("<td>" + item.Name + "</td>"); 
       if (item.ApprovalUrl) { 
        tr.append("<td> <a href='" + item.ApprovalUrl + "'>Approve</a></td>"); 
       } else { 
        tr.append("<td></td>"); 
       } 
       $('#yourTableId').append(tr); 
     }); 
}); 

Une autre option est de retourner le balisage HTML pour la ENTIER table.So au lieu de retourner les données JSON, vous retournez un résultat de vue partielle à l'intérieur duquel vous pouvez avoir le même code que vous partagiez dans la question.

public ActionResult EmpDetails() 
{ 
    var items = new List<ItemVm>(); 
    // to do :load items 
    return PartialView(items); 
} 

La vue de cette méthode d'action peut avoir le même code que vous avez dans votre question en termes de rendu conditionnel des liens.

@model List<ItemVm> 
<table class="table"> 
    @foreach (var item in Model) 
    { 
     <tr> 
      <td>@item.Name</td>    
      <!-- add code for other td here--> 
     </tr> 
    } 
</table> 

et maintenant tout ce que vous avez à faire est de mettre à jour le balisage d'élément de table dans un DOM

$.get("@Url.Action("EmpDetails")",function(result) { 
    $('#yourTableId').html(result); 
}); 

Je préfère la seconde approche car elle est moins sujette à des erreurs et la même vue partielle peut être réutilisé Si vous utilisez quelque chose comme angular/react ou view, il vous suffit de définir le tableau source de données sous-jacent aux nouvelles données json et cette bibliothèque/framework mettra à jour l'interface utilisateur pour vous à partir du modèle que vous avez défini.

Ne faites jamais confiance aux données provenant du client. Toujours valider les éléments dans le serveur. Donc, je vous suggère de mettre à jour la méthode d'action ExceptionApproveDeny pour faire les vérifications nécessaires avant de faire des mises à jour de données.

Answer 2

Vous pouvez utiliser l'exemple de code ci-dessous pour votre utilisation de Jquery. Son simple et je n'ai pas créé compliqué en utilisant une vue partielle et d'autres choses.

Vous pouvez utiliser les mêmes conditions que celles que vous utilisez, mais vous devez ajouter "" manuellement en utilisant l'ajout HTML.

$.ajax({ 
    url: '/home/EmpDetails', 
    type: 'Get', 
    success: function(data){ 
      // Here you need to make one more call to get whether user is 
      // Admin or not. 
      // for that you can make callback function here. 
      GetIfUserIsAdmin(function(isAdmin){ 
      // here you can use $.each loop and based on condition which you 
      // are adding in your view you can put same condition and append 
      // HTML 
      // If you are using angular you have to just create a template 
      // and pass the value and based on your template angular will   
      // generate desired HTML based on your conditions which you give 
      // while building your template. 
     }) 
    }, 
    error: function(){ 
     app.log("Device control failed"); 
    }, 
}); 

function GetIfUserIsAdmin(callback){ 
    // Here you need to make a ajax call which will provide you IsUser is  
    // Admin or not and call the callback function with that flag 
    // information from the success event of your ajax function. 
    $.ajax({ 
    url: '/home/IsAdmin', 
    type: 'Get', 
    success: function(isUserAdmin){ // you can pass only true or false here 
        if(data != '' && data != undefined && data != null){ 
      callback(isUserAdmin); 
      } 
      else{ 
      console.log('Check is User is admin function in you code.') 
      } 

    }, 
    error: function(){ 
     app.log("Device control failed"); 
    }, 
});