ASP.NET MVC3-将项动态添加到对象的数组中

本文关键字：对象 数组 添加 动态 NET MVC3- ASP | 更新日期: 2023-09-27 17:58:12

我正在开发一个网站，用户应该能够填写一个动态扩展表单。

我会添加一行灰色字段，当用户将焦点放在其中一个字段时，下面的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来实现这一点，因为那时对象不会自动生成？

ASP.NET MVC3-将项动态添加到对象的数组中

在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...
}

您也可以用同样的方法，因为在上面的代码示例中，您使用的是（当然）ASP.NET MVC也支持的jQuery。

也许我不理解你的意思，但在上面的代码示例中我看不到任何PHP代码。

你想要做的是一个客户端脚本，它不依赖于PHP或Asp.Net，所以你的代码是由什么编写的并不重要。这也应该在Asp.Netmvc中工作。

如果你想收集新的控制数据以便在服务器端使用，你可以通过JavaScript收集它，并将它分配到一个可以在服务器端访问的隐藏字段中。通过将值保存在一个字符串中并用任何分隔符分隔，可以使用一个隐藏字段。

您可能只是缺少脚本标记吗？正如其他人所说，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>
相关文章：