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. {
  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.