Getting data from form asp.net core

Question

I am beginner in asp.net core. I got problem with getting data from view form. I want to create "Word" object depends on data from dynamically generated divs => inputs with class names "RussianTranslation" and "English Translation" and after fill List Words using created words. There is no problem with getting data as "Title" or "Level", problem only in getting list of words. And after send this modeol to database. I dont know how to parse these dynamically generated divs. I hope you understand my problem and you will help me :)

There are my files:

There is a class from 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>();

    }
}

Class Word:

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

And view with form :

    <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>

And also my js file:

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 I am bad in frontend dev don't be angry for my script-code or for my html-code ;)

Answer 1

You are craeting HTML elements by yourself, so that's should be easy:

assign to each element unique id attribute, like

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

Then you it is sent as form data in HTML request, so you can define your controller appripoiately (using Bind parameter attribute or defining approprite method signature).

Answer 2

Modify the name attribute of RussianTranslation and EnglishTranslation like below :

 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";

    ...
}

Result: