Asp.net中UpdatePanel的用法详解

Asp.net UpdatePanel 允许用户构建一个丰富的，以客户端为中心的应用程序，引用UpdatePanel控件，能够实现页面的部分刷新，一个包含scriptManage和 UpdatePanel控件的页面自动具有页面部分刷新的功能，不需要写任何的客户端JavaScript代码。一个web页面只能包含一个 ScriptManage控件，但可以包含一个或多个UpdatePanel控件。

使用UpdatePanel控件实现页面的局部更新，需要包含一个ScriptManage控件，并且必须将ScriptManage控件的 EnablePartialRendering属性设置为true，不过你不用担心，该属性的默认值就是True，所以，在默认情况下，只要添加了 ScriptManage控件，该页面就自动具有了局部更新的能力。

一、UpdatePanel的结构

<asp:ScriptManager ID="ScriptManager1" runat="server" >
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Always" RenderMode="Block">
<ContentTemplate>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger />
<asp:PostBackTrigger />
</Triggers>
</asp:UpdatePanel>

主要属性：
1，ChildrenAsTriggers : 内容模板内的子控件的回发是否更新本模板(和UpdateMode的conditional有关)
2，UpdateMode : 内容模板的更新模式，有always和conditional俩种
always：每次ajax PostBack或者普通的PostBack都能引起panel的更新 如果UpdatePanel设置为Always时，不能使用上面的ChildrenAsTriggers属性，强行使用会报错，是updatepanel默认的更新模式,和设置trigger触发器没有直接的关系。
conditional：只有满足如下某一条件时才更新panel的内容
如果设置UpdateMode="conditional" ChildrenAsTriggers="false"时候，子控件不允许触发更新
1)，当panel中的某个控件引发PostBack时
2), 当Panel指定的某个Trigger被引发时
3，RenderMode： 局部更新控件的呈现形式，俩中，Block(局部更新在客户端以div形式展现)和Inline(局部更新以span的形式展现在客户端)
子元素：
1,contentTemplate: 局部更新控件的内容模板，可以在其中添加任何控件
2，Triggers: 局部更新的触发器，包括俩中：异步回发(AsyncPostBackTrigger) 用来实现局部更新。普通回发(PostBackTrigger)和普通的一样，不管是否使用了局部更新控件，都会引起页面的全部更新。

二、下面是几个简单的例子：

1、updatepanel的updatemode设置为always

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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>
</div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<ContentTemplate>
<% =DateTime.Now.ToString()%>
<asp:Button ID="Button1" runat="server" Text="UpdatePanelButton" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button2" runat="server" Text="Button" />
</form>
</body>
</html>

不管哪个按钮，都会触发更新，只不过外面的按钮postback的时候页面显示回发而已 ！

2、updatepanel的updatemode设置为conditional( ChildrenTriggers="false" 就是updatepanel中事件不触发更新)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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>
</div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<% =DateTime.Now.ToString()%>
<asp:Button ID="Button1" runat="server" Text="UpdatePanelButton" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button2" runat="server" Text="Button" />
</form>
</body>
</html>

三、下面介绍下updatePanel的触发器Trigger

了解数据库的人应该对触发器这个概念比较清楚，Trigger对于UpdatePanel来说也是很关键的
开始简单介绍了UpdatePanel的俩中触发器asyncPostBackTrigger和PostBackTrigger的作用
这里用例子大概在稍微深入地介绍下：

1,普通回调触发器(PostBackTrigger)

PostBackTrigger主要针对UpdatePanel模板内的子控件，因为当子控件被触发时。它只会更新模版内的数据，模板外的控件不会发生变化.当需要更新全局 内容的时候就可以通过PostBackTrigger触发器来实现页面的全部回调。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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>
</div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<ContentTemplate>
<% =DateTime.Now.ToString()%>
<asp:Button ID="Button1" runat="server" Text="UpdatePanelButton" />
</ContentTemplate>
<Triggers>
<!--下面的注释掉，点击updatePanel内的button则只更新Panel内的时间，取消注释责全部更新-->
<!-- <asp:PostBackTrigger ControlID="Button1"/>-->
</Triggers>
</asp:UpdatePanel>
<br />
<% =DateTime.Now.ToString()%>
<asp:Button ID="Button2" runat="server" Text="Button" />
</form>
</body>
</html>

2，异步回调触发器(AsyncPostBackTrigger) 是实现局部更新的关键，在触发器内定义引起回发的控件和事件

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<ContentTemplate>
<% =DateTime.Now.ToString()%>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<br />
<% =DateTime.Now.ToString()%>
<asp:Button ID="Button2" runat="server" Text="Button" />
</form>
</body>
</html>

运行了发现点击button2的时候只更新了 updatepanel内部的时间
上面的例子也可以动态更新UpdatePanel的一些源代码：
具体例子就不写了下面 大概写点主要代码：

protected void Page_Load(object sender, EventArgs e)
{
//获取更新控件儿
UpdatePanel mapanel = UpdatePanel1;
//设置触发模式
mapanel.UpdateMode = UpdatePanelUpdateMode.Conditional;
//显示时间
Label1.Text = DateTime.Now.ToString();
//添加触发
AsyncPostBackTrigger tri = new AsyncPostBackTrigger();
tri.ControlID = "Button2";
tri.EventName = "Click";
mapanel.Triggers.Add(tri);
}

到此这篇关于Asp.net中UpdatePanel的用法详解的文章就介绍到这了,更多相关Asp.net UpdatePanel内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • ASP.NET session.timeout设置案例详解

    session.timeout 方法一: asp.net Session的默认时间设置是20分钟,即超过20分钟后,服务器会自动放弃Session信息. 当我们在asp.net程序中打开webconfig的时候,可以看到一段如下的代码:Asp.net程序代码: sessionState节点放在<system.web>节点下,形式如下: configuration 元素(常规设置架构) system.web 元素(ASP.NET 设置架构) sessionState 元素(ASP.NET 设置架

  • asp.net core为IHttpClientFactory添加动态命名配置

    目录 官方有什么推荐么? IHttpClientFactory.CreateClient是如何将HttpClient创建出来的? 扩展点一的实现 扩展点二的实现 使用 总结一下 比如如何使用IHttpClientFactory动态添加cer证书 有三种方法推荐方法 方法一: 推荐的做法是这样子 services.AddHttpClient("a业务").ConfigurePrimaryHttpMessageHandler(...a业务证书) services.AddHttpClient

  • ASP.NET Core如何实现简单的静态网站滚动更新

    ASP.NET Core如何实现简单的静态网站滚动更新

    目录 Intro FileProvider Construct Host Demo More 总结 Intro 最近我们老板想让我实现一个静态网站"滚动更新"的功能,其实就是希望网站部署的时候网站内容完整的切换,不能网站部署的过程中一部分是新的内容,另外一部分是老的内容. 这让我想到了微软的 Azure App Service,上家公司主要是用微软的云服务 Azure,站点是部署到 Azure App Service 上的,Azure App Service 有一个部署槽的概念,我们的

  • asp.net core配合vue实现后端验证码逻辑

    目录 概述 部分原理 源码 概述 网上的前端验证码逻辑总感觉不安全,验证码建议还是使用后端配合验证. 如果产品确定可以上网的话,就可以使用腾讯,百度等第三方验证,对接方便.但是产品可能内网部署,就必须自己写了. 本文章就是基于这一点来实现的. 前端验证码显示一个图片,后端生成图片. 部分原理 1.前端调用生端获取图片时,传入一个roomID,后端生成一个4位验征码,放入redis中.然后生成一个图片返回. 2.前端显示图片,登录时将roomID和填写的验证码,一并提交,登录接口根据roomId从

  • asp.net core 使用 tensorflowjs实现 face recognition的源代码

    asp.net core 使用 tensorflowjs实现 face recognition的源代码

    功能描述 上传照片文件名及是系统要识别标签或是照片的名称(人物标识) 提取照片脸部特征值(调用 facemesh模型) 保存特征值添加样本(调用 knnClassifier) 测试上传的图片是否识别正确 项目依赖的库 源代码(neozhu/smartadmin.core.urf: Domain Driven Design (DDD) ultra-lightweight rapid development architecture(support .net 5.0) (github.com)) t

  • Asp.net中UpdatePanel的用法详解

    Asp.net UpdatePanel 允许用户构建一个丰富的,以客户端为中心的应用程序,引用UpdatePanel控件,能够实现页面的部分刷新,一个包含scriptManage和 UpdatePanel控件的页面自动具有页面部分刷新的功能,不需要写任何的客户端JavaScript代码.一个web页面只能包含一个 ScriptManage控件,但可以包含一个或多个UpdatePanel控件. 使用UpdatePanel控件实现页面的局部更新,需要包含一个ScriptManage控件,并且必须将S

  • asp.net中ViewState的用法详解

    asp.net中ViewState的用法详解

    在web窗体控件设置为runat = "server",这个控件会被附加一个隐藏的属性_ViewState,_ViewState存放了所有控件在ViewState中的状态值.ViewState是一个名称/值的对象集合.当请求某个页面时,ASP.NET会把所有控件的状态序列化成一个字符串,然后作为窗体的隐藏属性送到客户端,当客户端吧页面回传时,ASP.NET分析回传的窗体属性,并赋给控件对应的值. 当我们在写一个asp.net表单时, 一旦标明了 form runat=server ,那

  • 基于C++中setiosflags()的用法详解

    cout<<setiosflags(ios::fixed)<<setiosflags(ios::right)<<setprecision(2); setiosflags 是包含在命名空间iomanip 中的C++ 操作符,该操作符的作用是执行由有参数指定区域内的动作:   iso::fixed 是操作符setiosflags 的参数之一,该参数指定的动作是以带小数点的形式表示浮点数,并且在允许的精度范围内尽可能的把数字移向小数点右侧:   iso::right 也是se

  • Angular 中 select指令用法详解

    最近在angular中使用select指令时,出现了很多问题,搞得很郁闷.查看了很多资料后,发现select指令并不简单,决定总结一下. select用法: <select ng-model="" [name=""] [required=""] [ng-required=""] [ng-options=""]> </select> 属性说明: 发现并没有ng-change属性 ng-

  • java 中 ChannelHandler的用法详解

    java 中 ChannelHandler的用法详解 前言: ChannelHandler处理一个I/O event或者拦截一个I/O操作,在它的ChannelPipeline中将其递交给相邻的下一个handler. 通过继承ChannelHandlerAdapter来代替 因为这个接口有许多的方法需要实现,你或许希望通过继承ChannelHandlerAdapter来代替. context对象 一个ChannelHandler和一个ChannelHandlerContext对象一起被提供.一个

  • Java中isAssignableFrom的用法详解

    Java中isAssignableFrom的用法详解

    class1.isAssignableFrom(class2) 判定此 Class 对象所表示的类或接口与指定的 Class 参数所表示的类或接口是否相同,或是否是其超类或超接口.如果是则返回 true:否则返回 false.如果该 Class 表示一个基本类型,且指定的 Class 参数正是该 Class 对象,则该方法返回 true:否则返回 false. 1. class2是不是class1的子类或者子接口 2. Object是所有类的父类 一个例子搞定: package com.auuz

  • php 中的closure用法详解

    Closure,匿名函数,是php5.3的时候引入的,又称为Anonymous functions.字面意思也就是没有定义名字的函数.比如以下代码(文件名是do.php) <?php function A() { return 100; }; function B(Closure $callback) { return $callback(); } $a = B(A()); print_r($a);//输出:Fatal error: Uncaught TypeError: Argument 1

  • JavaScript中eval()函数用法详解

    eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行. 如果参数是一个表达式,eval() 函数将执行表达式.如果参数是Javascript语句,eval()将执行 Javascript 语句. 语法 复制代码 代码如下: eval(string) 参数 描述 string 必需.要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句. eval()函数用法详解: 此函数可能使用的频率并不是太高,但是在某些情况下具有很大的作用,下面就介绍一下eva

  • C# 中string.split用法详解

    第一种方法 string s=abcdeabcdeabcde; string[] sArray=s.Split('c') ; foreach(string i in sArray) Console.WriteLine(i.ToString()); 输出下面的结果: ab deab deab de 第二种方法 我们看到了结果是以一个指定的字符进行的分割.使用另一种构造方法对多个字 符进行分割: string s="abcdeabcdeabcde"; string[] sArray1=s.

  • JS、jQuery中select的用法详解

    1.js var obj=document.getElementById(selectid); obj.options.length = 0; //清除所有内容 obj.options[index] = new Option("three",3); //更改对应的值 obj.options[index].selected = true; //保持选中状态 obj.add(new Option("4","4")); "文本",&

随机推荐