pwknoch
1/29/2019 - 10:36 PM

Dynamic List of Edittable Objects for use with .NET

<div class="card applicant-model">
    <div class="applicant-item">
        <input type="hidden" name="ApplicantsModel.Applicants.Index" class="indexVariable" value="0" />
        <div>
            <input name="ApplicantsModel.Applicants[0].FirstName" id="ApplicantsModel.Applicants[0].FirstName" type="text" />
        </div>
    </div>
</div>
<button id="add" type="button" href="#">Add</button>

<script>
    $(function() {
        $('#add').click(function() {
            var item = $('.applicant-model .applicant-item:last-child .indexVariable');
            var highestIndex = parseInt(item.val()) + 1;
            console.log(item);
            console.log(highestIndex);
            var template = 
                '<div class="applicant-item">' +
                    '<input type="hidden" name="ApplicantsModel.Applicants.Index" id="ApplicantsModel.Applicants.Index" class="indexVariable" value="' + highestIndex + '" />' +
                    '<div>' +
                        '<input name="ApplicantsModel.Applicants[' + highestIndex + '].FirstName" id="ApplicantsModel.Applicants[' + highestIndex + '].FirstName" type="text" />' +
                    '</div>' +
                '</div>';
            $('.applicant-model').append(template);
        });
    })
</script>