Add textboxes dynamically in ASP.NET MVC

Question

I work on an ASP.NET MVC project that I need some help with. I need to be able to create x number of textboxes when the user click "add textbox". When the user enter the page a viewmodel is loaded. This viewmodel need to handle the x number of textboxes that the user create when he is on the page so that when the page is posted these textboxes are part of the model. The model should look something like this..

public class PlanViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public List<EventViewModel> EventList { get; set; } // this should be the list of textboxes that the user "create" by clicking add new
}

public class EventViewModel
{
    public string Name { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public string Description { get; set; }
}

I'm kinda lost on how to do this so any help is appreciated.

UPDATE

I've added this javascript that add textboxes client side..

<script type="text/javascript">
function GetDynamicTextBox(value) {
    return('<input type="text" name="events[0].Key" value="box1" /><input type="text" name="events[0].Value.StartDate" value="box2"/><button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>');
}
function AddTextBox() {
    var div = document.createElement('DIV');
    div.innerHTML = GetDynamicTextBox("");
    document.getElementById("divcontent").appendChild(div);
}
function RemoveTextBox(div) {
    document.getElementById("divcontent").removeChild(div.parentNode);
}
</script>

            <div id="divcontent" class="form-group">
            <button type="button" class="btn btn-sm btn-primary" onclick="AddTextBox()"><i class="fa fa-angle-right"></i> Add</button>
        </div>

I think I only need to add unique id's for the textboxes like this...

events[0].Key
events[1].Key
events[2].Key

and so on..

But I don't know how. Anyone knows?

Hi Martin, that should work. Now I need to generate the textboxes by javascript I guess..? — MTplus
– MTplus, Commented Jan 14, 2020 at 8:57
You need to generate the fields in Razor view, please see my answer. — Martin Staufcik
– Martin Staufcik, Commented Jan 14, 2020 at 9:27
You need to use JavaScript to make it work on client-side. Either you could post your form on server and then re-display form, adding additional field. — Aleksej Vasinov
– Aleksej Vasinov, Commented Jan 14, 2020 at 9:31

Steven Lemmens · Accepted Answer · 2020-01-14 08:19:32Z

2

You can add a list of String, like this

public String[] MyTextFields

and then create HTML using Javascript, like this:

<input name="myTextFields[0]"></input>

<input name="myTextFields[1]"></input>

answered Jan 14, 2020 at 8:19

Steven Lemmens

7305 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Martin Staufcik · Accepted Answer · 2020-01-14 14:24:57Z

0

In Razor view:

@for (var i = 0; i < Model.EventList.Count; i++)
{
    @Html.EditorFor(x => Model.EventList[i].Name)
}

To set the name attribute of all edited elements in javascript, this is to be called on page load, and any time the collection changes (item is added or removed):

var children = document.getElementById("myDIV").children; // TODO: here supposing children are the input elements, may be different on your page (they may be nested in a different way)
for (i = 0; i < children.length; i++)
{
    var el = children[i];
    el.name = 'EventList[' + i + '].Name'; // TODO: look into source code of the generated page for the actual format of existing elements and then modify the mask accordingly
    el.id = 'EventList[' + i + '].Name';
}

edited Jan 14, 2020 at 14:24

answered Jan 14, 2020 at 9:18

Martin Staufcik

9,6728 gold badges57 silver badges77 bronze badges

6 Comments

MTplus Over a year ago

Yes this works for the ones allready in the model, but the user need to be able to add x number of "extra" textboxes when on the page.

Martin Staufcik Over a year ago

Ok, then you need to add the new one in javascript and set its name according to the syntax (using indexer variable i).

MTplus Over a year ago

I've updated my post with the javascript I have right now that add textboxes, but I need to make the names unique, so if someone has an idea of that I appreciate it

Martin Staufcik Over a year ago

After adding (or removing) the new item to DOM you could iterate in DOM over all the items and update their name attributes.

MTplus Over a year ago

Hi Martin, could you maybe show me how to do that in javascript. I'm not that familiar with it to make that change....

|

Aleksej Vasinov · Accepted Answer · 2020-01-14 12:05:45Z

If it is ok to have JS dependency than I suggest to use light Knockout library. It will help you to create/edit/delete your inputs. Check example in JS fiddle.

Use HTML to adjust your view. Tag data-bind lets you to bind to data and events

<button data-bind="click: addInput">Add</button>
<div data-bind="foreach: inputs">
  <input data-bind="value: text"/><br />
</div>
<button data-bind="click: proceed">Proceed</button>
<!-- Use Knockout JS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>

Then small JS script which handles adding new input and processing data on click.

function InputData(text) {
  let self = this;
  self.text = text;
}
function InputViewModel() {
  let self = this;
  // Your array of HTML inputs
  self.inputs = ko.observableArray([new InputData("Default value")]);
  self.output = ko.observable();
  self.addInput = function() {
    // Dynamically adds new input on user click button "Add"
    self.inputs.push(new InputData(""));
  };
  self.proceed = function() {
    // Process all input with their values
    for (var i = 0; i < self.inputs().length; i++) {
        console.log(self.inputs()[i].text);
    }

  }
}
// Bind our JS to HTML view
ko.applyBindings(new InputViewModel());

Collectives™ on Stack Overflow

Add textboxes dynamically in ASP.NET MVC

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related