在 Razor 页面中动态添加和删除列表项控件答案

【问题标题】：Add and remove list items controls dynamically in Razor pages在 Razor 页面中动态添加和删除列表项控件
【发布时间】：2020-10-05 18:47:45
【问题描述】：

我使用 Razor 页面，在我的页面模型中我有空列表。我需要由用户填写。而且我不知道会有多少项目。目前我正在使用 post 方法向我的页面添加输入，如下所示：

     public async Task OnPostAddLicence()
        {
            await SetDials();
            LicenceList.Add(new Licence());
        }

        public async Task OnPostRemoveLicence(int index)
        {
            await SetDials();
            ModelState.Clear();
            LicenceList.RemoveAt(index);
        }

这种方法的问题是它会重新加载页面并滚动到页面的顶部。不幸的是，我没有找到任何方法来回滚我所在的位置。并且因为它的剃须刀页面保持滚动位置不起作用。

所以我想用 javascript 动态添加这些项目。我试过用这个：

<div id="divCont">
        <div>
            <input type="text" class="form-control" asp-for="Salaries[0].HoursWorked" placeholder="Odpracovaných hodin">
            <input type="button" onclick="AddTextBox()" value="Add" />
        </div>
    </div>

<script type="text/javascript">
        function GetDynamicTextbox(value) {
            return '<div><input type="text" name="txttest" style="width:200px;" asp-for="Salaries[0].HoursWorked" /><input type="button" onclick="RemoveTextBox(this)" value="Remove" /></div>';
        }
        function AddTextBox() {
            var div = document.createElement('DIV');
            div.innerHTML = GetDynamicTextbox("");
            document.getElementById("divCont").appendChild(div);
        }
        function RemoveTextBox(div) {
            document.getElementById("divCont").removeChild(div.parentNode.parentNode);
        }

    </script>

但它没有将值绑定到列表。我可以在网上找到的所有其他方法都不适用于剃须刀页面，而只能用于 mvc

【问题讨论】：

标签： javascript list asp.net-core dynamic razor-pages

【解决方案1】：

你的意思是不能绑定数据到input吗

id="Salaries_@(0)__HoursWorked"
name="Salaries[@(0)].HoursWorked"
value=@Salaries[0].HoursWorked

下面是一个例子来展示如何在没有asp-for的情况下绑定数据：

<input type="text" asp-for="@Model.Locations[0].Street" /></td>
<input type="text" id="Locations_0__Street" name="Locations[0].Street" value=@Model.Locations[0].Street />

结果：

这是一个演示绑定的工作演示：页面：

<form method="post">
    <input asp-for="@Model.postdata.data[0].id" class="form-control" />
    <input id="postdata_data_0__name" name="postdata.data[0].name" value="@Model.postdata.data[0].name" class="form-control" />
    <div>
        <input type="submit" value="Save" class="btn btn-primary" />
    </div>
</form>

页面模型：

public class TestModel : PageModel
    {
        [BindProperty]
        public Postdata postdata{ get; set; }
        public IActionResult OnGet()
        {
            List<TestDT> data = new List<TestDT>();
            TestDT testDT = new TestDT { id = 1, name = "test1" };
            TestDT testDT2 = new TestDT { id = 2, name = "test2" };
            data.Add(testDT);
            data.Add(testDT2);
            postdata = new Postdata();
            postdata.data = data;
            return Page();
        }
        public IActionResult OnPost()
        {
            return Page();
        }

    }

结果：

【讨论】：