Пишу сайт - квизер. Столкнулся с такой проблемой. Есть Некий опрос, с N-ым количеством вопросов, нужно при нажатии на кнопочку, добавлять новое поле для нового вопроса(больше тавтологии богу тавтологии), Пример:
И получаем такой результат
Создаем 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);
}
Вот моя реализация, но это на 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?
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Всем привет возникла такая вот проблема, при перерисовывания изображения возникает сильное мерцание( 2 буферизация на форме включена),прошу...
Есть толстое приложение, в котором по клику на кнопке вызывается форма , внутри которой поле ввода, и кнопки по типу: подтвердить, отменить,...
Мне нужно связать один lua-скрипт и web-приложение таким образом, чтобы первый отправлял информацию последнему, а тот выводил её в реальном времениНемного...