ASP.NET Ajax Extension Update Panel Example

Wednesday, 30 May 2012

ASP.NET Ajax Extension Update Panel Example

00:13

aspexamples

13 comments

Paste Into ASPX Source

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

<!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>ASP.NET EXAMPLES | Ajax Extensions | Ajax Examples | Update Panel Example
    </title>
</head>
<body style="font-family:Tahoma; font-size:14px;">
    <form id="form1" runat="server">
    <center>
        <div style="border: 2px; font-size:12px; border-color: Black; border-style: solid; color: White;
            background-color: Red; font-weight: bold; font-family: Tahoma">
            By : <a href="http://asp-examples.blogspot.com/" style="color:Yellow" target="_search">asp-examples</a>
            (Click to get more Asp.net Examples)
            <br />
            Author : Akash Parmar<br />
            Company Name : Soft-Tech Designs n Development<br />
            We Design your Dreams - Develop your Life...
        </div>
    </center>
    <div>
        <%--Its required to place ScriptManager within the form tag whenever you use any Ajax Controls...--%>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <h4>
                ASP.NET Ajax Extension Update Panel Example - Button Click Event -
            </h4>
            <h4>
                Gets the text from TextBox and Prints in Label1(Inside Update Panel) but prevents
                changes in Label2(out side update panel)...
            </h4>
        </div>
        <center>
            <div style="border: 2px; border-color: Black; border-style: solid">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <h5>
                            Inside Update Panel</h5>
                        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        <asp:Button ID="Button1" runat="server" Text="Show" OnClick="Button1_Click" /><br />
                        <asp:Label ID="Label1" runat="server" Text="Label1"></asp:Label>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
            <br />
            <div style="border: 2px; border-color: Black; border-style: solid">
                <h5>
                    Outside Update Panel</h5>
                <asp:Label ID="Label2" runat="server" Text="Label2"></asp:Label>
            </div>
        </center>
    </div>
    </form>
</body>
</html>

Paste Into ASPX.CS Code

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

public partial class Ajax_Extension_UpdatePanel : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = TextBox1.Text;
        Label2.Text = TextBox1.Text;
    }
}

Posted in: AJAX Extensions

Categories

Popular Posts

Wednesday, 30 May 2012

ASP.NET Ajax Extension Update Panel Example

13 comments:

Post a Comment

Archives

Total Pageviews