Создание динамического ввода для формы

У меня есть требование для динамического заполнения нескольких задач в ответ на кнопку «добавить задачу» пользователя. Я не знаю, сколько задач будет создано пользователем, и предпочли бы не устанавливать максимальное число со скрытыми полями, так как это было бы неэффективно в отношении пространства хранения базы данных.Создание динамического ввода для формы

Задачи можно рассматривать как дочерние элементы для заметок и хранятся в отдельных таблицах. Мне удалось отобразить несколько задач в представлении, но я менее уверен в разработке интерфейса и не знаю, как я могу добавить поле ввода, не вызывая обратную связь, тем самым введя область «средний поток». .

<html> 
<div class="container"> 
    <!-- @using(Html.BeginForm()) { --> 
    <div> 
    <label asp-for="Note">Note</label> 
    <input id="Note" /> 
    <span asp-validation-for="Note"></span> 
    <label asp-for="Task">Task</label> 
    <input id="Task" /> 
    <span asp-validation-for="Task"></span> 
    </div> 
    <div> 
    <button type="button">Add Task</button> 
    <input type="submit" value="Save" /> 
    </div> 
    <!-- } --> 
</div> 

</html>

Я также сделал небольшую функцию JQuery, которая может создать входы задач на кнопку «добавить задачу», но с небольшим успехом в его подключении к контроллеру/модели.

У меня был AJAX с JSON, рекомендованный для решения этого требования, но я не уверен, как это можно реализовать в форме и как это может быть прочитано контроллером и, в конечном счете, моделью?

Я открыт для разработки альтернатив, если он лучше подходит моему решению.

источник

2017-01-06 Remy

Хорошо, я попытаюсь объяснить здесь подход, который я обычно использую для этого типа проблем, после долгого времени разрабатывая различные приложения, которые он закончил как один из моих фаворитов.

Прежде всего, если я хорошо понимаю вас, у вас есть представление, в котором создается форма, в качестве части взаимодействия с клиентом вам нужно вводить элементы, которые зависят от основной сущности вашей формы (обычно как отношения от одного до многих). Я буду называть эти «подформы» во время этого ответа.

Вам нужно:

A) Управление взаимодействия клиента ти элементов, добавляемых/модифицировано/заменить

B) Отправить окончательные данные к контроллеру вашего сервера, так что данные могут быть сохранены в базу данных.

Мой подход к этим типам ситуаций заключается в попытке управлять всеми клиентскими взаимодействиями в клиенте, отправляя конечные данные только в конце, после того как пользователь нажимает кнопку «Сохранить».

Очевидно, что это неверно для КАЖДОЙ ситуации, так как иногда конкретные требования могут сделать это решение не рекомендованным.

Для клиентской части:

я строй ядра формы по обычному способу, через стандартный вид, как правило, я устанавливаю конкретные контейнеры впрыснуть туда информацию о данных «dinamyc».

На кнопке «Добавить задачу» я добавляю слушатель, который создает HTML для одного элемента подформы и добавляет его в контейнер. Обычно этот код включает кнопку удаления, чтобы исключить его из DOM в целом. У меня также есть слушатель для управления этими взаимодействиями.

Итак ... теперь у вас есть форма, в которой некоторые кнопки могут добавлять и удалять небольшие части кода, которые представляют отдельные элементы вашей подформы.

Включите в свой клиентский код структуру данных (обычно я использую объект JSON), который представляет список элементов подформы.

Когда пользователь нажимает на кнопку «Сохранить», захватить событие и, перед отправкой данных обратно на сервер сделать это две вещи:

1) Loop через структуру подчиненной чтения информации, что она содержит в данный момент и сохраните его в своей структуре данных клиента (объект JSON, который я упоминаю ранее). Теперь у вас есть объект JSON со всей информацией о вашей подчиненной форме.

2) Стризируйте его и сохраните в скрытом текстовом компоненте, который отправляется в форме. Все ваши поля «subform» могут быть вне формы, так как их не нужно отправлять, информация возвращается на сервер в «экземпляре класса» в виде структуры JSON.

На сервере:

Когда контроллер получает данные формы, будет полем, которое хранит строку, представляющую всю информацию отправленный через «подчиненный» свой пользователь.

Теперь вам просто нужно получить эту информацию и управлять ею так, как вам нравится. Вы можете, например, создать класс для загрузки этого типа информации и отправить его в базу данных с помощью обычного механизма персистентности.

Имейте в виду, что в этом пакете вы сохраняете не только добавленные элементы, но и элементы, которые были изменены с момента последнего редактирования, поэтому вам, вероятно, придется искать их в базе данных и изменять их.

Это довольно текстовая статья, и, возможно, менее понятно понять идею, чем это у меня на уме, поэтому не стесняйтесь спрашивать, не понимаете ли вы что-либо или что-то, что недостаточно ясно.

источник

2017-01-11 12:51:21 Bardo

Создание динамического ввода для формы

ответ

Смежные вопросы