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

转载

mob604756e80bb7 2017-04-14 12:03:00

文章标签 ajax html d3 javascript 控件 文章分类 代码人生

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

这样的方式对于少量控件的更新和取值，以及button的操作事件等都比較适用。

只是对于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 ，这个网上有带源代码的。

将这三个dll引用到project中。AjaxControlToolkit.dll这里下载的是源代码，须要自己把程序集生成为dll再引用进project中来。

在工具箱中就有了例如以下控件：

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

2、配置文件

web.config中须要添加例如以下节点

<system.web></system.web>中：

</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" %>

用法例如以下：

这里简单实现下面：点击button，然后页面文本框显示当前时间。

project：

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>

这样一来。button的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>