.NET MVC Использование Javascript для добавления текстового поля для просмотра при нажатии кнопки

Question

Я попытался поискать, но нет чего-то, что является довольно конкретным примером этого, и мой 'jQuery-Foo' довольно беден.

Вот что я пытаюсь сделать:

Пользователю предоставляется форма, в которой он вводит данные пользователя (первый / последний / адрес и т. Д.).

Когда приходит время добавить номер телефона, они должны иметь возможность добавить столько, сколько они захотят. Через jQuery, как мне добавить еще одно текстовое поле в форму в определенном div (скажем, div id = "phoneNumbers"), и эти значения текстового поля будут добавлены в результирующий объект formcollection при сохранении?

Будет ли такой сценарий работать? Кто-нибудь может предложить лучший вариант для достижения этой цели?

Заранее спасибо

Answer 1

Тебе никто не говорил? Вы можете делать все что угодно в jQuery;)

Вот как может выглядеть код.

$("#phoneNumbers").append(
      "<input type=\"textbox\" id=\"newTxtBox\" name=\"newTxtBox\" />");

...

// Post the form with all values
$.post("/target/action", $("#myform").serialize());

Обратите внимание, что ваш div с именем "phoneNumbers" должен быть в форме "myform", чтобы новое значение текстового поля было сериализовано и отправлено.

Это кажется разумным, если вы можете быть уверены, что у всех ваших пользователей будет включен JavaScript. Однако всегда предлагается использовать подход резервного копирования «изящной деградации», когда javascript не может быть использован. Обычно я реализую это, добавляя в форму кнопку, например «добавить другой номер телефона», которая, если щелкнуть по ней, отправит сообщение обратно на сервер и создаст новую форму с дополнительным текстовым полем. В моей функции jQuery document.ready () я бы просто скрыл кнопку.

Answer 2

Так что-то подобное будет технически правильно?

переменный ток = 1;

   function addNumber() {
       console.log('running addNumber')
       //current keeps track of how many numbers we have.
       current++;
        var thePhoneBox = ('<p> <label for="number ' + current + '>number' + current + ':</label> <%= Html.TextBox("number' + current + '") %>\n <%= Html.ValidationMessage("number ' + current + '", "*") %>\n </p>'
       console.log(thePhoneBox)
       $('#phoneNumbers').append(thePhoneBox)
   }

   $(document).ready(function() {
       $('#addNumber').click(addNumber)
   });

Большое спасибо за вашу помощь.