lundi 18 mai 2015

Post checkbox List to action from form

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. May anybody help me?




Aucun commentaire:

Enregistrer un commentaire