Question

This has me completely stumped so I figured I would ask around and see if there is a solution to this!

I have a ticketing system that I am currently working on and one of the fields is “Primary Contact” — Code below;

<tr>
    <td>
        @Html.Label("Client Contact:")
    </td>
    <td>
        @Html.TextBoxFor(model => model.PrimaryContact, new { placeholder = "Primary contact for this ticket." })
        <br />
        @Html.ValidationMessageFor(model => model.PrimaryContact)
    </td>
</tr>

I had a user request a feature; the ability to have say a “+” button where they can click and it adds another field (I will accomplish this through javascript.) However, I need the fields that are created by the javascript to be bound to Model.PrimaryContact.. So essentially when the user adds another textbox for another contact it will then make the value of “Model.PrimaryContact” say something like the following:

Billy Joe 918-555-5556,Bobby Jane 876-222-3334

Then when this gets posted to the controller I can simply insert that into the database.

I am not too sure how this would be accomplished however I believe I’ll need some sort of custom model binder that is comma delimited?

Any help would be greatly appreciated!

Answer 1

Change “model.PrimaryContacts” to the list of strings List<string> and render:

    <input type="text" id="PrimaryContacts[0]" name="PrimaryContacts[0]" value="" />
    <input type="text" id="PrimaryContacts[1]" name="PrimaryContacts[1]" value="" />
    <input type="text" id="PrimaryContacts[2]" name="PrimaryContacts[2]" value="" />
    <input type="text" id="PrimaryContacts[3]" name="PrimaryContacts[3]" value="" />

It’s important that “name” attribute is same on each field (id doesn’t matter), and they will automatically bind into array or collection.

Update:

if we assume that PrimaryContact is object with FirstName, LastName and PhoneNumber properties, then we would need to render following markup on the page:

    <!-- 1st person -->
    <input type="text" id="[0].FirstName" name="[0].FirstName" value="" />
    <input type="text" id="[0].LastName" name="[0].LastName" value="" />
    <input type="text" id="[0].PhoneNumber" name="[0].PhoneNumber" value="" />
    <!-- 2nd person -->
    <input type="text" id="[1].FirstName" name="[1].FirstName" value="" />
    <input type="text" id="[1].LastName" name="[1].LastName" value="" />
    <input type="text" id="[1].PhoneNumber" name="[1].PhoneNumber" value="" />

Above would bind to List<PrimaryContact> objects.

Update 2:

Last but not least, to bind to the Dictionary<string, PrimaryContact> you do this:

<!-- 1st person -->
<input type="hidden" id="[0].Key" name="[0].Key" value="1stPersonKey" />
<input type="text" id="[0].FirstName" name="[0].Value.FirstName" value="" />
<input type="text" id="[0].LastName" name="[0].Value.LastName" value="" />
<input type="text" id="[0].PhoneNumber" name="[0].Value.PhoneNumber" value="" />
<!-- 2nd person -->
<input type="hidden" id="[1].Key" name="[1].Key" value="2ndPersonKey" />
<input type="text" id="[1].FirstName" name="[1].Value.FirstName" value="" />
<input type="text" id="[1].LastName" name="[1].Value.LastName" value="" />
<input type="text" id="[1].PhoneNumber" name="[1].Value.PhoneNumber" value="" />

Hope this helps a bit