asp.net-mvc - 如何将客户端生成的类列表获取到 MVC 后操作参数？

Question

我有一种形式，我在其中动态生成一些控件(其中列出了一些类。在图像添加产品艺术品部分)当我单击提交按钮时，我如何在 post Action 方法的参数中获取此值以便我可以使用收藏中的这个值。

作为引用，我附上了我可以选择多个 Artwork oprion 的图像

[HttpPost]
   public ActionResult Add(Graphic graphicToAdd,Enumerable<GraphicArtwork> artworkOption)
{
// I want value in artworkOption 
}

public class GraphicArtwork
    {
        [Key]
        public int GraphicArtworkId { get; set; }
        public int GraphisId { get; set; }
        [Required(ErrorMessage = "The {0} is required.")]
        [DisplayName("Option Text")]
        [StringLength(500)]
        public string ArtOptionText { get; set; }
        public decimal Price { get; set; }
        [DisplayName("Active")]
        public bool IsActive { get; set; }
        public DateTime CreatedDate { get; set; }

        [NotMapped]
        public int TotalRecordCount { get; set; }
    }

这是我的观点:

<div class="editor-field PrintOptions">            
            <table data-bind="visible :customArtworks().length > 0">
                <thead>
                    <tr>
                        <td class="editor-label">Option</td>
                        <td class="editor-label">Price</td>
                        <td></td>
                    </tr>
                </thead>
                <tbody data-bind="foreach: customArtworks">
                    <tr>
                        <td>
                            <input placeholder="Enter Artwork Text" type="text" data-bind="value: ArtOptionText'}" />
                        </td>
                        <td>
                            <input placeholder="Enter Price" type="text" data-bind="value: Price" />
                        </td>
                        <td>
                            <a href="#" data-bind="click: $root.add"><img title="Add" src="~/Content/images/icon_add.png"></a>
                            <a href="#" data-bind="click: $root.remove,visible: $root.customArtworks().length > 1"><img title="Delete" style="margin-left:10px;" src="~/Content/images/icon_delete.png"></a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

有关更多详细信息:我正在使用 knockout.js 生成我的动态控制

 // Ko Implemntation

        function GraphicArtwork(ArtOptionText, Price) {
            var self = this;
            self.ArtOptionText = ArtOptionText;
            self.Price = Price;

            self.formattedPrice = ko.computed(function () {
                var price = self.Price;
                return price ? "$" + price.toFixed(2) : "0.00";
            })

        }

        function GraphicArtworkViewModel() {
            var self = this;
            self.customArtworks = ko.observableArray([GraphicArtwork(null, null)]);

            self.add = function () {
                self.customArtworks.push(new GraphicArtwork(null, null));
            };

            self.remove = function (GraphicArtwork) {
                self.customArtworks.remove(GraphicArtwork);
            };

        }

        ko.applyBindings(new GraphicArtworkViewModel()); 

Answer 1

添加这个绑定(bind):

<td>
                            <input placeholder="Enter Artwork Text" type="text" data-bind="value: ArtOptionText,attr:{name: '['+$index()+'].ArtOptionText'}" />
                        </td>
                        <td>
                            <input placeholder="Enter Price" type="text" data-bind="value: Price,attr:{name: '['+$index()+'].Price'}" />
                        </td>

AND 在代码隐藏中

public ActionResult Add(Graphic graphicToAdd,IEnumerable<GraphicArtwork> listOfGraphicArtwork)
{
 // listOfGraphicArtwork will hold all the required data 
}