使用AJAX和jQuery基于输入加载数据网格

Question

这个问题一直在唠叨我好几天了。这是的情况：

我有一个DataGrid没有数据加载到它。我也有一个Input Text，它使用AJAX和jQuery来显示用户在键入时可以选择的值的现有列表。这是一个搜索系统，将根据用户输入的内容提取所有记录。然后我有一个Input Button，按下时需要填入DataGrid。我需要的AJAX是为了刷新DataGrid每次按下按钮时不刷新整个页面，因此输入而不是asp。我的问题是让JavaScript/* jQuery *调用将要使用的方法。我也需要它来获得InputText的价值并将其用于搜索。这是我迄今为止（不完整，需要帮助完成）。

数据网格（这是从另一DataGrid使用相同的数据复制，只是缩短。可能是不正确的编码。）

<asp:DataGrid ID="Display" AutoGenerateColumns="false" ViewStateMode="Disabled" runat="server"> 
     <Columns> 
      <asp:TemplateColumn> 
       <HeaderTemplate> 
        Line</HeaderTemplate> 
       <ItemTemplate> 
        <asp:Label ID="LineNumber" Text='<%# DataBinder.Eval(Container.DataItem, "LineNumber") %>' 
         runat="server" /></ItemTemplate> 
      </asp:TemplateColumn> 
      <asp:TemplateColumn> 
       <HeaderTemplate> 
        Date</HeaderTemplate> 
       <ItemTemplate> 
        <asp:Label ID="CreateDate" Text='<%# DataBinder.Eval(Container.DataItem, "CreateDate", "{0: MM/dd/yyyy}") %>' 
         runat="server" /></ItemTemplate> 
      </asp:TemplateColumn> 
      <asp:TemplateColumn> 
       <HeaderTemplate> 
        Operator</HeaderTemplate> 
       <ItemTemplate> 
        <asp:Label ID="Operator" Text='<%# DataBinder.Eval(Container.DataItem, "Operator") %>' 
         runat="server" /></ItemTemplate> 
      </asp:TemplateColumn> 
     </Columns> 
    </asp:DataGrid> 

的JavaScript/jQuery的（这被放置在Button“的 “onclick” 事件。）

function refresh() { 
      $.ajax({ 
       type: "POST", 
       url: "WebForm1.aspx/PopulateGrid", 
       data: "{}", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       error: function (result) { alert(result.status + ' ' + result.statusText); } 
      } 
      ); 
     }; 

代码背后（我想尝试和使用的代码是后但如果需要处理程序，请让我知道。）

[WebMethod] 
    protected void PopulateGrid() 
    { 
     using (Entities ent = new Entities(ConfigurationManager.ConnectionStrings["QCConnString"].ToString())) 
     { 
      string oper = Request.QueryString["getData"].ToString(); 
      AllDataSources ds = new AllDataSources(); 
      Display.DataSource = ds.refreshData(ent, oper); 
      Display.DataBind(); 
     } 
    } 

，因为我更接近答案，或者已经来到了一个解决方案，我会更新这个。我真的希望有人能帮我解决这个问题。我奋斗了这么久。

Answer 1

这不能以你现在这样做的方式完成。你将不得不使用asp.net更新面板来以ajax化的方式加载asp：datagrid。

我经常使用的另一个解决方案是摆脱asp：datagrid（如果您需要更多的支持ajax的网格）并使用jqGrid这是一个支持ajax的网格。这样你可以可以使用jquery ajax发布一个调用你的webmethods，它必须返回一个xml或json数据集。这里有很多例子，例如this one是了解网格的一些基本知识的出发点。也不要忘了jqGrid的demo page。

Answer 2

如果你要将下面的代码放在一个通用处理程序（.ashx）中，这基本上会生成你想要的HTML。我认为这是一个非常困难的方式去做你想做的事，但它会工作。

public void ProcessRequest(System.Web.HttpContext context) 
     { 
      context.Response.Clear(); 
      context.Response.ContentType = "text/plain"; 

      //Instead of making a new DataGrid from scratch, you could also load an in-memory 
      //instance of a page with the DataGrid on it. You'd then have to get the DataGrid from that page. 
      DataGrid dg = new DataGrid(); 

      //Set up your columns based on the form values here. 
      //Instead of a DataTable, you could use any IEnumerable data source. 
      DataTable dt = new DataTable(); 
      dt.Columns.Add("TestCol"); 

      DataRow dr = dt.NewRow(); 
      dr["TestCol"] = context.Request.Form["myData"].ToString(); 
      dt.Rows.Add(dr); 

      dg.DataSource = dt; 
      dg.DataBind(); 

      //Create an in-memory target Page, then add your DataGrid to it. 
      System.Web.UI.Page p = new System.Web.UI.Page(); 
      p.Controls.Add(dg); 

      //Create a StringWriter that will contain the HTML. 
      //Execute the page, and voila, you got your rendered DataGrid. 
      StringWriter writer = new StringWriter(); 
      context.Server.Execute(p, writer, false); 

      context.Response.Write(writer.ToString()); 
      context.Response.End(); 

     }