c#用UpdatePanel实现接局部刷新

时间：2022-03-10 23:27:00

通常我们看到局部刷新就会想到Ajax，但是我今天要说的是c#的一个控件，只要把服务器按钮和要刷新的区域放在该控件内就能实现局部刷新。

当然它必须和ScriptManager控件一起使用。

UpdatePanel重要的属性如下：
属性
说明
ChildrenAsTriggers
当UpdateMode属性为Conditional时，UpdatePanel中的子控件的异步回送是否会引发UpdatePanle的更新。
RenderMode
表示UpdatePanel最终呈现的HTML元素。Block（默认）表示<div>，Inline表示<span>
UpdateMode
表示UpdatePanel的更新模式，有两个选项：Always和Conditional。Always是不管有没有Trigger，其他控件都将更新该UpdatePanel，Conditional表示只有当前UpdatePanel的Trigger，或ChildrenAsTriggers属性为true时当前UpdatePanel中控件引发的异步回送或者整页回送，或是服务器端调用Update()方法才会引发更新该UpdatePanel。

下面我们来个小实例：

前端代码：

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

<!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>

    <script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        //document.getElementById("Button2").click(fun);

        function fun() {

            document.getElementById("Button2").setAttribute("checked", "checked");

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <asp:ScriptManager ID="ScriptManager" runat="server" />

    <asp:UpdatePanel ID="UpdatePanel1"  UpdateMode="Conditional" runat="server" >

    <ContentTemplate>

       <fieldset>

       <legend>UpdatePanel content</legend>

        <!-- Other content in the panel. -->

           <input type="checkbox" checked="checked" />

           <input id="ch" type="checkbox"  />

           <input type="checkbox" checked="checked" />

           <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

           <asp:Button ID="Button2" runat="server" Text="Button" OnClick="ccc" OnClientClick="return fun()" />

           <iframe id="iframesun" runat="server" style="width:100%;height:944px"></iframe>

        </fieldset>

    </ContentTemplate>

</asp:UpdatePanel>

    </div>

    </form>

</body>

</html>

　后端代码：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace WebApplication2

{

    public partial class WebForm4 : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

        }

        public void ccc(object sender, EventArgs e) {

           this.TextBox1.Text= "你好UpdatePanel";

            this.iframesun.Attributes.Add("src", "https://www.baidu.com/");

        }

    }

}

　这样我们实现了，不刷新整个页面，得到TextBox1赋值，和加载了一个百度的iframe。

相关文章