1

Добрый день. У меня имеется вот такая простенькая форма добавления игрока в базу данных:

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Player</h4>
    <hr />
    <div class="newPlayer">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.PositionId, "Позиция", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("PositionId", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Position, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.TeamId, "Команда", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("TeamId", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.TeamId, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Добавить" class="btn btn-default" />
        </div>
    </div>
</div>
}

Ничего особенного, для начинающего освоить - самое то. Но у меня возникла идея добавлять игроков не о одному, а сразу несколько. Допустим, чтобы была кнопка "Еще один игрок", которая динамически добавляют на страницу еще одну форму. Подскажите как это проще сделать или в сторону каких технологий глядеть?

1 ответ 1

1

Можно сделать так.

Код всей формы пишите на чистом HTML, без razor и закидываете в строковую переменную.

var formTemplate = `<div>
  <input name="hallo[1]">
  ...
  </div>`;

Далее при нажатии на кнопку динамически добавляется в конец определённого блока код formTemplate, С заменёнными частью [1] эта часть нужны для однозначной идентификации формы каждого пользователя.

var pleerForm = document.createElement("div");
pleerForm.innerHTML = formTemplate.replace("[1]",currentPlayerFormNumber);
document.getElementById("my-form").append(pleerForm);

Но вот с валидацией придётся свой кастомный механизм реализовывать.

Второй подход это это первую форму создать как вы делали на Razor а последующие клонировать от неё.
После клонирования сделать замену в именах на новый индекс.

Третий подход использование vue.js, это фреймворк для создания одностраничных приложений, но подходит и для отдельных страниц.

Минус этого подхода - много разбираться, но польза может быть огромна.

Четвёртый подход, возможно не полнофункциональный как выше, но наиболее простой. Прямо через Razor сгенерировать например 10 (или другое число) частей формы сразу, без возможности добавлять. Возможно для конкретной задачи этого вполне хватит.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.