Question

我目前正在使用类似Dropbox的MVC4项目并编写文件和文件夹的删除操作。我想知道的是，我可以使用我的Delete ActionLink（将我重定向到Delete操作）作为提交按钮吗？我可以通过Html.ActionLinks将已检查的复选框数据传递给控制器吗？

我有这样的观点：

   [@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作为列表发布到控制器。这是一个简单的例子，

您必须为所有复选框（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
  });
}

控制器方法将接受这样的ID列表，

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

希望这会对你有所帮助。

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

1 个答案: