asp:UpdatePanel客户端回传事件管理

asp:UpdatePanel客户端回传事件管理asp:UpdatePanel客户端回传事件管理Asp:UpdatePanel是在Asp.NetWebForm中的一个局部刷新控件,虽然很好用,但是在使用过程中却发现如果局部刷新的数据需要再次使用页面js进行格式化,页面则会乱套,所以在这里我们需要对UpdatePanel的回传过程进行控制。

大家好,又见面了,我是你们的朋友全栈君。

asp:UpdatePanel客户端回传事件管理

Asp:UpdatePanel是在Asp.Net WebForm中的一个局部刷新控件,虽然很好用,但是在使用过程中却发现如果局部刷新的数据需要再次使用页面js进行格式化,页面则会乱套,所以在这里我们需要对UpdatePanel的回传过程进行控制。

1. Sys.WebForms.PageRequestManager类
管理服务器 UpdatePanel 控件在浏览器中的部分页更新,并通过使用客户端脚本定义属性、事件和方法以自定义 Web 页。

//获取实例对象
var prm = Sys.WebForms.PageRequestManager.getInstance();

2. 回传的周期控制

  • initializeRequest
    在开始处理异步请求之前引发。 可以使用此事件取消回发。

  • beginRequest
    在开始处理异步回发、将回发发送到服务器之前引发。 可以使用此事件来设置请求标头,或开始一个动画以指示正在处理页面。

  • pageLoading
    在收到服务器对异步回发的响应之后、页上任何内容更新之前引发。 可以使用此事件为更新的内容提供自定义转换效果。

  • pageLoaded
    在因同步回发或异步回发而刷新页上的所有内容之后引发。 可以使用此事件为更新的内容提供自定义转换效果。

  • endRequest
    在异步回发完成,并且控制权返回到浏览器之后引发。 可以使用此事件向用户提供通知或将错误记录到日志。

3 . 演示

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Demo.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>UpdatePanel</title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style type="text/css"> .odd { background-color: #00ff90; } .even { background-color: #0094ff; } </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <hr />
            <form id="form1" runat="server">
                <div>
                    <asp:ScriptManager runat="server" ID="ScriptManager"></asp:ScriptManager>
                    <asp:TextBox runat="server" ID="txtKeyword" CssClass="input-sm"></asp:TextBox>
                    <asp:Button runat="server" ID="btnSearch" Text="Search..." CssClass="btn btn-primary" OnClick="btnSearch_Click" />
                    <asp:UpdatePanel runat="server" ID="UpdatePanel">
                        <ContentTemplate>
                            <table class="table table-bordered table-condensed table-hover table-responsive">
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Name</th>
                                        <th>...</th>
                                        <th>...</th>
                                        <th>...</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <asp:Repeater runat="server" ID="rpTable">
                                        <ItemTemplate>
                                            <tr>
                                                <td><%# Eval("Id") %></td>
                                                <td><%# Eval("Name") %></td>
                                                <td>...</td>
                                                <td>...</td>
                                                <td>...</td>
                                            </tr>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </tbody>
                            </table>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
                        </Triggers>
                    </asp:UpdatePanel>
                </div>
            </form>
        </div>
    </div>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript"> function initTableStyle() { 
     $('tbody tr').each(function (index, item) { 
     $(item).addClass(index % 2 == 0 ? 'even' : 'odd'); }); } $(function () { 
     initTableStyle(); }); </script>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;

namespace Demo
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                InitEmployees();
                List<Employee> lstEmployees = Cache["Employee"] as List<Employee>;
                if(lstEmployees != null)
                    BindingTable(lstEmployees);
            }
        }

        void InitEmployees()
        {
            if (Cache["Employee"] == null)
            {
                List<Employee> lstEmployees = new List<Employee>();
                lstEmployees.Add(new Employee { Id = 1, Name = "张三" });
                lstEmployees.Add(new Employee { Id = 2, Name = "李四" });
                lstEmployees.Add(new Employee { Id = 3, Name = "王五" });
                lstEmployees.Add(new Employee { Id = 4, Name = "赵六" });
                Cache["Employee"] = lstEmployees;
            }
        }

        void BindingTable(IEnumerable<Employee> employees)
        {
            this.rpTable.DataSource = employees;
            this.rpTable.DataBind();
        }

        protected void btnSearch_Click(object sender, EventArgs e)
        {
            List<Employee> lstEmployees = Cache["Employee"] as List<Employee>;
            if (lstEmployees != null)
            {
                lstEmployees = lstEmployees.Where(x => x.Name.Contains(this.txtKeyword.Text.Trim()) 
                    || string.IsNullOrEmpty(this.txtKeyword.Text)).ToList();
                BindingTable(lstEmployees);
            }
        }
    }

    class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

运行结果:

运行结果

效果就是,上面的通过搜索获取数据进行展示,然后通过 javascript来控制table的class。运行之后,初始化时貌似没有什么问题,但是当我们点击search…按钮之后,我们发现table的行背景色没有了,为什么?
这个是因为当我们点击搜索按钮之后,新获取的数据被呈现在页面上,但是我们初始化表格样式的javascript代码并没有再次执行,所以我们的表格样式会出现下面的这种情况:

点击搜索之后的效果

如果我们需要通过javascript来对表格样式进行再次渲染,那么我们就需要了解UpdatePanel回传的过程;

下面我们在javascript中加入以下代码:

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_initializeRequest(function (sender, args) { 
   
    console.log('add_initializeRequest');
});

prm.add_beginRequest(function (sender, args) { 
   
    console.log('add_beginRequest');
});

prm.add_pageLoading(function (sender, args) { 
   
    console.log('add_pageLoading');
});

prm.add_pageLoaded(function (sender, args) { 
   
    console.log('add_pageLoaded');
});

prm.add_endRequest(function (sender, args) { 
   
    console.log('add_endRequest');
});

当我们再次点击搜索按钮之后,浏览器控制台中输出的的顺序为:

add_initializeRequest
add_beginRequest
add_pageLoading
add_pageLoaded
add_endRequest

很明显,当我们的UpdatePanel每次回传过程中,这几个被注册的事件都会先后执行,我们可以在add_pageLoaded或者add_endRequest中加入我们渲染表格的代码,我这里就在add_endRequest里面加入这段代码:

prm.add_endRequest(function (sender, args) { 
   
console.log('add_endRequest');

initTableStyle();
});

再次点击搜索的结果:
加入事件处理后再次点击搜索的结果

说明我们这样做完全OK!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/163540.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • KVM命令

    KVM命令KVMCommandThecommandIusedtocreatevirtualmachineEnterKVMGUIvirt-managerEntercommandinterfacevirtshQuitcommandinterfacequitStartvirtualmachinevirshstarthost-name&starth

  • 数仓拉链表[通俗易懂]

    数仓拉链表[通俗易懂]拉链表一丶什么是拉链表拉链表是一种数据模型,主要是针对数据仓库设计中表存储数据的方式而定义的,顾名思义,所谓拉链,就是记录历史。记录一个事物从开始,一直到当前状态的所有变化的信息。拉链表可以避免按每一天存储所有记录造成的海量存储问题,同时也是处理缓慢变化数据的一种常见方式。百度百科的解释:拉链表是维护历史状态,以及最新状态数据的一种表,拉链表根据拉链粒度的不同,实际上相当于快照,只不过做了优化,去除了一部分不变的记录,通过拉链表可以很方便的还原出拉链时点的客户记录。二丶拉链表的产生背景在数据仓库的

    2022年10月16日
  • Win11双屏设置双壁纸–2K屏+1080P使用不同壁纸的方法

    Win11双屏设置双壁纸–2K屏+1080P使用不同壁纸的方法先上方法及效果:方法:两张图片(图1尺寸:1920×1080,图2尺寸:2560×1440),Photoshop裁减图1并与图2拼接成一张图片(尺寸:4480×1440)设置为背景图片,并在【个性化-背景】中设置为【平铺】;效果:具体步骤:1.环境:win11(win10类似),屏幕1(1080p),屏幕2(2k屏,16:9);2.所需图片:图1(1920×1080);图2(2560×1440)3.工具:Photoshop(其他拼图工具亦可)4.步骤:1)在PS中【图像-画布大小】中修改画布尺

    2022年10月27日
  • TCP/IP三次握手与四次挥手学习笔记(一)「建议收藏」

    TCP/IP三次握手与四次挥手学习笔记(一)

  • qmake:高级用法

    qmake:高级用法一、添加新的配置特性特性(features)是*.prf文件中自定义函数和定义的集合(Qt安装目录\mkspecs\features中有很多*.prf文件)。存放特性文件的目录有很多地方,qmake在查找.prf文件时会按以下顺序检查每个目录:在QMAKEFEATURES环境变量中列出的目录中, 在QMAKEFEATURES属性变量中列出的目录中。 在位于mkspecs目录中的features目录中。 在QMAKESPEC环境变量提供的目录下的featu

  • 【数据库】报错ora 12154 解决方法[通俗易懂]

    【数据库】报错ora 12154 解决方法[通俗易懂]Oracle报错ora12154解决办法:1.确认服务器监听正确打开;2.确认别名前无空格。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号