Post
Ask Question

How to Use NumericUpDown Control Of Ajax In ASP.NET Using C#

In this tutorial I will show you how to use NumericUpDown control of AJAX Toolkit in ASP.NET using C#, where we take two textbox and make that textbox to work as a numeric up control. 

INITIAL CHAMBER:

Step 1: Open Visual Studio 2010 and create an empty website. Give it a suitable name: numericup_demo.

Step 2: In Solution Explorer you will get your empty website and then add a Web Form and SQL Server Database. By going like the following:

For Web Form:

numericup_demo (Your Empty Website) - Right Click, Add New Item, then click Web Form. Name it insertdata_demo.aspx.

For SQL Server Database:

numericup_demo (Your Empty Website) - Right Click, Add New Item, then SQL Server Database. Add Database inside the App_Data_folder.

DATABASE CHAMBER:

Step 3: In Server Explorer click on your database Database.mdf - Tables, then Add New Table. Make table like the following:

Table - tbl_data [Don’t Forget to make ID as IS Identity - True]



Figure 1: Table

Design Chamber

Step 4: Now make some design for your application by going to numericup_demo.aspx and try the following code:

numericup_demo.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <title></title>  
  7.         <style type="text/css">  
  8. .style1  
  9. {  
  10. width: 144px;  
  11. }  
  12. .style2  
  13. {  
  14. width: 224px;  
  15. }  
  16. </style>  
  17.     </head>  
  18.     <body>  
  19.         <form id="form1" runat="server">  
  20.             <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>  
  21.             <table style="width:100%;">  
  22.                 <tr>  
  23.                     <td class="style1">  
  24. Your Product :</td>  
  25.                     <td class="style2">  
  26.                         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
  27.                         <asp:NumericUpDownExtender ID="TextBox1_NumericUpDownExtender" runat="server"   
  28. Enabled="True" Maximum="0"   
  29. Minimum="0" RefValues="Football;Basketball;Shoes;Wallet;Watches;Novels" ServiceDownMethod=""   
  30. ServiceDownPath="" ServiceUpMethod="" Tag="" TargetButtonDownID=""   
  31. TargetButtonUpID="" TargetControlID="TextBox1" Width="200"></asp:NumericUpDownExtender>  
  32.                     </td>  
  33.                     <td>  
  34.  </td>  
  35.                 </tr>  
  36.                 <tr>  
  37.                     <td class="style1">  
  38. Quantity :</td>  
  39.                     <td class="style2">  
  40.                         <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>  
  41.                         <asp:NumericUpDownExtender ID="TextBox2_NumericUpDownExtender" runat="server"   
  42. Enabled="True" Maximum="20"   
  43. Minimum="0" RefValues="" ServiceDownMethod=""   
  44. ServiceDownPath="" ServiceUpMethod="" Tag="" TargetButtonDownID=""   
  45. TargetButtonUpID="" TargetControlID="TextBox2" Width="200"></asp:NumericUpDownExtender>  
  46.                     </td>  
  47.                     <td>  
  48.                         <asp:Label ID="Label1" runat="server"></asp:Label>  
  49.                     </td>  
  50.                 </tr>  
  51.                 <tr>  
  52.                     <td class="style1">  
  53.  </td>  
  54.                     <td class="style2">  
  55.                         <asp:Button ID="Button1" runat="server" Text="Submit" onclick="Button1_Click" />  
  56.                     </td>  
  57.                     <td>  
  58.  </td>  
  59.                 </tr>  
  60.             </table>  
  61.         </form>  
  62.     </body>  
  63. </html>

Your design will look like the following image



Figure 2: Design

CODE CHAMBER

Step 5: Now the time is for server side coding so that our application works. Open your numericup_demo.aspx.cs file and code it like the following:

numericup_demo.aspx.cs

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Data;  
  8. using System.Data.SqlClient;  
  9. public partial class _Default: System.Web.UI.Page   
  10. {  
  11.     protected void Page_Load(object sender, EventArgs e)   
  12.     {  
  13.   
  14.     }  
  15.     protected void Button1_Click(object sender, EventArgs e)   
  16.     {  
  17.         SqlConnection con = new SqlConnection(@  
  18.         "Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");  
  19.         SqlCommand cmd = new SqlCommand("insert into tbl_data values(@name,@quantity)", con);  
  20.         cmd.Parameters.AddWithValue("@name", TextBox1.Text);  
  21.         cmd.Parameters.AddWithValue("quantity", TextBox2.Text);  
  22.         con.Open();  
  23.         int k = cmd.ExecuteNonQuery();  
  24.         con.Close();  
  25.         if (k != 0)   
  26.         {  
  27.             Label1.Text = "Data Inserted";  
  28.             Label1.ForeColor = System.Drawing.Color.ForestGreen;  
  29.         }   
  30.         else   
  31.         {  
  32.             Label1.Text = "Data is not Inserted";  
  33.             Label1.ForeColor = System.Drawing.Color.Red;  
  34.         }  
  35.     }  
  36. }
Output Chamber


Figure 3: Output

Show table data- [tbl_data]



Figure 4: Table data

Hope you liked it. Thank you for reading.


Similar Articles