使用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(); 

     }