vs2010 ASP.NET, C#, Ajax 页面局部更新

目标: 首先撇开其余的不讲, 我们的目的在于让网页有局部更新的功能, 而不是每次都刷新整个页面来更新显示数据.

正题:

Step 1:

我用的是VS2010, 所以AJAX EXTENSION是自带的. 不需要再下载. 如果没有ajax extension的话先下载个, 点此下载 ASP.NET AJAX 1.0.

Step 2:

ScrpitManger(脚本管理器),  就在toolbox里面. 双击, 确保定义是在body之间的, 假设当前我们命名之为 ScriptManager1. ID=”ScriptManager1”

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="Learnjsp._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

Step 3:

UpdatePanel(更新板块, 这个便是局部更新区域的定义), 把需要进行局部更新的网页对象的定义嵌入到它的申明之间.

    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Label ID="Lbl" runat="server" Text="just a lable"></asp:Label>           
        </ContentTemplate>            

    </asp:UpdatePanel>
    <asp:Button ID="Btn" runat="server" Text="click me" onclick="Btn_Click" />
</asp:Content>

Step 4:

修改页面载入函数, 如下, 把脚本管理器需要管理的空间进行异步返回注册.

        protected void Page_Load(object sender, EventArgs e)
        {
            ScriptManager1.RegisterAsyncPostBackControl(Btn);
        }

        protected void Btn_Click(object sender, EventArgs e)
        {
            Lbl.Text = DateTime.Now.ToString();
            this.UpdatePanel1.Update(); 一定要加这句, 调用完函数后进行局部更新.
        }

Step 5: Done..

 

别笑我就成.. 我很弱...