ASP.NET AJAX---UpdatePanel control small instance (partial update of time & conditional update)

①.aspx file

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

<!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 id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                <asp:Button ID="Button1" runat="server" Text="按钮1" OnClick="Button1_Click" />
                <asp:Button ID="Button2" runat="server" Text="按钮2" OnClick="Button2_Click" />
                <asp:Button ID="Button3" runat="server" Text="按钮3" OnClick="Button3_Click" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
        <asp:Button ID="Button4" runat="server" Text="按钮4" OnClick="Button4_Click" />
    </div>
    </form>
</body>
</html>

②.aspx.cs file (backstage)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
   
   //IsPostBack：若页面是首次加载，属性值为false
            Label1.Text = "页面加载时间：" + DateTime.Now.ToString();
            Label2.Text = "页面加载时间：" + DateTime.Now.ToString();
        }
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "页面加载时间：" + DateTime.Now.ToString();
        Label2.Text = "页面加载时间：" + DateTime.Now.ToString();
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        Label1.Text = "页面加载时间：" + DateTime.Now.ToString();
        Label2.Text = "页面加载时间：" + DateTime.Now.ToString();
    }

    protected void Button3_Click(object sender, EventArgs e)
    {
   
   //触发器的设置阻断了“按钮3”的Click事件，实现了UpdatePanel的有条件更新（因此点击“按钮3”的时候不更新时间）
        Label1.Text = "页面加载时间：" + DateTime.Now.ToString();
        Label2.Text = "页面加载时间：" + DateTime.Now.ToString();
    }

    protected void Button4_Click(object sender, EventArgs e)
    {
        Label1.Text = "页面加载时间：" + DateTime.Now.ToString();
        Label2.Text = "页面加载时间：" + DateTime.Now.ToString();
    }
}

③The effect diagram is shown in the figure:
Insert picture description here
④Description:
Ⅰ. Click button 1 and button 2 to only update the time without refreshing the page.
Ⅱ. Clicking on button 3 does not respond (the trigger setting blocks the Click event of "Button 3" and realizes the conditional update of UpdatePanel)
Ⅲ. Clicking on button 4 not only updates the time but also refreshes the page.
Ⅳ. The ScriptManager control and UpdatePanel control cooperate to achieve partial refresh and conditional refresh of the page without writing any JavaScript code.

ASP.NET AJAX---UpdatePanel control small instance (partial update of time & conditional update)

Guess you like