动态地从jQuery的AJAX调用填充ASP.NET的GridView [英] Dynamically populate ASP.NET Gridview from jQuery AJAX call

问题描述

错误：

cannot refer to an instance member of a class within a shared method

我的工作，从上一backened MSSQL服务器中提取数据的Web应用程序。从阿贾克斯调用我的Web方法没有问题，它一旦它已经收到显示数据。

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.

我有以下的GridView我的报告页面上：

I have the following gridview on my report page:

<asp:GridView ID="gridReport" runat="server"></asp:GridView>

这是从数据库拉数据的Web方法被调用DBManager.asmx，现声明如下（这是通过AJAX每个下拉改变时调用）：

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()

（它不是code-隐藏文件报告页）从数据库返回的数据，目前在DataSet（变量名：DS）。

(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).

有什么办法来分配数据源为GridView控件到DataSet从.asmx文件，还是一个不错的解决方法，我可以尝试拉？我试过，没有运气开创了code-背后报告页面共享方法，以及把GetSpecificReport方法里面的code-后面。

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.

感谢您的帮助，让我知道我是否应该给予更多的信息或交更多code。

Thanks for the help, let me know if I should give more info or post more code.

推荐答案

我要提出三点建议：

首先，使用类似Telerik的网格，使您可以从您的WebMethod返回JSON并直接绑定到JSON：
http://www.telerik.com/products/aspnet-ajax/grid.aspx

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

这是说，我掀起了一个小例子，你可以在你的WebMethod呈现GridView和重新发射的HTML。

That said, I whipped up a small example where you can render a gridview in your webmethod and re-emit the HTML.

您也可以只画你的表中的HTML使用RenderControl：

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 <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
    </p>
    <p>
        You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;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();
        }
    }

这将在服务器上创建一个替代的GridView，使其为HTML，然后传回。

This will create a replacement gridview on the server, render it to html, then transmit it back.

您也可以使用像AngularJS并只保留了一块JSON的您的服务器的更新，并使用此绑定到实时具有角的网格。

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.

这篇关于动态地从jQuery的AJAX调用填充ASP.NET的GridView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！