NumericUpDownExtender Control With UpdatePanel in AJAX


Introduction

Ajax (Asynchronous JavaScript and XML) is a new web development technique for interactive websites. With AJAX help we can develop web applications and retrieve small amounts of data from a web server. AJAX consists of a different type of technology.

  • JavaScript
  • XML
  • Asynchronous Call to the server

NumericUpDownExtender Control

NumericUpDown is an ASP.NET AJAX extender that can be attached to an ASP.NET TextBox control to add "up" and "down" buttons that increment and decrement the value in the TextBox. The increment and decrement can be simple +1/-1 arithmetic, they can cycle through a provided list of values (like the months of the year), or they can call a Web Service to determine the next value. Page authors can also provide custom images to be used instead of the default up/down button graphics.

Property

  • TargetControlID
  • BehaviourID
  • Maximum
  • Minimum
  • ServiceDownPath

UpdatePanel

UpdatePanel control is a central part of ASP.NET AJAX functionality. It is used with ScriptManager control to enable partial rendering of the page. The <asp:UpdatePanel> tag contains two tags; the ContentTemplate and the Triggers tags. The ContentTemplate tag is required for the content of the panel. The content can be anything that you would normally put on your page, from literal text to web controls. The Triggers tag  defines certain triggers which will make the panel update it's content.

Property

  • ClientIDMode
  • EnableViewState
  • RenderMode
  • UpdateMode
  • ViewStateMode

Step 1 : Open Visual Studio 2010.

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

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

  • Select Add->New Item
  • Select WebForm
  • Default.aspx page open

Step 3 : Open the Default.aspx page and click in [Design option].

  • Drag and drop Scriptmanager Control Button, UpdatePanel, TextBox


Step  4 : In [Design] page right-click in UpdatePanel Control.

  • Select Properties option
  • Define ViewStateMode
nu5.gif

Step  5 : Go to the Default.aspx[Design] option and drag an Image control to increase and decrease the size.

Code

<
asp:Image ID="Image1" runat="server" ImageUrl="~/Lighthouse.jpg" Width="100"/>

Step 6 : Now we drag NumericUpDownExtender control from AJAX control Toolkit and define all the properties.

nu6.gif

Code

<asp:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server" TargetControlID="TextBox1" Minimum="1" Maximum="35" Width="100" >
</
asp:NumericUpDownExtender
>

Step 7 : Now click on the Button and write a code in the Default.aspx.cs file option.

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 _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        int number = Convert.ToInt32(TextBox1.Text);
        Image1.Width = 50 * number; 
    }
}

Step 8 :
Now go to the Default.aspx[source] option and write more code.

Code

<title></title>
</
head>
<
body>
 <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div style="background-color: #C0C0C0">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ViewStateMode="Enabled">
        <ContentTemplate>
      <asp:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server" TargetControlID="TextBox1" Minimum="1" Maximum="35" Width="100" >
        </asp:NumericUpDownExtender>
        <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
        <br />
        <br />
        <asp:Label ID="Label1" runat="server" Text="Label" ForeColor="#FFCCFF"></asp:Label>
        <br />
        <br />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Image ID="Image1" runat="server" ImageUrl="~/Lighthouse.jpg" Width="100"/>
        </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form
>
</body>
</
html>

Step  9  :
 Now run the application by pressing F5.

nu1.gif

Step 10 :  When we click on the up arrow then the number in the TextBox increases; after that click on the Button to increase the size of the image.

nu2.gif

Step 11 : Now again we increase the TextBox value and click on the Button then again increase the image size.

nu3.gif

Step 12 : When we click on the down arrow then decrease the TextBox value and clicking on the image button decreases the size of the image.

nu4.gif

Resource

Work with UpdatePanel Control in AJAX

Put ASP.NET AJAX Timer and UpdatePanel with RssToolKit all in action

A Scalable Ajax Wizard Sample Application

AdRotator Control in AJAX

Getting Started with AJAX 1.0