Passing dynamically generated textbox values to controller in ASP.NET MVC

Question

I have some form in which I want to automatically generate new textbox on + button click and then I want to submit it to CandidateRegister action method in Candidates controller.

@model SourceTreeITMatchmaking.Models.CandidateRegisterViewModel

Candidates View

@using (Html.BeginForm("CandidateRegister", "Candidates"))
{
     <div id="myTechnologies">
             <div class="row">
                   <div class="col-sm-6" style="padding-left: 0;">
                       @Html.TextBoxFor(m => m.SelectedMyTechnologies.Technology, new {@class="form-control", placeholder="C#, Java, Sql Server..."})
                    </div>
              </div>
        </div>
        <hr class="mt60">
        <div class="clearfix">
                 <input type="submit" class="btn btn-default btn-large pull-right" value="Register candidate!">
        </div>
}

jQuery function to add new Textbox on (+) button click

$("#add-technology-candidate").click(function () {
    var firstDiv = $(' <div class="row"> <div class="col-sm-6" style="padding-left: 0;"> ' +
        ' <input type="text" class="form-control" placeholder="C#, Java, Sql Server..." /> </div>');
    $("#myTechnologies").append(firstDiv.append(deleteButton));
});

One propery of my CandidateRegisterViewModel which I use for strongly typed model

public class CandidateRegisterViewModel
{
    public SelectedMyTechnologies SelectedMyTechnologies { get; set; }
}

/Property that I use in CandidateRegisterViewModel/

public class SelectedMyTechnologies
{
        public List<string> Technology { get; set; }
}

Long story short-> I want to generate textbox on (#add-technology-candidate) button click and then pass user entered data as a list to my controller. As my code is right now, I can only pass data from first textbox (not dynamically generated one). How should I change jQuery method to support both types?

Thanks in advance.

score 3 · Accepted Answer · edited May 23 '17 at 12:15

3

Since your property is List<string> you can just give the dynamically created textboxes a name attribute matching the property

 <input type="text" name="SelectedMyTechnologies.Technology" ... />

Note this will only work for collections of string or value types. For collections of complex objects, you need to include indexers as per this answer

edited May 23 '17 at 12:15

Community

1
1

answered Oct 03 '15 at 09:41

Thanks. I don't get the whole idea though. If I had a view model with string and SelectList properties instead of single list in SelectedMyTechnologies how would it look then? How does indexer work for this specified case? – Sheil Oct 03 '15 at 09:52
1

Did you even look at the link I gave you? At the moment your dynamically creating inputs without a `name` attribute so they do not post back. For collections of simple types, the `DefaultModelBinder` will bind (say) List Address` if you have multiple inputs with ``. But if your property was say `List
` where `Address` contains properties then you would need ``, `` etc.
– Oct 03 '15 at 09:59
Yes of course I saw the link You gave me, sorry for trouble. Now I understand completely :) Thanks – Sheil Oct 03 '15 at 11:05

Passing dynamically generated textbox values to controller in ASP.NET MVC

1 Answers1