Добавление элементов в форму динамически с JS

Я создал 15 полей в моей таблице MySQL и хотел бы дать конечному пользователю возможность использовать форму для добавления к такому количеству элементов. Тем не менее, чтобы сохранить интерфейс в чистоте, я хотел бы предоставить им только 2-3 текстовых поля и дать им кнопку, которая позволит им добавлять больше, если им это нужно.

Я не верю, что добавление текстовых полей в форму с использованием Javascript было бы проблемой, но я запутался в том, как обрабатывать его точно после того, как я отправил данные POST в обработчик формы. Может ли кто-нибудь пролить свет на лучший способ сделать это?

Источник

2 ответа

Решение

Если вам нужно использовать обычную переменную POST, содержащую все значения формы, вы сможете сделать что-то вроде этого:

При создании текстовых полей с языком сервера и / или JavaScript, способ их отправки на сервер с их name приписывать. Если вы предоставляете последовательный способ именования элементов, вы можете "комбинировать" вещи с числами. Например, если вы предоставляете 2 текстовых поля каждый раз, когда пользователь нажимает "Добавить" (одно для "foo" и одно для "bar"), вы можете увеличить число в конце, чтобы убедиться, что они совпадают.

<input type="text" name="foo1" /><input type="text" name="bar1" />
<input type="text" name="foo2" /><input type="text" name="bar2" />
and so on

Затем на сервере вам нужно найти каждый элемент в переменной POST, который начинается с "foo" и "bar"

for (item in POST) {
    if (item startswith "foo") {
        // Extract the number at the end, and find the related "bar"
    }
}
Источник

Предполагая, что вы используете ASP.NET MVC для веб-приложения вместе с jQuery для клиентской среды.

Давайте еще предположим, что у вас есть такая модель:

public class Gift
{
    public string Name { get; set; }
    public double Price { get; set; }
}

Ваше начальное действие и данные могут быть такими:

public ActionResult Index()
{
    var initialData = new[] {
        new Gift { Name = "Tall Hat", Price = 39.95 },
        new Gift { Name = "Long Cloak", Price = 120.00 },
    };
    return View(initialData);
}

Принимая во внимание, что ваше мнение может быть таким:

<h2>Gift List</h2>
What do you want for your birthday?

<% using(Html.BeginForm()) { %>
    <div id="editorRows">
        <% foreach (var item in Model)
            Html.RenderPartial("GiftEditorRow", item);
        %>
    </div>

    <input type="submit" value="Finished" />
<% } %>

И частичное представление для редактора подарков может быть таким:

<div class="editorRow">
    <% using(Html.BeginCollectionItem("gifts")) { %>
        Item: <%= Html.TextBoxFor(x => x.Name) %>
        Value: $<%= Html.TextBoxFor(x => x.Price, new { size = 4 }) %>
    <% } %>
</div>

Ключ - вспомогательный метод "BeginCollectionItem", который не является стандартным в ASP.NET MVC. Будет сгенерировано несколько ключей для моделей переменной длины. Я добавлю ссылку на файлы позже. Ваш обработчик будет выглядеть так:

[HttpPost]
public ActionResult Index(IEnumerable<gift> gifts)
{
    // To do: do whatever you want with the data
}

При таком подходе вы получаете список подарков, заполненный значениями в текстовых полях. Чтобы добавить еще один элемент, вам нужно отправить ajax-запрос в это представление:

Надеюсь, это поможет Источник: http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/ Загрузить: http://blog.codeville.net/blogfiles/2010/January/ListEditorDemo.zip

Источник
Другие вопросы по тегам