How to get client side generated class list to MVC post action argument?

Question

I have one form where I am generating some control dynamically (Which is list some class . in image add product artwork section) When I click on submit button how can i get this values in post Action method's argument so that I can use this value in collection.

For reference I have attached the image where i have option for multiple 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; }
    }

This is my view :

<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>

For more detail : I am generating my dynamical control using 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

Add This binding :

<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 in Code Behind

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