ASP.NET MVC3 - динамическое добавление элемента в массив объекта

Question

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

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

<tr class="unSelected">
   <input name="id[]">
   <input name="blabla[]">
</tr>

$('.unSelected').focusin(function () {
  if ($(this).hasClass('unSelected')) {
    var row = $(this).clone(true);
    $(this).after(row);
    $(this).removeClass('unSelected');
  }
});

но как сделать это, используя razor и asp.net, так как объекты не будут автоматически генерироваться?

Answer 1

В ASP.NET MVC, если у вас есть класс модели, например:

public class PageModel
{
    public Collection<RowItem> RowItems { get; set; }
}

public class RowItem
{
    public int Id {get;set;}
    public string MoreFields { get; set; }
}

И ваш javascript добавляет такие строки:

<script type="text/javascript">
    var currentRowIndex = 0;

    $(document).ready(function () {
        SetFocusEventForInputs('unSelected0');
    });

    function SetFocusEventForInputs(className) {
        var inputSelector = '.' + className;

        $(inputSelector).focusin(function () {
            AddNewRowTo(this);
            $(inputSelector).unbind('focusin').removeClass(className);
        });
    }

    function AddNewRowTo(sendingInputField) {
        currentRowIndex++;
        var className = 'unSelected' + currentRowIndex;
        var collectionNamePrefix = 'RowItems[' + currentRowIndex + '].';

        var idField = $('<input/>').attr('name', collectionNamePrefix + 'Id').attr('type', 'text').attr('class', className);
        var moreFields = $('<input/>').attr('name', collectionNamePrefix + 'MoreFields').attr('type', 'text').attr('class', className);

        var cell = $('<td></td>').append(idField).append(moreFields);
        var row = $('<tr></tr>').append(cell);

        $(sendingInputField).parents("tr").after(row);

        SetFocusEventForInputs(className);
    }
</script>
<table>
    <tr>
        <td>
            <input name="RowItems[0].Id" type="text" class="unSelected0" />
            <input name="RowItems[0].MoreFields" type="text" class="unSelected0" />
        </td>
    </tr>
</table>

Связыватель модели по умолчанию в MVC должен разрешать его просто отлично, когда он публикуется

[HttpPost]
public ActionResult YourPostActionHere(PageModel model)
{
    var count = model.RowItems.Count();
    etc...
}

Answer 2

То, что вы хотите сделать, это клиентский скрипт, который не зависит от PHP или Asp.Net, поэтому не имеет значения, для чего написан ваш код.это должно работать и в Asp.Net mvc.

, если вы хотите собрать новые управляющие данные для использования их на стороне сервера, вы можете собрать их с помощью JavaScript и назначить их в скрытом поле, доступ к которому можно получить на сервере.боковая сторона.Вы можете использовать одно скрытое поле, сохранив значения в одной строке и разделив их любым разделителем.

Answer 3

Возможно, вам просто не хватает тегов сценария?Как говорили другие, javascript не зависит от платформы.

<tr class="unSelected">
   <input name="id[]">
   <input name="blabla[]">
</tr>

<script src="/Scripts/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $().ready(function () {
        $('.unSelected').focusin(function () {
            if ($(this).hasClass('unSelected')) {
                var row = $(this).clone(true);
                $(this).after(row);
                $(this).removeClass('unSelected');
            }
        });
    });
</script>

Answer 4

Вы можете сделать это таким же образом, потому что в приведенном выше примере кода вы используете jQuery, который также поддерживается (конечно) с ASP.NET MVC.

Возможно, я вас не понимаю, но я не вижу никакого кода PHP в приведенном выше примере кода.