html - 有没有办法在不使用提交按钮的情况下传递复选框数据？

Question

我目前正在进行一个类似 Dropbox 的 MVC4 项目，正在编写文件和文件夹的删除操作。我想知道的是，我可以使用删除操作链接(将我重定向到删除操作)作为提交按钮吗？我可以通过 Html.ActionLinks 将选中的复选框数据传递给 Controller ​​吗？

我有一个这样的 View :

   [@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>

Answer 1

如果您要使用 JS，您可以将选定的复选框 ID 作为列表发布到 Controller 。这是一个简单的例子，

您必须为所有复选框添加类名 (class="selected-folder")，以及值为文件夹 id (data-folderid="@dir.Id") 的“data-”属性。 像这样，

<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>

现在您可以获得选中的复选框和文件夹 ID，如下所示，

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'));
    }
}

您可以使用 AJAX POST 发布所选文件夹 ID 的列表，

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
  });
}

Controller 方法将接受这样的 id 列表，

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

希望这对您有帮助。