如何将 Razor Pages 方法的 URL 传递给 jQuery-File-Upload

Question

我正在使用这个 git repo BlueImp/jQuery-File-Upload 在 Razor Pages Web 应用程序中上传文件。单击删除按钮时，我无法点击 DeleteFile 方法。

上传文件时，Json 响应将发送到包含 DeleteFiles 方法的删除 URL 的表单，该方法由 x-tmpl 脚本获取

public async Task<ActionResult> OnPostUploadProfileImage()
        {           
            var httpPostedFiles = HttpContext.Request.Form.Files;
            var webRootPath = _hostingEnviroment.WebRootPath;
            var fileUploadProfile = httpPostedFiles[0];

            List<ViewDataUploadFilesResult> fileResults = new List<ViewDataUploadFilesResult>();
            UploadResult uploadResult = new UploadResult()
            {
                files = fileResults
            };

            if (fileUploadProfile != null)
            {
                var newProfileImageFileName = Guid.NewGuid().ToString();
                var profileImageFolder = Path.Combine(webRootPath, @"images\profileImages");
                var profileImageExtenstion = Path.GetExtension(fileUploadProfile.FileName);

                using (var fileStream = new FileStream(Path.Combine(profileImageFolder, newProfileImageFileName + profileImageExtenstion), FileMode.Create))
                {
                    fileUploadProfile.CopyTo(fileStream);
                }

                string profileImageUrl = @"images\profileImages\" + newProfileImageFileName + profileImageExtenstion;

                var result = new ViewDataUploadFilesResult()
                {
                    Name = fileUploadProfile.FileName,
                    Size = fileUploadProfile.Length,
                    ThumbnailUrl = "https://localhost:7062/" + profileImageUrl,
                    Url = "https://localhost:7062/" + profileImageUrl,
                    DeleteUrl = "https://localhost:7062/" + "Donations/DonationPageSettings/DeleteFile?file=" + newProfileImageFileName + profileImageExtenstion,
                    DeleteType = "GET",
                    Error = null
                };

                fileResults.Add(result);                
            }

            return new JsonResult(uploadResult);
        }

    public async Task<IActionResult> OnGetDeleteFile()
    {
        var Blegh = "";
        return Page();
    }

在 cshtml 文件中有一个处理上传表单的 x-tmpl。

<script id="template-download" type="text/x-tmpl">
    {% for (var i=0, file; file=o.files[i]; i++) { %}
        <tr class="template-download">
            <td>
                <span class="preview d-flex justify-content-center flex-align-center" style="height: 80px">
                    {% if (file.thumbnailUrl) { %}
                        <a href="{%=file.url%}"  title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}" style="width: 80px; height: 80px;"></a>
                    {% } %}
                </span>
            </td>
            <td>
                <p class="name">
                    {% if (file.url) { %}
                        <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                    {% } else { %}
                        <span>{%=file.name%}</span>
                    {% } %}
                </p>
                {% if (file.error) { %}
                    <div><span class="label label-danger">Error</span> {%=file.error%}</div>
                {% } %}
            </td>
            <td>
                <span class="size">{%=o.formatFileSize(file.size)%}</span>
            </td>
            <td nowrap>
                {% if (file.deleteUrl) { %}
                    <button class="btn btn-outline-danger btn-sm btn-block delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                        <span>Delete</span>
                    </button>                   
                {% } else { %}
                    <button class="btn btn-outline-default btn-sm d-block w-100 cancel">
                        <span>Cancel</span>
                    </button>
                {% } %}
            </td>
        </tr>
    {% } %}
</script>

我试过用 asp-page-handler="DeleteFiles" 将按钮包装在一个表单中，但这不能工作，因为按钮已经包含在上传表单中，所以它永远不会点击 OnGetDeleteFiles 方法。

如何使用传递给它的 URL 使删除按钮从 x-tmpl 中调用 OnGetDeleteFiles。

Answer 1

好吧，我明白了，我传递的删除 URL 是错误的，它需要在 URL 本身中传递处理程序。我猜是因为我试图在 x-tmpl 脚本中使用 asp 助手

改变了

DeleteUrl = "https://localhost:7062/" + "Donations/DonationPageSettings/DeleteFile?file=" + newProfileImageFileName + profileImageExtenstion,

到

DeleteUrl = "https://localhost:7062/Donations/DonationPageSettings?file=" + newProfileImageFileName + profileImageExtenstion +"&handler=DeleteFile",