ASP NET.CORE MVC Динамическое создание <input>

244
21 ноября 2021, 01:50

Пишу сайт - квизер. Столкнулся с такой проблемой. Есть Некий опрос, с N-ым количеством вопросов, нужно при нажатии на кнопочку, добавлять новое поле для нового вопроса(больше тавтологии богу тавтологии), Пример:

И получаем такой результат

Answer 1

Создаем Model

public class AddQuizViewModel
{
    [DisplayName("Название")]
    public string Name { get; set; }
    [DisplayName("Заказчик")]
    public string Customer { get; set; }
    [DisplayName("Список вопросов")]
    public List<string> Questions { get; set; }
}

Создаем View

@model AddQuizViewModel
<div class="text-center">
    @using (Html.BeginForm(FormMethod.Post))
    {
        <h2 class="display-4">Новый Квиз</h2>
        <div class="form-group">
            @Html.LabelFor(m => m.Name)
            @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Name, null, new { @class = "field-validation-error" })
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.Customer)
            @Html.TextBoxFor(m => m.Customer, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Customer, null, new { @class = "field-validation-error" })
        </div>
        <h1 class="display-4">@Html.DisplayNameFor(m => m.Questions)</h1>
        <div class="row">
            <div class="col-3">
                <input type="button" class="btn btn-primary" value="Добавить вопрос" onclick="newField()"/>
            </div>
            <div id="questions" class="col-9"></div>
        </div>
        <input type="submit" class="btn btn-success" value="Сохранить"/>
    }
</div>

Controller

[HttpPost]
public IActionResult AddQuiz(AddQuizViewModel model)
{
    // логика и вся остальная обработка
}

Пишем JS для добавления поля

function newField() {
    // определяем контейнер для хранения полей с вопросами
    let container = document.getElementById("questions"); 
    // получаем текущее количество input (полей для вопросов)
    let fieldCount = container.getElementsByTagName("input").length;
    // увеличиваем Id для нового поля
    let nextFieldId = fieldCount + 1;
    // здесь добавляем элемент, который будет хранить input (в моем случае, у вас может быть по другому или вообще не быть его)
    let div = document.createElement("div");
        div.setAttribute("class", "form-group");
    // создаем новое поле с новым id, name ДОЛЖЕН СОВПАДАТЬ С ИМЕНЕМ ПОЛЯ В МОДЕЛИ!!!
    let field = document.createElement("input");
        field.setAttribute("class", "form-control");
        field.setAttribute("id", "Questions[" + nextFieldId + "]");
        field.setAttribute("name", "Questions");
        field.setAttribute("type", "text");
        field.setAttribute("placeholder", "Введите текст вопроса");
    // добавляем поле в <div class="form-group"></div>
    div.appendChild(field);
    // добавляем <div class="form-group"><input ... /></div> в главный контейнер
    container.appendChild(div);
}
Answer 2

Вот моя реализация, но это на JS, и ASP NET тут вообще не причём.

let containerId = 'quiz_wrapper'          
let btnId = `i_new_field_button`;
let fieldHtml =`<input type="text" name="Question" placeholder="Вопрос" value="" />`
function AddNewField() {
    let divElem = document.getElementById(containerId);
    let newElem = document.createElement('div');
    let btn = document.getElementById(btnId);
    newElem.innerHTML += fieldHtml;
    newElem.innerHTML += btn.outerHTML;
    btn.remove();
    divElem.appendChild(newElem);

}

код контроллера, для того, чтобы собрать все вопросы

 public ActionResult Create(IFormCollection collection)
        {
            var questions = collection["Question"];
            return View();
        }

Соответственно, вопрос всё ещё в силе. Можно ли сделать тоже самое силами ASP.NET CORE MVC?

READ ALSO
Убрать мерцание из Picturebox

Убрать мерцание из Picturebox

Всем привет возникла такая вот проблема, при перерисовывания изображения возникает сильное мерцание( 2 буферизация на форме включена),прошу...

103
Framework совместимость с Core

Framework совместимость с Core

Если dll написана наNET Framework 2

93
как закрыть форму родительскую, при открытии новой формы дочерней

как закрыть форму родительскую, при открытии новой формы дочерней

Есть толстое приложение, в котором по клику на кнопке вызывается форма , внутри которой поле ввода, и кнопки по типу: подтвердить, отменить,...

199
Соединения lua-скрипта и web-приложения

Соединения lua-скрипта и web-приложения

Мне нужно связать один lua-скрипт и web-приложение таким образом, чтобы первый отправлял информацию последнему, а тот выводил её в реальном времениНемного...

163