ASP.Net MVC - Добавить поле в форму создания со ссылкой добавления (без JavaScript)

Question

У меня есть приложение MVC, в котором есть набор полей для контактной информации, которую нужно добавить для человека (электронная почта, телефон, факс, AIM и т. Д.) Сначала я представляю раскрывающийся список типов ввода и поля ввода для соответствующих данных, а также ссылку для добавления дополнительного набора полей.

После завершения у меня есть кнопка отправки, чтобы отправить форму.

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

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

Спасибо, Ричард

Answer 1

Как сказал Мэтью, если вы не хотите менять URL-адрес и не хотите использовать javascript, лучшим вариантом является запрос POST к серверу. Однако в ASP.Net MVC это можно сделать довольно аккуратно. Вам нужно будет изменить View с двумя добавлениями и добавить новый ActionMethod.

Вид, часть 1
Добавьте дополнительную форму к вашему представлению (это недопустимо в WebForms, поэтому может показаться немного странным, но в MVC это прекрасно).

<form action="/myController/myView/<%= (ViewData["fieldCount"]+ 1) %>">
    <input type="submit" value="Add custom field" />
</form>

Обратите внимание на переменную fieldCount - ее следует передать из Controller, как показано ниже:

Контроллер
Добавьте следующий ActionMethod, чтобы перегрузить тот, который вам в данный момент требуется для отображения формы:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult myView(int id) {
    ViewData["fieldCount"] = id;
    Return View();
}

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

Вид, часть 2
Теперь, когда у вас есть известный счетчик полей, вы можете просто зациклить поля в представлении:

<form action="/myController/SaveData/" method="post">
    ...
    <% for(i=0; i<int.TryParse(ViewData["fieldCount"]); i++) { %>
        <input type="text" name="customData" /><br />
    <% } %>
    ...
</form>

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

Answer 2

Это в основном клиентская сторона ответа. Если вам нужно сделать это без JavaScript и без изменения URL, это в основном оставляет POST.

<form action="" method="post">
<input name="field1"/>
<input name="field2"/>
...
<input name="add_field_submit" type="submit" value="Add Field"/>
...
<input name="done_submit" type="submit" value="Submit"/>

На сервере вы определяете, нажали ли они Добавить поле (присутствует add_field_submit) или Отправить (присутствует done_submit). Если они нажали «Добавить поле», вы добавите поле и откроете вид. В противном случае это сделано.

Answer 3

С jQuery довольно просто вставлять HTML-элементы в DOM на лету, без обратной передачи. Он использует javascript, который вы сказали в своем заголовке, что не хотели, но вы сказали, что все в порядке в вопросе, поэтому скажите мне, если вам нужно что-то еще. Итак, что вам действительно нужно выяснить, так это способ обработки данных при отправке на сервер ...

... и это тоже не должно быть слишком сложно. Если я не ошибаюсь (но я мог бы быть), значения из input элементов с одинаковыми name будут обрабатываться как массив значений. Таким образом, если вы вставите все новые элементы с общим именем, вы сможете получить все данные, перебирая массив на сервере.

Это HTML

<input type="text" name="customData" />
<input type="text" name="customData" />

опубликует данные, которые вы можете получить с помощью этого кода C # на сервере:

public ActionResult DoCoolStuff(FormCollection postedValues) {
    foreach(string data in postedValues.customData) {
         // This is where the cool stuff goes
    }
    Return RedirectToAction("Index");
}