Click here to Skip to main content
15,844,477 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Hi Team,

How to add, remove the dynamic textbox in button click asp.net c#.

Kindly give the solution for How to add, remove the dynamic textbox in button click asp.net c#
Posted
Comments
Thanks7872 3-Dec-14 6:32am    
What have you tried? Where is the code you have tried so far? If you have not started anything,better use Javascript for such tasks.
Sinisa Hajnal 3-Dec-14 6:33am    
Kindly show some code and describe better what you need. In general, server-side you simply create the control and add it to Controls collection (same for removing it). Client side, you use javascript / jQuery and it is not important that it as ASP.NET

1 solution

You can simply use knockout.js with HTML.

Include below files to your libs directory.

jquery-2.1.1.min
knockout-3.2.0

Now your HTML(or aspx page)

employeePhone.html

HTML
<html>
<head>
<script src="libs/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="libs/knockout-3.2.0.js" type="text/javascript"></script>
<script src="PhoneModal.js" type="text/javascript"></script>
<script src="PhoneViewModal.js" type="text/javascript"></script>


<script type="text/javascript">

$(document).ready(function(){

ko.applyBindings(new PhoneViewModel()); 

});
</script>

</head>
<body>
<form id="employeeForm" name="employeeForm" method="POST">
    <script id="PhoneTemplate" type="text/html">
        <div>
            <span>
                <label>Country Code:</label>
                <input type="text" id="txtCountryCode" data-bind="value:CountryCode" />
            </span>
            <span>
                <label>Phone Number:</label>
                <input type="text" id="txtPhoneNumber" data-bind="value:PhoneNumber" />
            </span>
            <input type="button" id="btnRemove">
              value="Remove" data-bind="click: $parent.remove" />
        </input></div>
    </script>
    <div>
        <h2>Employee Phone Number</h2>
        <div data-bind="template:{name:'PhoneTemplate', foreach:PhoneList}">
        </div>
        <div>
            <input type="button" id="btnAdd">
              value="Add Another" data-bind="click: add" />
        </input></div>
    </div>

</form> 
</body>
</html>


2. PhoneModal.js
JavaScript
function Phone(code, number) {
    var self = this;
    self.CountryCode = ko.observable(code);
    self.PhoneNumber = ko.observable(number);
}


3. PhoneViewModal
JavaScript
function PhoneViewModel() {
    var self = this;
    self.PhoneList = ko.observableArray([new Phone("00", "00-00-00")]);
    self.remove = function () {
        self.PhoneList.remove(this);
    };
    self.add = function () {
        self.PhoneList.push(new Phone("01", "00-00-01"));
    };
} 


I hope this will help you to understand and to create your reuirement.
 
Share this answer
 
Comments
Praveen Kumar Upadhyay 4-Dec-14 2:32am    
Thank you very much for accepting the solution. Also knockout.js is very heavily featured library, you can use it for better user experience.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900