Динамическое добавление полей MVC
У меня есть форма, где я хочу разместить данные для сохранения в моей базе данных. Пользователь должен иметь возможность добавлять поля вручную, если он хочет добавить больше компетенций, он может нажать на кнопку mAddCompetence, когда пользователь нажимает на эту кнопку, будет 3 дополнительных поля ввода. Мой код для этой формы:
<fieldset>
<!-- Competenties -->
<legend>Competenties</legend>
<div id="competenceListAdd" class="form-group">
<div id="competenceFormCloneMe">
<div class="col-md-4">
@Html.DropDownListFor(model => model.Competence,
new SelectList(Model.Competences, "CompetenceId", "Name"), new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Competence)
</div>
<div class="col-md-4">
@Html.TextBoxFor(m => m.ModuleHasCompetence.Description, new { @class = "form-control", @placeholder = "Omschrijving van competentie" })
@Html.ValidationMessageFor(m => m.ModuleHasCompetence.Description)
</div>
<div class="col-md-4">
@Html.DropDownListFor(m => m.ModuleHasCompetence.Difficulty, new SelectList(Enum.GetValues(typeof(WatervalDomain.ModuleHasCompetence.DifficultyEnum))), new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.ModuleHasCompetence.Difficulty)
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<button id="mAddCompetence" name="mAddCompetence" type="button" class="btn btn-danger pull-right">Add competence</button>
</div>
</div>
<script>
$('#mAddCompetence').click(function () {
$('#competenceListAdd').append('</br></br>'); +
$('#competenceListAdd').append($('#competenceFormCloneMe').clone());
});
</script>
</fieldset>
В HTML это
<fieldset>
<!-- Competenties -->
<legend>Competenties</legend>
<div id="competenceListAdd" class="form-group">
<div id="competenceFormCloneMe">
<div class="col-md-4">
<select class="form-control" data-val="true" data-val-number="The field Competence must be a number." data-val-required="Het veld Competence is vereist." id="Competence" name="Competence">
<option value="1">option1</option>
<option value="2">option1.</option>
</select>
<span class="field-validation-valid" data-valmsg-for="Competence" data-valmsg-replace="true"></span>
</div>
<div class="col-md-4">
<input class="form-control" data-val="true" data-val-required="required" id="ModuleHasCompetence_Description" name="ModuleHasCompetence.Description" <span class="field-validation-valid" data-valmsg-for="ModuleHasCompetence.Description" data-valmsg-replace="true"></span>
</div>
<div class="col-md-4">
<select class="form-control" data-val="true" data-val-required="required" id="ModuleHasCompetence_Difficulty" name="ModuleHasCompetence.Difficulty">
<option>Beginner</option>
<option>Novice</option>
<option>Expert</option>
</select>
<span class="field-validation-valid" data-valmsg-for="ModuleHasCompetence.Difficulty" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<button id="mAddCompetence" name="mAddCompetence" type="button" class="btn btn-danger pull-right">Voeg Competentie Toe</button>
</div>
</div>
<script>
$('#mAddCompetence').click(function () {
$('#competenceListAdd').append('</br></br>'); +
$('#competenceListAdd').append($('#competenceFormCloneMe').clone());
});
</script>
</fieldset>
Скрипка Но как я могу обработать данные поста?, если я не знаю количество полей ввода, потому что они добавляются динамически.