ASP.NET—015：ASP.NET中无刷新页面实现

admin · 发表于 2024-2-29 08:19:50

原文作者：杨友山

原文地址：http://blog.csdn.net/yysyangyangyangshan/article/details/39679823

前面也说过在asp.net中前后前交互的问题。使用了ajax.js的方法：$.post和$.ajax。

http://blog.csdn.net/yysyangyangyangshan/article/details/22755007和
http://blog.csdn.net/yysyangyangyangshan/article/details/22438077
这种方式对于少量控件的更新和取值，以及按钮的操作事件等都比较适用。不过对于gridview控件的绑定就不方便了，使用gridview的databind在线程中不能绑定数据。所以这里再介绍一种无刷新页面的方法，也就是updatepanel控件。也是ajax中的。
不多说了，直接看用法。
1、准备工作。
需要准备如下三个dll。
System.Web.Extensions.Design.dll
System.Web.Extensions.dll
AjaxControlToolkit.dll
前两个都好说，只要安装ASPAJAXExtSetup 1.0.exe就有了，具体目录在：安装盘\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025下。
对于AjaxControlToolkit.dll则需要安装AjaxControlToolkit-framework x.x。
本文是针对.net framework2.0的，所以下载AjaxControlToolkit-framework2.0 ，这个网上有带源码的。
下载地址： http://download.csdn.net/detail/yysyangyangyangshan/7991393
将这三个dll引用到工程中。AjaxControlToolkit.dll这里下载的是源码，需要自己把程序集生成为dll再引用进工程中来。
在工具箱中就有了如下控件：

2、配置文件
web.config中需要增加如下节点
中：

1.0.61025.0要和ASPAJAXExtSetup安装后的目录版本对应。
3、页面注册
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
使用方法如下：
这里简单实现以下：点击按钮，然后页面文本框显示当前时间。
工程：
001
前台：

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:updatepanel runat="server">
<ContentTemplate>
<asp:TextBox ID="txtTime" runat="server" Width="150px"></asp:TextBox>
<asp:Button ID="btnTime" runat="server" Text="获取系统时间" OnClick="Btn_Time_Click"/>
</ContentTemplate>
</asp:updatepanel>
</div>
</form>
</body>
</html>

复制代码

后台：

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Btn_Time_Click(object sender, EventArgs e)
{
this.txtTime.Text = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
}
}

复制代码

web.config配置

<?xml version="1.0"?>
<configuration>
<appSettings />
<connectionStrings />
<system.web>
<compilation debug="true">
</compilation>
<!--
通过 <authentication> 节可以配置
安全身份验证模式，ASP.NET
使用该模式来识别来访用户身份。
-->
<authentication mode="Windows" />
<!--
如果在执行请求的过程中出现未处理的错误，
则通过 <customErrors> 节
可以配置相应的处理步骤。具体而言，
开发人员通过该节可配置要显示的 html 错误页，
以代替错误堆栈跟踪。
<customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm">
<error statusCode="403" redirect="NoAccess.htm" />
<error statusCode="404" redirect="FileNotFound.htm" />
</customErrors>
-->
<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
</httpHandlers>
</system.web>
</configuration>

复制代码

这样一来，按钮的click事件后，页面就不会整体刷新了。而updatepanel要注意写法：

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:updatepanel runat="server">
<ContentTemplate>
</ContentTemplate>
</asp:updatepanel>

复制代码

这样不论是简单的textbox，还是对gridview绑定都可以了。

另外，针对updatepanel之间的控件，如果有的需要局部刷新，有的需要整体页面刷新，可以用到Triggers标签，格式如下：

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:updatepanel runat="server">
<ContentTemplate>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="" EventName="" />
<asp:PostBackTrigger ControlID="" />
</Triggers>
</asp:updatepanel>

复制代码

而每一次局部刷新完成后的事件也是可以加以利用的。如果想在刷新完后再做某些处理，可以在script中加如下代码：

<script type="text/javascript">
$(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
});
function EndRequestHandler() {
//刷新后的操作
}
</script>

复制代码

使用的例子见下文。
代码下载： http://download.csdn.net/detail/yysyangyangyangshan/7991427

来源：https://blog.csdn.net/yysyangyangyangshan/article/details/39679823
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

		自动登录	找回密码
密码			会员注册

ASP.NET—015：ASP.NET中无刷新页面实现

本帖子中包含更多资源