Динамическое добавление и удаление элементов управления элементами списка на страницах Razor - PullRequest
Новая
       10

Динамическое добавление и удаление элементов управления элементами списка на страницах Razor

0 голосов
/ 16 июня 2020

я использую страницы Razor, и в моей модели страницы у меня есть пустой список. Мне нужно, чтобы он был заполнен пользователем. И я не знаю, сколько там будет предметов. В настоящее время я использую методы публикации для добавления входных данных на мою страницу следующим образом: 

     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

1 Ответ

0 голосов
/ 18 июня 2020

Вы имеете в виду, что не можете привязать данные к input? Если это так, иногда asp - для не работает, вы можете попробовать изменить asp-for="Salaries[0].HoursWorked" на 

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 />

результат:

enter image description here

Вот работающая демонстрация для показать привязку: Page: 

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

PageModel: 

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

    }

Результат: enter image description here

...