Post checkbox List to action from form

Question

I'm new in web. This is my html :

<div class="modal fade" id="EditDocumentModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Edit Vacation Types</h4>
            </div>
            <div class="modal-body">
                <form action=@Url.Action(MVC.Admin.Admin.EditFile()) method="post" enctype="multipart/form-data" class="edit-file-form" id="Edit-File-Form">                   
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default close-edit-document-button" data-dismiss="modal">Close</button>
                <button type="button" form="Edit-File-Form" id="edit-Document-submit" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

And this is my JS :

$(document).on("click", "a.Edit-File-link", function (e) {
        var id = $(this).data('id');
        $.ajax({
            url: '/Admin/Admin/EditFile/' + id,
            cache: false
        }).done(function (data) {
            var div = '<div class = "checkbox-for-edit"></div>';
            $('#Edit-File-Form').prepend(div);
            $(".checkbox-for-edit").attr("data-id", data.documentId);
            for (var i = 0; i < data.checkboxList.length; i++)
            {
                var checkBox = "<input type='checkbox' data-id = '" + data.checkboxList[i].Id + "' id='Edit-document-checkbox" + data.checkboxList[i].Id + "'/>" + data.checkboxList[i].Type + "<br/>";
                $(checkBox).appendTo('.checkbox-for-edit');
                if (data.checkboxList[i].IsSelected == true) {
                    $("#Edit-document-checkbox" + data.checkboxList[i].Id).prop('checked', true);
                }
                else {
                    $("#Edit-document-checkbox" + data.checkboxList[i].Id).prop('checked', false);
                }
            }
            $('#EditDocumentModal').modal('show');
        });
    });

    $(document).on("click", "button.close-edit-document-button", function (e) {
        $(".checkbox-for-edit").remove();
    });

    $("#edit-Document-submit").click(function (e) {
        $.ajax({
            url: '/Admin/Admin/EditFile/',
            type: 'POST',
            data: {
                documentId: $('.checkbox-for-edit').attr('data-id')
                //put checkbox post logic here
            },
            cache: false,
            dataType: "json",
            success: function (data) {
            }
        });        
    });

As you can see, on click Edit-File-link I get checkboxes from the action and draw them on bootstrap modal window. This part work fine. Now I need to POST this checkboxes to my action. This is my action:

[HttpPost]
        public virtual ActionResult EditFile(Guid documentId, List<VacationTypeViewModel> checkboxList)
        {
            throw new NotImplementedException();
        }

So, Id I've posted well. But I don't know what should I do with my checkboxes on the bootstrap modal window.

Answer 1

First, you're not naming your checkboxes at all, so their values will never be posted. Update your checkbox creation code to add a name="checkboxList[]" attribute. Likewise, you also need to include a value="" attribute for each checkbox with something like the id you want posted back.

Second, the only thing that will ever be posted back from the checkboxes is the value you assigned, not the full VacationTypeViewModel you started off with. As a result, your action parameter should be something like List<int> checkboxList . If you need to work with the actual instances represented by the ids posted back, you'll need to requery them from the database based on the posted list of ints in your post action.