Как использовать форму Ajax, когда форма создается динамически?

Question

У меня есть форма в моей разметке aspx.

Я добавляю в нее некоторые поля динамически.

Я отправляю их на действия контроллера.

Как мне прочитать их на стороне сервера?

Обновление

1. Моя форма содержит n текстовые поля.

2. Я подумал использовать одну модель, которая будет содержать IEnumerable<FormItem>

на стороне клиента я заполню его формой Ajax.

Имеет смысл?

Answer 1

Вы можете использовать jQuery. Если ваши поля создаются динамически, то, я полагаю, вы передадите эти поля в виде массива.Вы должны добавить класс в каждое новое поле, чтобы вы могли получить их.

<input class="dynamicInput" type="text"></input>
<input class="dynamicInput" type="text"></input>
<input class="dynamicInput" type="text"></input>
<button id="submit">submit</button>
<script type="text/javascript">
    $(function(){
        var myArray = [];
        $('#submit').on('click', function(i,val){
            //It will go through any input with a class "dynamicInput"
            $.each($('.dynamicInput'), function(){
                myArray.push($(this).val());
            });
            //We'll send our array to MyAction
            $.post('/MyController/MyAction', myArray, function(data) {
                //If your action returns a string you could handle it through "data"
                console.log(data);
            });

        });
    });
</script>

Тогда ваше действие получит этот массив через запрос HTTP post как объект JavaScript, вам нужно будет десериализовать его вC # массив, чтобы вы могли обрабатывать его на стороне сервера:

[HttpPost]
public ActionResult MyAction(FormCollection values)
{
    var jsonArray = values["myArray"];
    var deserializer = new JavaScriptSerializer();
    var cSharpArray = deserializer.Deserialize<List<string>>(jsonArray);


    //Here you will handle your array as you wish


    //Finally you could pass a string to send a message to your form
    return Content("Message to user");
}

Answer 2

Я думал использовать одну модель, которая будет содержать IEnumerable

Да, отличная идея.Поэтому, когда вы определили класс FormItem (в зависимости от ваших потребностей), вы готовы бросить:

public class FormItem
{
    public string Value { get; set; }
}

, а затем:

<form id="myform" action="/" method="post">
    <!-- Those inputs could be added dynamically -->
    <input type="text" name="[0].Value" />
    <input type="text" name="[1].Value" />
    <input type="text" name="[2].Value" />
    <input type="text" name="[3].Value" />

    <button type="submit">OK</button>
</form>

и, наконец, AJAXify форму:

$(function() {
    $('#myform').submit(function() {
        var form = $(this);
        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            data: form.serialize(),
            success: function(result) {

            }
        });
    });
});

Убедитесь, что вы извлекаете сообщение в блоге Фила Хаака об ожидаемом формате проводника для привязки к спискам.

сообщение в блоге Стива Сандерсона оРедактирование списка переменной длины также необходимо прочитать.

Answer 3

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

@using (Html.BeginForm("Index"))
{
    <!-- pretend this field was dynamically created with javascript -->
    <input id="email" type="email" name="email" />

    <button type="submit">Submit</button>
}

Значение внутри текстового поля email может бытьдоступ осуществляется с помощью свойства Form объекта Request:

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult Index()
    {
        // Get the value of the input named `email`
        var email = Request.Form["email"];

        /* Do cool stuff because you can */
    }
}

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

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult Index(string email)
    {
        // The default model binder will set the value of the `email` parameter to the 
        // value of the matching input from your form

        /* Do cool stuff because you can */
    }
}

Есть и другие способы, такие как принятие параметра типа FormCollection (см. этот пример ) или создание класса модели представления со строго типизированным