Is there any way to pass checkbox data without using a submit button?

Question

I am currently on a Dropbox-like MVC4 project and coding the delete action for files and folders. The thing I am wondering is, can I use my Delete ActionLink (which redirects me to the Delete action), as a submit button? Can I pass the checked checkboxes data through Html.ActionLinks to Controllers?

I have a View like this:

   [@Html.ActionLink("Download", "Download", "File")]  
   [@Html.ActionLink("Share", "Share", "File")]
   [@Html.ActionLink("Move", "Move", "File")] 
   [@Html.ActionLink("Rename", "Rename", "File")]  
   [@Html.ActionLink("Delete","Delete","File")] 
   [@Html.ActionLink("Copy", "Copy", "File")]


        <ul>

         @foreach (UserLoginApp.Models.FolderModel dir in Model.FolderList)
            {
                <li>
                    <input type="checkbox" name="SelectedFolders" value="@dir.Name" />
                     <img src="~/Content/Images/Folder-icon.png" alt="Folder Logo" align="top" style="width: 20px;
            height: 20px; border: none" />
         <a href="@dir.Name/" id="FolderName" title="@dir.Name">@dir.Name</a>

        </li>

            }

        @foreach (UserLoginApp.Models.FileModel file in Model.FileList)
            {
                <li>
                    <input type="checkbox" name="SelectedFiles" value="@file.Name" />
                    @if (file.Name.EndsWith(".jpg") || file.Name.EndsWith(".jpeg") || file.Name.EndsWith(".png"))
                        {
                            <img src="~/Content/Images/image.png" alt="File Logo" align="top" style="width: 20px;
            height: 20px; border: none" />
                        }
                        else
                        {
                            <img src="~/Content/Images/file.png" alt="File Logo" align="top" style="width: 20px;
            height: 20px; border: none" />
                        }
                        <a href="@(uri.AbsolutePath + file.Name)" title="@file.Name" target="_blank">@file.Name</a>


        </li>
            }
    </ul>

You have already asked a [similar question here](http://stackoverflow.com/questions/31048877/passing-the-checkbox-data-to-a-controller-action-as-a-parameter-in-mvc4) - delete the other one — , Jun 29 '15 at 06:03
A delete action needs to be a POST, not a GET. Either use a form and submit to a controller method or handle it using javascript/jquery — , Jun 29 '15 at 06:05
What exactly do you want to do. Do you want to be able to select multiple folders/files using a checkbox, and then in one action (i.e. click a button) delete all the selected items from the database? — , Jun 29 '15 at 06:12
so add items (or ids) in a list and post the list when delete action is triggered. At the asp script, write function that uses a db query to delete those files. Return success or failure to frontend — sinhayash, Jun 29 '15 at 06:19
@sinhayash so I need to store the items in a list in my view, right? Then, I assume I should pass the list as a parameter to the html.actionlink? — Kaan Demirel, Jun 29 '15 at 07:21
or maybe I should do the submit via a JS function called when the actionlink is clicked? — Kaan Demirel, Jun 29 '15 at 07:40

score 2 · Accepted Answer · answered Jun 29 '15 at 12:35

If you are going to use JS, you can post selected check box ids as list to controller. Here is a simple example,

You have to add a class name for all check box (class="selected-folder"), and a "data-" attribute with value of folder id (data-folderid="@dir.Id"). Like this,

<ul>
     @foreach (UserLoginApp.Models.FolderModel dir in Model.FolderList)
        {
            <li>
                <input class="selected-folder" data-folderid="@dir.Id" type="checkbox" name="SelectedFolders" value="@dir.Name" />
                <img src="~/Content/Images/Folder-icon.png" alt="Folder Logo" align="top" style="width: 20px; height: 20px; border: none" />
               <a href="@dir.Name/" id="FolderName" title="@dir.Name">@dir.Name</a>
            </li>
        }
</ul>

Now you can get selected check box and folder ids like below,

function deleteFolders()  // call this method as "OnClick" function of "Delete" button
{
   // Create a folder id list
   var folderIds = new Array();

   // Get all selected check box to create a list
   $('.selected-folder:checked').each(function () {
       // Get current selected check box
       var selectedfolder = $(this);

       // Add selected folder ids to list
       folderIds.push(selectedfolder.attr('data-folderid'));
    }
}

and you can POST list of selected folder ids using AJAX POST,

function deleteFolders()
{
   // Create a folder id list
   var folderIds = new Array();

   // Get all selected check box to create a list
   $('.selected-folder:checked').each(function () {
       // Get current selected check box
       var selectedfolder = $(this);

       // Add selected folder ids to list
       folderIds.push(selectedfolder.attr('data-folderid'));
    }

  // Post folder ids to controller
  $.ajax({
     type: "POST",
     url: 'link to controller method',
     cache: false,
     dataType: "json",
     data: folderIds, // Passing list of ids to controller as parameter
     contentType: 'application/json; charset=utf-8',
     success: function (result) {
         // do your success actions
     },
     error: function (error, type, message) {
         // do your failure actions
     },
     async: true,
     processData: false
  });
}

The controller method will accept the list of ids as like this,

public ActionResult DeleteFolders(List<int> folderIds)
{
    // delete selected folders
}

Hope this will help you.

Is there any way to pass checkbox data without using a submit button?

1 Answers1