javascript - 如何将按钮单击时由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 中，我将在该变量列表上进行迭代并将其转换为 JObject。

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

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

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

请就如何实现它提出一些想法。提前致谢。每一次尝试都值得赞赏。

标签： javascriptc#asp.net-corerazor

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);
        }
}

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