Work with UpdatePanel Control in AJAX


Introduction

AJAX (Asynchronous JavaScript and XML) is a new web development technique use for the interactive website. AJAX helps us develop web applications and retrieve a small amount of data from a web server. AJAX consists of different types of technology.

  • JavaScript
  • XML
  • Asynchronous Call to the server

Master Page : Master pages allow you to create a consistent look and behavior for all the pages (or group of pages) in the web application. A master page provides a template for other pages, with shared layout and functionality. The master page defines placeholders for the content, which can be overridden by content pages. The output result is a combination of the master page and the content page. When users request the content page, ASP.NET merges the pages to produce output that combines the layout of the master page with the content of the content page.

Master Page Property :

  • Content Placeholder tag <asp:Content Placeholder>
  • Content tag <asp:content>
Step 1 : Open Visual Studio 2010.

  • Go to File->New->WebSite
  • Select ASP.NET Empty WebSite

Add MasterPage :

Step 2 : Go to Solution Explorer and right-click.

  • Select Add->New Item
  • Select Master Page
  • Masterpage.master page open

masterpage.gif

Step 3 :  Go to Masterpage [Design Option] and drag Scriptmanager control from Toolbox.

  • ScriptManager Control design outside the ContentPlaceHolder.

ScriptManagerControl :

<asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder
>
</head>
<
body>
    <form id="form1" runat="server">
    <div style="background-color: #00FFFF">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
  <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat
="server">

Create Content page for the master page :

Step 4 : Go to Solution Explorer and right-click.

  • Select Add->New Item
  • Select WebForm
  • Select MasterPage check box and click ok
  • Default.aspx page open

webma.gif

Add UpdatePanel inside the Content option.

Step 5 : Go to the Toolbox and drag a UpdatePanel, Calendar Control inside the content option.

Control :

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<
asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Content Page<br />
    <asp:UpdatePanel id="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <contenttemplate>
        <fieldset>
        <legend><strong>UpdatePanel<br /> </strong></legend>
           <asp:Calendar id="Calendar1" runat="server"
                onselectionchanged="Calendar1_SelectionChanged" BackColor="#FF6699"
                BorderColor="#CC0000"></asp:Calendar>
        </fieldset>
        </contenttemplate>
    </asp:UpdatePanel
>
</asp:Content>

Step 6 : Now run the application by Pressing F5.

runm.gif
Step 7 : Click in the next and previous month controls on the calendar.The calendar change without refreshing the whole page.

runm2.gif

Add control to the MasterPage :

Step 8 : Go to MasterPage drag two button after the ScriptManager Control.

  • Right-click in Button and select property option

  • Set the ID of Button and Text property in the Button Control

asp:Button ID="decrement" runat="server" Text="-" OnClick="MasterButton_Click" Width=" 40px"/>
<
asp:Button ID="increment" runat="server" Text="+"  OnClick="MasterButton_Click" Width
="40px"/>

Step 9 : Now double-click in the page option and write a code.

Code :
public partial class MasterPage : System.Web.UI.MasterPage
{
    protected void Page_Load(object sender, EventArgs e)
    {
        ScriptManager1.RegisterAsyncPostBackControl(increment);
        ScriptManager1.RegisterAsyncPostBackControl(decrement);
    }

Step 10 : Now go to [Design] option and click in Button control and write a code.

Code :

protected void MasterButton_Click(object sender, EventArgs e)
    {
         switch (((Control)sender).ID)
    {
        case "increment":
            this.Offset = this.Offset + 1;
            break;
        case "decrement":
            this.Offset = this.Offset - 1;
            break;
    }
    ((UpdatePanel)ContentPlaceHolder1.FindControl("UpdatePanel1")).Update();
    Calendar cal = ((Calendar)ContentPlaceHolder1.FindControl("Calendar1"));
    DateTime newDateTime = DateTime.Today.Add(new TimeSpan(Offset, 0, 0, 0));
    cal.SelectedDate = newDateTime;
    }

Define Public property named offset in the MasterPage:

Property :

public Int32 Offset
    {
        get
        { return (Int32)(ViewState["Offset"] ?? 0); }
        set
        { ViewState["Offset"] = value; }
    }

Step 11 : Now go to the content page[Design]option and click in calendar control write a code.

Code :

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        DateTime selectedDate = Calendar1.SelectedDate;
        Master.Offset =
           ((TimeSpan)Calendar1.SelectedDate.Subtract(
           DateTime.Today)).Days;
    }

Step 12 : In a content [design] option double -click in page and define the page-load event and write a code.

Code :

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DateTime newDateTime =
        DateTime.Today.Add(new
        TimeSpan(Master.Offset, 0, 0, 0));
        Calendar1.SelectedDate = newDateTime;
    }

Add Master Directive :

Step 13 : Go to the content page [Source] option define the MasterPage Directive.

<%@ MasterType VirtualPath="MasterPage.master" %>

Step 14 : In the property window set the UpdatePanelUpdateModeProperty.

  • Define property :Conditional

update.gif

Step 15 : Now run the application by Pressing F5.

run15.gif

Step 16 : Now select date on the calendar and then click in increment(+) button on the master page to change the selected date.

run16.gif

Now click in increment(+) button option

run16`.gif

Step 17 : Now select date on the calendar and then click in decrement(-) button on the master page to change the selected date.

run17.gif


Similar Articles