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

原文作者:杨友山

原文地址: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中需要增加如下节点
<system.web></system.web>中:
      <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>
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绑定都可以了。
代码下载:http://download.csdn.net/detail/yysyangyangyangshan/7991427

时间: 2024-10-19 18:16:53

ASP.NET—015:ASP.NET中无刷新页面实现的相关文章

ASP.NET ashx实现无刷新页面生成验证码

现在大部分网站登陆时都会要求输入验证码,在网上也看了一些范例,现在总结一下如何实现无刷新页面生成验证码. 效果图: 实现方式: 前台: 1 <div> 2 <span>Identifying Code:</span> 3 <asp:TextBox ID="txtValidationCode" runat="server" Width="130px" MaxLength="4">&

JSF中使用f:ajax标签无刷新页面改变数据

ajax本是用在前端的一种异步请求数据的操作,广泛用于js中,一般的js框架如jq都有被封装好的方法,用于发起异步请求操作.异步操作可以增强用户体验和操作,越来越多的程序都在使用ajax.JSF的facelets内置了一个ajax标签,可用于简单的ajax操作. f:ajax 有几个常用属性,分别是:event.listener.render. 1.event:event 对应一个js事件名,该事件名省略了开头的”on“字符,例如点击事件是onclick,那么只需要填入click即可.类似事件还

form 无刷新页面提交表单

表单可实现无刷新页面提交,无需页面跳转,如下: 通过一个隐藏的iframe实现, form表单的target设置为iframe的name名称,form提交目标位当前页面iframe则不会刷新页面 <form action="/url.do" method="post" target="targetIfr"> <input type="text" name="name"/> </

asp.net中Timer定时器在web中无刷新的使用

最近在做一个项目的时候,web端的数据需要与数据源进行实时同步,并保证数据的准确性,当时,考虑到使用ajax异步刷新技术.但后来在网上查找相关资料时,发现这样做,太浪费资源了,因为ajax的提交请求不应该这么频繁的,只适用于那种手动请求响应的那种,因此这种办法是行不通了,后来,发现asp.net中有一个定时器Timer,可以进行实时同步数据,因此本人就做了一个小小的测试,发现还挺好用的,于是乎就有了下文.如下: aspx页面中的代码: <form id="form1" runat

ASP.Net中无刷新执行Session身份验证

在写一个客户的B/S结构应用程序时,突然发现一个技巧,不知道是否是MS的一个BUG,给相关的有研究的朋友原先考虑写一个检查Session的类,Session失效后,必须转向登陆页面,可每一个调用该类的页面,在不同的WEB路径下,所以转到登陆页面的URL都不同,每个页面都要调用和设置登陆页面路径,所以实际应用就放弃了这一想法后来考虑到不如写一个检查Session失效的页面,由客户端每一秒都刷新一下,就可以在一个页面中调用,但通过FRAME嵌入该ASPX老时有请求发出,不太好看,虽然该页面是隐藏的.

[Asp.net mvc]jquery.form.js无刷新上传

写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jquery.form.js的插件实现. demo 首先通过nuget安装插件jquery.form.js 引入js文件 <script src="~/Scripts/jquery.form.min.js"></script> 前端调用的代码 @{ ViewBag.Titl

微信小程序中无刷新修改

1.点击事件无刷新修改 原理:onload事件中是把这个分类和品牌的列表全部拿出来,拼接成数组的格式,在小程序中遍历的时候就要把小标(index)给绑定到左侧的品牌上,然后js中获取index的值,就可以动态的修改数组中的下标,右侧的品牌就可以动态的修改了 下面还有另一个方法,到时候会分享

关于网页中不刷新页面改变验证码的两种方法

今天做一个注册的页面,需要输入验证码.验证码的生成是动态的,不过要刷新页面,才能改变验证码,因为刷新后浏览器会向服务器提交新的请求,服务器就动态生成新的验证码响应给浏览器.为了能够在不刷新页面的情况下改变验证码,需要JavaScript的支持. 第一种方法是在请求地址后面带参数,这是一个小窍门.因为浏览器访问服务器的时候地址后面可以带上参数一起传给服务器,而加载内容是只看地址不看后面的参数:另外在<img src="地址"/>中,只要浏览器发现地址改变了就会自动重新加载该地

【Lua】遍历目录结果输出到页面中,刷新页面后出现500 Internal Server Error

在通过lua获取目录json字符串,然后作为数据源,通过Extjs生成树的过程中,发生了一个奇怪的问题,那就是获取目录json字符串然后传递给Extjs生成树的这个过程中,一开始都是很顺利的就生成了,不过再刷新页面的时候,json字符串突然收不到了,由于没有更改任何内容,两次操作的代码环境都是一样的,仅仅是刷新了页面,重新再次获取这个过程.结果就出现了问题. 百思不解,以为是Extjs的问题,各种配置均没有效果,然后就想着是否是json字符串的问题,于是在页面内直接访问lua文件,第一次成功返回