如何将按钮单击时由javascript生成的多对值字段绑定到单个模型属性中

Question

我正在处理 asp .net 核心应用程序中的表单。

我正在尝试成对收集值列表，这意味着当用户单击按钮时会生成两个字段，用户将填写这两个值并提交。 用户可以单击同一个按钮并生成另外两个字段，并根据需要也填写这些字段。 上述功能如下所示。

function add_fields() {
  document.getElementById('wrapper').innerHTML += '<br/><br/>'+'value 1 : <input type="text" style="width:48px;" name="width[]" value="" /> <br/>'+
        'value 2: <input type="text" style="width:48px;" name="width[]" value="" />'+'<br/><br/>'
}

<div id="room_fileds">
    <div class="content" id="wrapper"> 
       value 1 : <input type="text" style="width:48px;" name="width[]" value="" /> <br/>
        value 2: <input type="text" style="width:48px;" name="width[]" value="" /><br/>
    </div>
    <br/>
    <input type="button" id="more_fields" onclick="add_fields();" value="Add More" />
</div>

目标是以某种方式绑定它并创建一个JObject并将其保存为数据库中的字符串。

我可以将它转换为 JObject 并存储它，但我需要将它放入一个变量 List 中，我将在该变量 List 上进行迭代并将其转换为 JObject。

我不确定要在模型中保留什么。目前我已将其归档如下。

public class TestBind
{
    public List<subnets> pairvalues { get; set; }
}
public class subnets
{
    public string value1 { get; set; }
    public string value2 { get; set; }
}

我认为它会以这种方式工作，但我不确定。

请给我一些关于如何实现它的想法。提前致谢。每次尝试都值得赞赏。

Answer 1

需要修改Input标签中的名称来绑定模型。可以参考下面这个步骤。

在 index.cshtml 中

 <form action="/home/get" method="get">
        <div id="room_fileds">
            <div class="content" id="wrapper">
                value 1 : <input type="text" style="width:48px;" name="pairvalues[0].value1" value="" /> <br />
                value 2: <input type="text" style="width:48px;" name="pairvalues[0].value2" value="" /><br />
            </div>
            <br />
            <input type="button" id="more_fields" onclick="add_fields();" value="Add More" />
        </div>
        <input type="submit" name="name" value="sub" />
    </form>
@section Scripts{ 
    <script>
        var i=1
        function add_fields() {
            document.getElementById('wrapper').innerHTML += '<br/><br/>' + 'value 1 : <input type="text" style="width:48px;" name="pairvalues[' + i +'].value1" value="" /> <br/>' +
                'value 2: <input type="text" style="width:48px;" name="pairvalues[' + i +'].value2" value="" />' + '<br/><br/>'
            i++
        }
    </script>
}

这里是动作。

public class HomeController : Controller
    {
       public IActionResult get(TestBind testBind)
        {
            return Json(testBind);
        }
}

然后，它将从该表单中获取数据。