ASP Core model binding not working after adding some elements by AJAX

Question

I added some html elements (drop-downs) by using AJAX. After that, when I want to bind their inputs to my DTO(CreateSmsPattern) via submitting my form, seems not be bind correctly.

JQuery code:

$.ajax({
    url: '/api/SmsPattern/GetSmsPatternParameterPersianName',
    beforeSend: function (xhr) {
        xhr.setRequestHeader("XSRF-TOKEN",
            $('input:hidden[name="__RequestVerificationToken"]').val());
    },
    contentType: false,
    processData: false,
    type: 'GET',
    success: function (resp) {
        if (resp != null) {
            var options = "";
            var json = JSON.parse(resp);

            options += '<option value="0">انتخاب متغیر...</option>';
            for (var i in json) {
                var subJson = json[i];
                var name = subJson.Name;
                var id = subJson.Id;
                options += '<option value="' + id + '">' + name + '</option>'
            }

            var first = $('#smsPatternParametersList').firstElementChild;
            while (first) {
                first.remove();
                first = e.firstElementChild;
            }

            for (var i = 0; i < count; i++) {
                $('#smsPatternParametersList').append(
                    `<select class="form-control" asp-for="Command.Parameter` + i + `">` + options + `</select>
                     <span asp-validation-for="Command.Parameter` + i + `" class="error"></span>
                    `);
            }
        }
    }
});

My form (count of drop-downs depends on number that user types in input element id=smsPatternParametersCount):

<form method="post">

    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label asp-for="Command.Name" class="control-label">عنوان</label>
                <input type="text" class="form-control" asp-for="Command.Name">
                <span asp-validation-for="Command.Name" class="error"></span>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="form-group">
                <label class="control-label" asp-for="Command.SpecialListId">فهرست ویژه</label>
                <select class="form-control" asp-for="Command.SpecialListId" asp-items='new SelectList(Model.SmsSpecialLists, "Id", "Name")'>
                    <option value="0">انتخاب فهرست ویژه...</option>
                </select>
                <span asp-validation-for="Command.SpecialListId" class="error"></span>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="form-group">
                <label asp-for="Command.ParametersCount" class="control-label">تعداد متغیرها</label>
                <input type="number" id="smsPatternParametersCount" class="form-control" asp-for="Command.ParametersCount" min="1">
                <span asp-validation-for="Command.ParametersCount" class="error"></span>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="form-group no-margin">
                <label asp-for="Command.Message" class="control-label">متن همراه با متغیرها</label>
                <textarea class="form-control" asp-for="Command.Message"
                    style="overflow: hidden; word-wrap: break-word; resize:none" rows="5"></textarea>
                <span asp-validation-for="Command.Message" class="error"></span>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="form-group">
                <label class="control-label">فهرست متغیرها</label>
                <div id="smsPatternParametersList">
                </div>
            </div>
        </div>
    </div>

    <a asp-page="Index" class="btn btn-dark m-b-5">بازگشت</a>
    <button permission="@(int)SmsPermissions.SmsPattern.Create" type="submit" class="btn btn-info">ایجاد</button>
</form>

and back-end screenshot (هیچکدام means 'none'): screenshot

Answer 1

I solved this problem. Just changed below part of jquery code:

                $('#smsPatternParametersList').append(
                    `<select class="form-control" asp-for="Command.Parameter` + i + `">` + options + `</select>
                     <span asp-validation-for="Command.Parameter` + i + `" class="error"></span>
                    `);

to

                        $('#SmsPatternParametersList').append(
                            `<select class="form-control" id="Command_Parameter` + i + `" name="Command.Parameter` + i + `">` + options + `</select>
                             <span data-valmsg-replace="true" data-valmsg-for="Command.Parameter` + i + `" class="error field-validation-valid"></span>
                            `);

Seems when Ajax is fullfilling html, ASP.NET tag helper (ex. 'asp-for' or 'asp-validation-for') is not working at all. Thus, I used native html attributes.