Question

我有一个在Page Load上填充的dataTable。我正在使用该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中。

您可以找到加载函数here的文档。

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重新填充表格。

使用Ajax刷新没有UpdatePanel的表数据

2 个答案: