NumericUpDownExtender Control With UpdatePanel in AJAX

Davin Martyn
Feb 14, 2012

49k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

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

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.

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.

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.