Abstraction

Many new developers encounter a situation where there is a need to add dynamic control on the client side. This article will help them to understand how to add dynamic control on the client side using jQuery. Here I have described it using a step-by-step approach.

Initial chamber

Step 1

Open Visual Studio and create an empty website, provide a suitable name such as AddDynamicTextBox.

Step 2

In Solution Explorer you will get your empty website. Then add web forms.

For Web Form

AddDynamicTextBox (your empty website). Right-click and select Add New Item, then Web Form. Name it AddDynamicTextBox.aspx.

Design chamber

Step 3

Open AddDynamicTextBox.aspx file and write some code for the design of the application.

First add the jQuery plugin to your head section. Here I have used jquery-1.10.2.js plugin for demonstration purposes.

How to add in your page

  1. <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
Write some script for add or remove as in the following:
  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3. $('#add').click(function () {
  4. var table = $(this).closest('table');
  5. console.log(table.find('input:text').length);
  6. if (table.find('input:text').length < 50) {
  7. var x = $(this).closest('tr').nextAll('tr');
  8. $.each(x, function (i, val) {
  9. val.remove();
  10. });
  11. table.append('<tr><td style="width:200px;" align="right">First Name <td> <input type="text" id="current Name" value="" /> </td><td style="width:200px;" align="right">Last Name <td> <input type="text" id="current Name" value="" /> </td></tr>');
  12. $.each(x, function (i, val) {
  13. table.append(val);
  14. });
  15. }
  16. });
  17. $('#del').click(function () {
  18. var table = $(this).closest('table');
  19. if (table.find('input:text').length > 1) {
  20. table.find('input:text').last().closest('tr').remove();
  21. }
  22. });
  23. });
  24. </script>
Add HTML on your page and your page will look like the following:
  1. <div>
  2. <table border="0" cellspacing="2">
  3. <tr>
  4. <td style="width: 200px;" align="right">Name
  5. <td>
  6. <input type="text" id="Job Name" value="" />
  7. </td>
  8. </td>
  9. </tr>
  10. <tr>
  11. <td align="right">Versions</td>
  12. <td>
  13. <select id="version" style="width: 350px;">
  14. <option value="">SELECT</option>
  15. </select>
  16. </td>
  17. </tr>
  18. <tr>
  19. <td align="right">Test Scripts</td>
  20. <td>
  21. <select id="testscripts" style="width: 350px;"></select>
  22. </td>
  23. </tr>
  24. <tr>
  25. <td align="right">datas</td>
  26. <td>
  27. <input type="button" id="add" value="Add" />
  28. <input type="button" id="del" value="Del" />
  29. </td>
  30. </tr>
  31. <tr>
  32. <td style="height: 3px" colspan="2"></td>
  33. </tr>
  37. </table>
  38. </div>
Now your code looks as in the following:

design

Now your page looks as in the following.

AddDynamicTextBox.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddDynamicTextBox.aspx.cs" Inherits="AddDynamicTextBox" %>
  3. <!DOCTYPE html>
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <title>C# corner article</title>
  8. <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  9. <script type="text/javascript">
  10. $(document).ready(function () {
  11. $('#add').click(function () {
  12. var table = $(this).closest('table');
  13. console.log(table.find('input:text').length);
  14. if (table.find('input:text').length < 50) {
  15. var x = $(this).closest('tr').nextAll('tr');
  16. $.each(x, function (i, val) {
  17. val.remove();
  18. });
  19. table.append('<tr><td style="width:200px;" align="right">First Name <td> <input type="text" id="current Name" value="" /> </td><td style="width:200px;" align="right">Last Name <td> <input type="text" id="current Name" value="" /> </td></tr>');
  20. $.each(x, function (i, val) {
  21. table.append(val);
  22. });
  23. }
  24. });
  25. $('#del').click(function () {
  26. var table = $(this).closest('table');
  27. if (table.find('input:text').length > 1) {
  28. table.find('input:text').last().closest('tr').remove();
  29. }
  30. });
  31. });
  32. </script>
  33. </head>
  34. <body>
  35. <form id="form1" runat="server">
  36. <div>
  37. <table border="0" cellspacing="2">
  38. <tr>
  39. <td style="width: 200px;" align="right">Name
  40. <td>
  41. <input type="text" id="Job Name" value="" />
  42. </td>
  43. </td>
  44. </tr>
  45. <tr>
  46. <td align="right">Versions</td>
  47. <td>
  48. <select id="version" style="width: 350px;">
  49. <option value="">SELECT</option>
  50. </select>
  51. </td>
  52. </tr>
  53. <tr>
  54. <td align="right">Test Scripts</td>
  55. <td>
  56. <select id="testscripts" style="width: 350px;"></select>
  57. </td>
  58. </tr>
  59. <tr>
  60. <td align="right">datas</td>
  61. <td>
  62. <input type="button" id="add" value="Add" />
  63. <input type="button" id="del" value="Del" />
  64. </td>
  65. </tr>
  66. <tr>
  67. <td style="height: 3px" colspan="2"></td>
  68. </tr>
  72. </table>
  73. </div>
  74. </form>
  75. </body>
  76. </html>
In the code behind page, there is no need to write something here because I've provided everything from the front end.

AddDynamicTextBox.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;
  8. public partial class AddDynamicTextBox : System.Web.UI.Page
  9. {
  10. protected void Page_Load(object sender, EventArgs e)
  11. {
  13. }
  14. }
Output

Here's a screenshot showing the interface before adding the TextBox.

Before creating textbox
Figure 1

Here's a screenshot showing the interface after adding the TextBox.

After creating
Figure 2

add text box
Figure 3

textbox
Figure 4

I hope you liked this. Have a good day. Thank you for reading.