Dynamically populate ASP.NET Gridview from jQuery AJAX call - asp.net

Question

Error:
cannot refer to an instance member of a class within a shared method
I'm working on a web application that pulls data from a MSSQL server on the backened. Calling my web method from ajax isn't the issue, it's displaying the data once it has been received.
I have the following gridview on my report page:
<asp:GridView ID="gridReport" runat="server"></asp:GridView>
The web method that is pulling the data from the DB is called DBManager.asmx, it is declared as follows (this is called via ajax each time a drop-down is changed):
<WebMethod()> _
Public Function GetSpecificReport(ByVal strFilter As String) As String()
(it is NOT the code-behind file for the report page) The data being returned from the DB is currently in a DataSet (variable name: ds).
Is there any way to assign the DataSource for that GridView to the DataSet pulled from the .asmx file, or a nice workaround that I could try? I've tried creating shared methods in the code-behind report page with no luck, as well as putting the GetSpecificReport method inside the code-behind.
Thanks for the help, let me know if I should give more info or post more code.

Answer 1

I would offer 3 suggestions:
First and foremost, using something like telerik grid that allows you to return JSON from your webmethod and bind directly to that json:
http://www.telerik.com/products/aspnet-ajax/grid.aspx
That said, I whipped up a small example where you can render a gridview in your webmethod and re-emit the HTML.
You can also just draw your table in HTML using RenderControl:
Here is a simplified example that re-draws the control using jquery.ajax without any updatepanel or etc. Updatepanel probably works better though!
ASPX:
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="TymeJVTest._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function blag() {
var gridID = "<%= GridView1.ClientID %>";
$.ajax({
type: "POST",
data: {},
contentType: "application/json;charset=utf-8",
dataType: "json",
async: true,
url: "Default.aspx/GetSomeData",
success: function (data) {
//not sure why this is data.d , but what the hey
var theHtml = data.d;
$("#" + gridID).html(theHtml);
},
failure: function () {
alert("Sorry,there is a error!");
}
});
}
</script>
<h2>
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit www.asp.net.
</p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
<a href="#"onclick="blag();" >Test</a>
</asp:Content>
CS:
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
int[] theObject = {1, 2, 3, 4};
GridView1.DataSource = theObject;
GridView1.DataBind();
}
[WebMethod]
public static String GetSomeData()
{
GridView gv = new GridView();
System.IO.StringWriter stringWriter = new System.IO.StringWriter();
HtmlTextWriter htmlWriter = new HtmlTextWriter(stringWriter);
int[] someNewData = {10, 11, 12, 13, 14};
gv.DataSource = someNewData;
gv.DataBind();
gv.RenderControl(htmlWriter);
return stringWriter.ToString();
}
}
This will create a replacement gridview on the server, render it to html, then transmit it back.
You could also use something like AngularJS and just keep a piece of JSON that your server updates, and use this to bind to a grid in real-time with angular.

Answer 2

I think you can achieve what you want without too much changes using an updatepanel.
http://msdn.microsoft.com/en-gb/library/bb399001.aspx
Basically populate your grid on page load or whatever suits you then do refreshes using updatepanel.