使用Ajax在沒有UpdatePanel的情況下刷新表數據

Question

我有一個dataTable，它會在Page Load中填充。 我在該dataTable上使用foreach在客戶端填充我的表。 現在，用戶將輸入一些搜索條件，我想再次獲取數據並重新顯示結果。

我想避免使用更新面板。
因此，我在后面的代碼中創建了一個靜態方法，以從數據庫中進行必要的檢索，同時接受從ajax調用傳入的參數。 我在JavaScript中創建了ajax調用並傳遞了數據。

Ajax使用正確的數據進行調用，然后從數據庫中檢索我的數據。 我的dataTable值已設置。 現在我不太清楚如何用新數據更新表。

幾乎好像我需要重新啟動html代碼的foreach部分。

有任何想法嗎？

---

我的JavaScript函數

$('#btnRunSearch').click(function () {
            $.ajax({
                type: "POST",
                url: "Home.aspx/GetInspectionData",
                data: "{'insp':'00000000-0000-0000-0000-000000000000', 
                       'searchVal':'', 
                       'startDate':'2013-03-01', 
                       'endDate':'2013-04-01', 
                       'agent':'', 
                       'status':0, 'sortexp':''}",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (msg) {




                }
            });

        });

我的HTML

<tbody>
   <%
      foreach (System.Data.DataRow dr in dtInspections.Rows)
      {
    %>
      <tr>
        <td>

服務器端代碼

[WebMethod]
    public static bool GetInspectionData(string insp, 
               string searchVal, string startDate, string endDate, 
               string agent, int status, string sortexp)
    {

        // this.SetFiltersToSession();

        int intCurrentCompany = login.GetCurrentlyLoggedInInspectorCompany();


        Guid inspector = new Guid(insp);
        DataSet ds = Bizlogic.cBizLogicBaseClass.GetGenDataAccess().
           GetDataSet("usp_Get_SearchInspections", "Inspections", 
           true, 
           intCurrentCompany, 
           inspector, 
           searchVal, 
           startDate, 
           endDate, 
           agent, 
           status, 
           sortexp);

         //dtInspections is the dataTable that is used to populate the table
        dtInspections = ds.Tables[0];



        return true;


    }

Answer 1

最簡單的方法是將表格的html放在與其他所有內容分開的視圖中，然后使用jQuery .load函數。 這將允許您的ajax調用在每次調用表時將其加載到div中。

您可以在此處找到有關加載功能的文檔。

HTML：

<div id="container"></div>

使用Javascript：

$('#container').load("Home.aspx/GetInspectionData", 
                     "{'insp':'00000000-0000-0000-0000-000000000000', 
                     'searchVal':'', 
                     'startDate':'2013-03-01', 
                     'endDate':'2013-04-01', 
                     'agent':'', 
                     'status':0, 'sortexp':''}",
                     function() {
    //
    //code for complete function goes here
    //
});

如果我的解釋不夠好，或者您還有其他問題，請告訴我。

Answer 2

通過ajax調用更改服務器端變量不會自動更新UI。 Ajax的重點是無需重新加載頁面即可訪問服務器。 這是使UpdatePanel美觀的部分原因-您可以進行服務器端更新，它可以為您處理UI的更新。

如果要使用不帶更新面板的Ajax，則需要WebMethod返回數據，然后使用javascript重新填充表。