Actualiser la table sans recharger la page et ne pas perdre le design css

Question

Je sais que c'est déjà un problème sur Internet mais j'ai fait des recherches pendant des heures et ne pas trouver une réponse qui fonctionne pour moi. Lorsque je clique sur le bouton, le texte à l'intérieur de la zone de texte devrait être ajouté dans la liste déroulante et recharger la table sans actualiser la page entière, j'ai essayé d'utiliser le panneau de mise à jour, mais la liste déroulante perd son bootstrap. J'ai un code comme celui-ci dans ASP .NET

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
     <ContentTemplate> 
      <table> 
       <tr> 
       <td> 
       </asp:Label> <asp:Label ID="Label1" runat="server" 
       Text="Clearance No."></asp:Label> 
       </td> 

       <td> 
       <asp:TextBox ID="Textbox1" runat="server" Enabled="False"> 
       </asp:TextBox> 
       </td> 
       </tr> 
       <tr> 
       <td> 
        <asp:DropDownList ID="dropdown1" runat="server"> 
        </asp:DropDownList> 
       </td> 
        <asp:TextBox ID="Textbox2" runat="server" Enabled="true"> 
        </asp:TextBox> 
       <td> 
       </td> 

       <td> 
        <asp:Button ID="Button1" runat="server" Text="Add To 
        Dropdown" OnClick="Button1_Click" /> 
       </td> 
       </tr> 
      </table> 
     </ContentTemplate> 
     <Triggers> 
       <asp:AsyncPostBackTrigger ControlID="Button1" 
       EventName="Click" /> 
      </Triggers> 
</UpdatePanel> 

Answer 1

Je dirais d'essayer des recherches sur AJAX, sa technique en utilisant Javascript pour envoyer et recevoir des données de manière asynchrone sans rafraîchir la page

En ASP.net, JQuery est généralement inclus dans les paquets par défaut, ce qui rend l'utilisation d'AJAX beaucoup plus facile.

Voici une demande d'échantillonnage d'un code que je travaille une table qui réactualise:

$.ajax({ 
     type: 'POST', 
     url: '/Routing/GetRoutings', 
     dataType: 'Json', 
     data: { PID: $(this).val() }, 
     success: function (data) { 
      data = JSON.parse(data); 
      $('#DOPT tbody').empty(); 
      $.each(data, function (index, data) { 
       $('#DOPT').append('<tr><td>' + data.Operation_Number + ' - ' + data.Operation_Description + '</td></tr>'); 
      }); 
      $('#DOP').show(); 
      $('#NWO').show(); 
     }, 
     error: function (ex) { 

     } 
    }); 

J'espère que cela a été utile