刷新表，無需重新加載頁面，也不會丟失css設計

Question

我知道這已經是互聯網上的問題，但我一直在研究幾個小時，沒有找到適合我的答案。當我點擊按鈕時，文本框內的文本應該被添加到下拉列表中並重新加載表格而不刷新整個頁面，我嘗試使用更新面板，但是當它出現時，下拉列表失去了引導程序的CSS。我在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

我要說嘗試研究AJAX，它使用JavaScript來異步發送和無刷新頁面

在ASP.net接收數據的技術，jQuery是通常包含在使AJAX使用更容易的默認包中。

下面是一些代碼，我的工作是一個示例請求刷新，表：

$.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) { 

     } 
    }); 

我希望這是有幫助的