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

Posted 2023-04-13

【中文标题】ASP.NET MVC3 - 将项目动态添加到对象的数组中

【英文标题】：ASP.NET MVC3 - Dynamically adding an item to array on object

【发布时间】：2011-09-06 03:10:45

【问题描述】：

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

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

【参考方案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...

【讨论】：

谢谢，真的很棒！

我需要相同的解决方案，但是当我删除中间的一项时，RowItems 索引会中断，因此只有删除行之前的项目才能成功发布，而其他所有跳过

【参考方案2】：

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

也许我不明白你的意思，但我在上面的代码示例中没有看到任何 php 代码。

【讨论】：

我可能不擅长解释在 php 中我会做类似 $objWithArray = new objWithArray(); $i=0; while (isset($_POST["id"][$i])) $obj = new obj($_POST["id"][$i]); $objWithArray->addObj($obj); $i++;但在 asp.net 中，可以执行 [HttpPost] public ActionResult method(ObjWithArray de) 如果字段名称正确，则会自动添加它们。你现在明白了吗？ ://

【参考方案3】：

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

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

【讨论】：

是的，但是我必须通过手动访问字段来生成对象服务器端，我的想法是避免这种情况

【参考方案4】：

您可能只是缺少脚本标签吗？就像其他人说的那样，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>