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.

Community · Accepted Answer · 2017-05-23 12:15:53Z

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, 2017 at 12:15

CommunityBot

11 silver badge

answered Oct 3, 2015 at 9:41

user3559349

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

3 Comments

Sheil Over a year ago

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?

user3559349 Over a year ago

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<string> Address` if you have multiple inputs with <input name="Address" />. But if your property was say List<Address> where Address contains properties then you would need <input name="[0]Address.Street" />, <input name="[1]Address.Street" /> etc.

Sheil Over a year ago

Yes of course I saw the link You gave me, sorry for trouble. Now I understand completely :) Thanks

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related