动态添加项目后，将数据发布到MVC 5中的控制器操作方法

Question

I have a model which is as below

public class ServiceView
{
    public ServiceView()
    {
        SubServiceView = new List<SubServiceView>();
    }
    public int Id { get; set; }
    public string Name { get; set; }
    public List<SubServiceView> SubServiceView { get; set; }
}

public class SubServiceView
    {
        public int Id { get; set; }
        public int ParentId { get; set; }
        [Required(ErrorMessage="Name is Required")]
        public string Name { get; set; }
        public string Description { get; set; }        
    }

I am able to load items dynamically but after posting I got SubServiceView count 0 always. Below is my code.

Create View:

<table class="form-group">
                    <thead>
                        <tr>
                            <td class="control-label col-md-2">
                                <label>Name</label>
                            </td>
                            <td class="col-md-10">
                                <input id="SubServiceView_0_Name" name="WeDoShoesCMSAdminPanel.ViewModel.SubServiceView[0].Name" type="text" class="form-control" value="" />
                            </td>                            
                        </tr>
                        <tr>
                            <td class="control-label col-md-2">
                                <label>Description</label>
                            </td>
                            <td class="col-md-10">
                                <input id="SubServiceView_0_Description" name="WeDoShoesCMSAdminPanel.ViewModel.SubServiceView[0].Description" type="text" class="form-control" value="" />
                            </td>
                        </tr>
                    </thead>
                    <tbody id="tbSubServices"></tbody>
                </table>

Script function:

function addSubService() {
                @{
                    Model.SubServiceView.Add(new WeDoShoesCMSAdminPanel.ViewModel.SubServiceView());
                }

                var index = $("#tbSubServices").children("tr").length;

                //var indexCell = "<td style='display:none'><input name='SubServiceView.Index' type='hidden' value='" + index + "' /></td>";
                var labelNameCell = "<td class='control-label col-md-2'><label>Name</label></td>";
                var nameCell = "<td class='col-md-10'><input id='SubServiceView_" + index + "_Name' name='WeDoShoesCMSAdminPanel.ViewModel.SubServiceView[" + index + "].Name' type='text' class='form-control' value='' /></td>";
                var labelDescriptionCell = "<td class='control-label col-md-2'><label>Description</label></td>";
                var descriptionCell = "<td class='col-md-10'><input id='SubServiceView_" + index + "_Description' name='WeDoShoesCMSAdminPanel.ViewModel.SubServiceView[" + index + "].Description' type='text' class='form-control' value='' /></td>";
                var removeCell = "<td class='col-md-10'><input id='RemoveSubService' type='button' class='btn btn-default' value='-' onclick='removeSubService(" + index + ");' /></td>";

                var newRow = "<tr id='trSubServices" + index + "'>" +
                            labelNameCell + nameCell + removeCell + "</tr>" +
                            "<tr id='trSubServices1" + index + "'>" +
                            labelDescriptionCell + descriptionCell + "</tr>";
                $("#tbSubServices").append(newRow);
            }

            function removeSubService(id) {
                var controlToBeRemoved = "#trSubServices" + id;
                var controlToBeRemoved1 = "#trSubServices1" + id;
                $(controlToBeRemoved).remove();
                $(controlToBeRemoved1).remove();
            }

Also validation is not working on dynamically added sub-services so I don't know whether this is good solution or not. As I am new in MVC so can anyone guide me how to achieve the same requirement in some optimized and generic way?

View:

Answer 1

You can try like this using linq

To Add

ProductView.SizeTypes.Add(new SizeTypes(){
//Your items
});

To Remove

ProductView.SizeTypes.Remove(SizeTypes);

You can try same for Brands