Post data to controller action method in MVC 5 after adding items dynamically

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:

What do you want your UI to look like? - a checkbox associated with each item in the list so you can select which ones you want? — , Oct 24 '16 at 12:07
Checkbox associated with each item would be great otherwise Drop-down values will be also good. — Jyotish Singh, Oct 24 '16 at 13:18
You need to edit you question with a bit more explanation of the UI. It's late here but I'll add an answer in the morning (and I assume you will really want to show the names of the brands in addition to binding to their ID values? — , Oct 24 '16 at 13:25
I assume your not going to edit the question and therefore do not want an answer. Suggest you look at [this answer](http://stackoverflow.com/questions/29542107/pass-list-of-checkboxes-into-view-and-pull-out-ienumerable/29554416#29554416) for one way to approach it. — , Oct 24 '16 at 21:39
Yes I want the answer very eagerly but don't know how to explain other way. As I can understand you get the question very well so If possible could you please edit the question. — Jyotish Singh, Oct 25 '16 at 05:39
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/126569/discussion-between-jyotish-singh-and-stephen-muecke). — Jyotish Singh, Oct 25 '16 at 05:44

score 0 · Answer 1 · answered Oct 24 '16 at 11:45

0

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

answered Oct 24 '16 at 11:45

Bharat

2,441
3
24
36

I don't know whether I was able to explain my question but I want to implement the same on MVC 5 create view also for every add SizeType or Brands, List will come from controller action method. – Jyotish Singh Oct 24 '16 at 11:51

Post data to controller action method in MVC 5 after adding items dynamically

1 Answers1