Visual Studio How To dynamically Add or Remove TextBoxes using JQuery

Visual Studio How To dynamically Add or Remove TextBoxes using JQuery 

Step one: add aspx page


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Dynaically Add or Remove Text Boxes</title>
</head>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var values = eval('<%=Values%>');
    if (values != null) {
        var html = "";
        $(values).each(function () {
            var div = $("<div />");
            div.html(GetDynamicTextBox(this));
            $("#TextBoxContainer").append(div);
        });
    }
    $("#btnAdd").bind("click", function () {
        var div = $("<div />");
        div.html(GetDynamicTextBox(""));
        $("#TextBoxContainer").append(div);
    });
    $("body").on("click", ".remove", function () {
        $(this).closest("div").remove();
    });
});
    function GetDynamicTextBox(value) {
        return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />&nbsp;' +
            '<input type="button" value="Remove" class="remove" />'
    }
</script>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>
                Dynaically Add or Remove Text Boxes
            </h1>
            <input id="btnAdd" type="button" value="add" onclick="AddTextBox()" />
<br />
<br />
<div id="TextBoxContainer">
   
</div>
<br />
<asp:Button ID="btnPost" runat="server" Text="Post" OnClick="Post" />
        </div>
    </form>
</body>
</html>

Step Two: add asp.cs page

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Script.Serialization;

namespace QuizAppTestPhase
{
    public partial class Test : System.Web.UI.Page
    {
        protected string Values;
        protected void Post(object sender, EventArgs e)
        {
            string[] textboxValues = Request.Form.GetValues("DynamicTextBox");
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            this.Values = serializer.Serialize(textboxValues);
            string message = "";
            foreach (string textboxValue in textboxValues)
            {
                message += textboxValue + "\\n";
            }
            ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('" + message + "');", true);
        }
    }
}

OutPut:
By Hafiz Muhammad Umar Hayat














Comments

Post a Comment