动态添加字段mvc

Question

我有一个表单，我想发布数据以保存在我的数据库中。如果用户想要添加更多可以点击按钮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>

FIDDLE 但是我如何处理发布数据呢？ ，如果我不知道输入字段的数量，因为它们是动态添加的。