您的位置：首页 > Web前端 > JQuery

基于jquery的ViewManage 数据局部刷新

2009-12-26 12:03 295 查看

局部刷新大量数据。可以使用ajaxpro的updatepanel或者使用拼写html表格来填充数据。下面的方法是使用了usercontrol控件的无刷新技术，有点点偷懒的感觉。

1，首先是viewmanage类

using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.IO;
using System.Web;

/// <summary>
/// 虚拟的页面
/// </summary>
internal class VirtualPage : Page
{
/// <summary>
/// 覆盖服务器控件生成方法，原因虚拟页面没有Form元素，不覆盖的话，服务器控件解释报错
/// </summary>
/// <param name="control"></param>
public override void VerifyRenderingInServerForm(Control control)
{

}
}

/// <summary>
/// Ajax控件视图类
/// </summary>
/// <typeparam name="T">Web用户控件</typeparam>
public class ViewManager<T> where T : UserControl, System.IDisposable
{
/// <summary>
/// 虚拟页面
/// </summary>
private VirtualPage _pageHolder;

/// <summary>
/// 构造函数
/// </summary>
public ViewManager()
{
_pageHolder = new VirtualPage();
}

/// <summary>
/// 读取控件
/// </summary>
/// <param name="path">控件路径</param>
/// <returns>返回控件的类型</returns>
public T LoadViewControl(string path)
{
_pageHolder.EnableViewState = false;
return (T)_pageHolder.LoadControl(path);
}

/// <summary>
/// 解释控件HTML成string
/// </summary>
/// <param name="control">控件类</param>
/// <returns>返回控件HTML</returns>
public string RenderView(T control)
{
try
{
_pageHolder.Controls.Add(control);
StringWriter output = new StringWriter();
HttpContext.Current.Server.Execute(_pageHolder, output, false);
_pageHolder.Controls.Clear();
return output.ToString();
}
catch { return string.Empty; }
}

/// <summary>
/// 释构
/// </summary>
public void Dispose()
{
_pageHolder.Dispose();
}
}

2 新建一个uesercontrol。

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
<asp:GridView ID="lvEmpList" runat="server">
<PagerTemplate>
<tr style="height:27px">
<td><%#Eval("Name")%></td>
<td><%#Eval("Body")%></td>
<td><%#Eval("Height")%></td>
</tr>
</PagerTemplate>
</asp:GridView>

usercontrol 代码如下：

public partial class WebUserControl : System.Web.UI.UserControl
{

/// <summary>
/// 数据源
/// </summary>
private object _dataSource = null;

/// <summary>
/// 数据源
/// </summary>
public object DataSource
{
set { _dataSource = value; }
}

/// <summary>
/// 绑定数据
/// </summary>
public void SetData()
{
lvEmpList.DataSource = _dataSource;
lvEmpList.DataBind();
}
}

3. 新建ashx文件，用于根据ajax请求，获取数据

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.Data;
public class Handler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";

//******主要代码**************
ViewManager<WebUserControl> manage = new ViewManager<WebUserControl>();
WebUserControl wuc = manage.LoadViewControl("~/WebUserControl.ascx");
DataSet ds = BindData();
wuc.DataSource = ds.Tables[0];
wuc.SetData();
context.Response.Write(manage.RenderView(wuc));
//******主要代码**************
}
public bool IsReusable
{
get
{
return false;
}
}

private DataSet BindData()
{
return null;//获取数据
}
}

4. 前台页面调用如下

<mce:script type="text/javascript" src="js/jquery.js" mce_src="js/jquery.js"></mce:script>
<mce:script type="text/javascript"><!--
function getDateFromHandeler(){
$.post("Handler.ashx",{},function(result){
if(confirm("想要看ViewManage的威力了吗？")==1){
$("#divContent").html(result);
}
});
}

// --></mce:script>
<title>使用虚拟页返回控件html示例</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="按钮" onclick="getDateFromHandeler();"/>
<div id="divContent">
</div>
</div>
</form>
</body>
</html>

5 总结。至此，整体数据无刷新已经完成。点击按钮,直接ajax请求数据，将用户控件里面生成的表格直接填充到前台，省去了自己拼接html代码时间。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航