使用 Ajax 进行 DataGrid 和分页

• 下载源代码 - 5.4 KB

引言

DataGrid 在代码隐藏页面中没有一行代码就显示出来了。所有功能都依赖于 Ajax 和客户端编码。 毋庸置疑，我们有一个用户控件，用于绑定数据。

Using the Code

RenderView 是 VuMgr 类中的一个 static 函数。 RenderView 在数据绑定后返回用户控件的 HTML string。该方法创建一个页面对象，并在页面中加载后获取对用户控件对象的引用，并使用 Reflection 方法将用户控件绑定起来。然后将控件添加到页面中，并通过动态执行页面来获取 HTML string。 这个方法来自 scottgu 的官方博客。

public static string RenderView(string path,object data)
{
    Page dynamicPage = new Page();
    UserControl uc = (UserControl)dynamicPage.LoadControl(path);
    Type t = uc.GetType();
    FieldInfo f = t.GetField("data");
    f.SetValue(uc,data);
    dynamicPage.Controls.Add(uc);

    StringWriter output = new StringWriter();
    HttpContext.Current.Server.Execute(dynamicPage,output,false);

    return output.ToString();
}

此页面加载处理程序在用户控件中编写，并声明一个 public 变量 data 以使用 Reflection 方法绑定用户控件

protected void Page_Load(object sender, EventArgs e)
{
    uc.DataSource=data;
    uc.DataBind();
}

WebMethod 用于使用 Ajax 从客户端调用，它将页面号作为 Parameter 传递

[WebMethod]
public string GetEmpDataTable(string pageno)
{
    string str = "server=ServerName;
			Database=AdventureWorks;Trusted_Connection=True;";
    SqlCommand cmd = new SqlCommand("GETEMPDETAILS",new SqlConnection(str));
    cmd.CommandType=CommandType.StoredProcedure;
    cmd.Parameters.Add("@pageno",pageno);
    cmd.Parameters.Add("@pagesize",25);
    SqlDataAdapter da = new System.Data.SqlClient.SqlDataAdapter(cmd); 
    DataSet ds  = new DataSet();
    da.Fill(ds);
    string htmlData = VuMgr.RenderView("myuc.ascx",(object)ds);
    return htmlData;
}

存储过程 GETEMPDETAILS 用于从数据库中获取数据。 SP 经过优化，仅获取所需的行，分页是在 SP 级别完成的。

CREATE PROCEDURE GETEMPDETAILS(
@PAGENO INT, 
@PAGESIZE INT)
AS
BEGIN
    WITH DR(SNO,EMPID,LOGINID,G,M,DOB) 
        AS 
        (SELECT 
            (RANK() OVER(ORDER BY EMPLOYEEID ASC)) AS ROWID, 
            EMPLOYEEID,
            LOGINID,
            GENDER AS G,
            MARITALSTATUS AS M,
            BIRTHDATE AS DOB
        FROM HUMANRESOURCES.EMPLOYEE)
    SELECT SNO,EMPID,LOGINID,G AS GENDER,M AS MARITALSTATUS,DOB AS DATEOFBIRTH
  FROM DR WHERE SNO BETWEEN (((@PAGENO-1) * @PAGESIZE) + 1) 
  AND (@PAGENO * @PAGESIZE)
END

Web 页面代码如下所示

<div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    <Services>
    <asp:ServiceReference Path="myservice.asmx" />
    </Services>
    </asp:ScriptManager>
    <input type="button" value="Prev" onclick="MovePrev();"/>
    <input type="button" value="Next" onclick="MoveNext();"/>
    <div id="awData"></div>
</div>

这是 Web 页面的脚本部分。 pageload 函数在页面加载时被调用。 当我们使用 ScriptManager 时，页面加载事件的处理程序默认附加到 pageload 函数。

//initialize the page number to one for the first time.
var pagenumber = 1;
    
//function called using page load
function pageLoad()
{
    //calling the webservice myservice
    myService.GetEmpDataTable(pagenumber,onResponse);
}
    
//move to next page
function MoveNext()
{
    pagenumber++;
    myService.GetEmpDataTable(pagenumber,onResponse);
}
    
//move to previous page
function MovePrev()
{
    pagenumber--;
    if (pagenumber<1) {alert("this is the first page");pagenumber=1;}
    else
    {myService.GetEmpDataTable(pagenumber,onResponse);}
}
    
//function to call after request is success
function onResponse(response)
{
    //alert(response.length);
    //when the page is beyond the limit the rendered 
    //string will be less than 50 chars.
    if (response.length<50) 
    {   alert("this is the last page");pagenumber--;  }
    else
    { myService.GetEmpDataTable(pagenumber,onResponse); }
    $get("awData").innerHTML = response;
}  

您可以访问我的博客 这里。

历史

• 2007 年 10 月 26 日：初始发布