从表单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";

    ...
}

结果：