Получение данных из формы asp. net core

Question

Я новичок в asp. net ядре. У меня проблема с получением данных из формы просмотра. Я хочу, чтобы «Word» объект зависел от данных из динамически генерируемых входов divs => с именами классов «RussianTranslation» и «Engli sh Translation» и после заполнения List Words с использованием созданных слов. Нет проблем с получением данных как «Заголовок» или «Уровень», проблема только в получении списка слов. И после отправьте этот модеол в базу данных. Я не знаю, как разобрать эти динамически сгенерированные div. Я надеюсь, что вы понимаете мою проблему, и вы мне поможете:)

Есть мои файлы:

Есть класс от ViewModels "CreateModel":

public class CreateModel
{
    [Required]
    public string Title { get; set; }

    [Required]
    public string Level { get; set; }

    [Required]
    public DateTime Date { get; set; }

    public List<Word> Words { get; set; }

    public CreateModel()
    {
        Words = new List<Word>();

    }
}

Класс Слово:

 public class Word
 {
    [Key]
    public int WordId { get; set; }
    public string RussianTranslation { get; set; }
    public string EnglishTranslation { get; set; }
 }

И просмотр с формой:

    <form id="my-form" name="my-form" method="post" asp-controller="CreateTest" asp-action="Create">
                <div class="form-group row">
                    <label asp-for="Title" class="col-md-4 col-form-label text-md-right">Title</label>
                    <div class="col-md-6">
                        <input asp-for="Title" type="text" id="first_name" class="form-control" name="Title">
                    </div>
                </div>

                <div class="form-group row">
                    <label asp-for="Level" class="col-md-4 col-form-label text-md-right">Level</label>
                    <div class="col-md-6">
                        <input asp-for="Level" type="text" id="last_name" class="form-control" name="Level">
                    </div>
                </div>


                <div class="col-md-6 offset-md-4">
                    <button type="submit" class="btn btn-primary">
                        Create
                    </button>
                </div>


                <br />
                <div class="col-md-6 offset-md-4">
                    <button type="button" onclick="AddWord()" class="btn btn-primary">
                        Add New Word
                    </button>
                    <button id="delete" type="button" onclick="DeleteWord()" class="btn btn-danger">
                        Delete Word
                    </button>
                </div>

                <br />
                <div name="Words"  id="last">

                </div>

            </form>

А также мой js файл:

function AddWord() {

var div = document.createElement("div");
div.className = "form-group row container-fluid justify-content-xl-between";


var label1 = document.createElement("label");
label1.innerText = "Russian:"
label1.className = "col-md-4 col-form-label text-md-right";
label1.setAttribute("asp-for", "RussianTranslation");

var label2 = document.createElement("label");
label2.innerText = "English:"
label2.className = "col-md-4 col-form-label text-md-right";
label2.setAttribute("asp-for", "EnglishTranslation");

var input_div1 = document.createElement("div");
input_div1.className = "col-md-6";

var input_div2 = document.createElement("div");
input_div2.className = "col-md-6";

var inner_div1 = document.createElement("div");
inner_div1.className = "col-md-6";

var inner_div2 = document.createElement("div");
inner_div2.className = "col-md-6";

var input1 = document.createElement("input");
input1.type = "text";
input1.setAttribute("asp-for", "RussianTranslation");
input1.name = "RussianTranslation";

var input2 = document.createElement("input");
input2.type = "text";
input2.setAttribute("asp-for", "EnglishTranslation");
input2.name = "EnglishTranslation";

var extra = document.createElement("div");
extra.className = "col-md-6";


input_div1.appendChild(input1);
input_div2.appendChild(input2);

inner_div1.appendChild(label1);
inner_div1.appendChild(input1);
inner_div2.appendChild(label2);
inner_div2.appendChild(input2);


div.appendChild(inner_div1);
div.appendChild(inner_div2);

document.getElementById("last").appendChild(div);

}

PS Я плохо в веб-разработки не сердись на мой скрипт-код или на мой html -код;)

Answer 1

Измените атрибут name для RussianTranslation и EnglishTranslation, как показано ниже:

 function AddWord() {

    // Find out how many child elements a <div> element has:
    var i=document.getElementById("last").childElementCount;

    ...

    var input1 = document.createElement("input");
    input1.type = "text";
    input1.setAttribute("asp-for", "RussianTranslation");
    input1.name = "Words["+i+"].RussianTranslation";

    var input2 = document.createElement("input");
    input2.type = "text";
    input2.setAttribute("asp-for", "EnglishTranslation");
    input2.name = "Words["+i+"].EnglishTranslation";

    ...
}

Результат:

Answer 2

Вы создаете HTML элементы самостоятельно, так что это должно быть легко:

присваивайте каждому элементу уникальный атрибут id, например

var input_div2 = document.createElement("div");
input_div2.className = "col-md-6";
input_div2.id = "divEnglishTranslation";

Затем вам отправляется как данные формы в запросе HTML, так что вы можете определить свой контроллер соответствующим образом (используя атрибут параметра Bind или определив подходящую сигнатуру метода).