Не удается получить данные из элементов управления, которые генерируются динамически с использованием jQuery

Question

Может кто-нибудь помочь мне здесь?Спасибо!

В моем предыдущем посте я спрашивал, как добавить функцию onclick для вставки textarea элемента управления .

Проблема, с которой я столкнулся, заключается в том, чтопосле добавления нового элемента управления, заполнения данных и нажатия кнопки «Сохранить» он не получает данные от элементов управления, которые были сгенерированы динамически.

@model ModuleTemplate

<button type="button" id="btnAddResource">Add Resource</button>
        <br />
        <div id="resourcesContainer" class="form-group">
            @if (Model.Resource != null && Model.Resource.Resources != null && Model.Resource.Resources.Count() > 0)
            {
                //@Html.LabelFor(model => model.Resource.Resources, htmlAttributes: new { @class = "control-label col-md-2" })
                @Html.Label("Enter Resource Text and appropriate URL (if needed):", htmlAttributes: new { @class = "control-label col-md-2" })
                for (var i = 0; i < Model.Resource.Resources.Count(); i++)
                {
                    <div class="col-md-10">
                        @Html.TextAreaFor(model => model.Resource.Resources[i].Text, new { htmlAttributes = new { @class = "form-control", @cols = 80, @rows = 50 } })
                        @Html.TextAreaFor(model => model.Resource.Resources[i].Uri, new { htmlAttributes = new { @class = "form-control", @cols = 80, @rows = 50 } })
                    </div>
                }
            }
        </div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#btnAddResource').on('click', function () {
            var container = $('#resourcesContainer');
            var index = container.children('div').length
            var resourceText = $('<textarea>', { name: "Resources.Resources[" + index + "].Text" });
            var resourceUri = $('<textarea>', { name: "Resources.Resources[" + index + "].Uri" });
            container.append($('<div>', { class: "col-md-10" }).append(resourceText).append(resourceUri));
        })
});
</script>

Контроллер:

[HttpPost]
        public ActionResult EditModule(ModuleTemplate moduleTemplate)
        {
            if (ModelState.IsValid)
            {
                var newModuleTemplate = _moduleTemplateService.UpdateModuleInfo(moduleTemplate, this.User);
                return RedirectToAction("Details", new { moduleTemplateId = moduleTemplate.ModuleTemplateId });
            }
            else
                return View(moduleTemplate);
        }

Вот так это выглядит, когда страница загружается и после добавления новых элементов управления.Я не получаю данные для 'Resources.Resources [1] .Text' и 'Resources.Resources [1] .Uri', которые генерируются динамически при сохранении формы.

 <div class="col-md-10">
   <textarea name="Resource.Resources[0].Text" class="valid" id="Resource_Resources_0__Text" aria-invalid="false" rows="2" cols="20" htmlattributes="{ class = form-control, cols = 80, rows = 50 }">Utilize current alerts and reports in Webfocus</textarea>
    <textarea name="Resource.Resources[0].Uri" id="Resource_Resources_0__Uri" rows="2" cols="20" htmlattributes="{ class = form-control, cols = 80, rows = 50 }"></textarea>
   </div>
<div class="col-md-10">
    <textarea name="Resources.Resources[1].Text" class="valid" aria-invalid="false">Dynamically created control</textarea>
    <textarea name="Resources.Resources[1].Uri" class="valid" aria-invalid="false">Dynamically created control</textarea>
 </div>