從表單asp.net核心獲取數據

Question

我是asp.net核心的初學者。 我在從視圖表單獲取數據時遇到問題。 我想創建“Word”對象取決於來自動態生成的 div => 輸入的數據，類名是“RussianTranslation”和“English 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

您自己創建 HTML 元素，所以這應該很容易：

分配給每個元素唯一的id屬性，比如

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

然后您將它作為 HTML 請求中的表單數據發送，因此您可以適當地定義您的控制器（使用Bind參數屬性或定義適當的方法簽名）。

Answer 2

修改RussianTranslation和EnglishTranslation的name屬性如下：

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

    ...
}

結果：