为什么我的 .NETCore 标签助手不能用于我的 HTML 按钮？答案

【问题标题】：Why aren't my .NETCore tag helpers working for my HTML button?为什么我的 .NETCore 标签助手不能用于我的 HTML 按钮？
【发布时间】：2022-01-07 04:52:43
【问题描述】：

我有一个按钮，我通过按钮在我的控制器中触发一个动作。该按钮具有控制器、路由 ID 和操作的标签助手（见下文）：

（为了可读性插入换行符）

<div class="input-group-append">
    <button
        class="btn btn-outline-secondary"
        type="button"
        asp-controller="Home"
        asp-route-Id="@Model.Project.Id"
        asp-action="UploadDocument"
        id="uploadDocument"
    >
        Upload
    </button>
</div>

这是控制器中的IActionResult：

        //POST - Upload document
        [HttpPost("~/Home/UploadDocument")]
        public IActionResult UploadDocument(int id, IFormFile files)
        {
             //Get and upload file
            if (files != null)
            {
                if (files.Length > 0)
                {
                    //Getting FileName
                    var fileName = Path.GetFileName(files.FileName);
                    //Getting file Extension
                    var fileExtension = Path.GetExtension(fileName);
                    // concatenating  FileName + FileExtension
                    //var newFileName = String.Concat(Convert.ToString(Guid.NewGuid()), fileExtension);                   

                    var objfiles = new Document()
                    {
                        Id = 0,
                        Name = fileName,
                        FileType = fileExtension,
                        ProjectId = id
                    };

                    using (var target = new MemoryStream())
                    {
                        files.CopyTo(target);
                        objfiles.DataFiles = target.ToArray();
                    }

                    _db.Files.Add(objfiles);

                }
            }

            _db.SaveChanges();
            return View(Update(id));
        }

我在UploadDocment 的第一行代码上放了一个断点，然后单击了按钮。没啥事儿。断点从未被击中。我不确定为什么这不起作用。我有：

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

...在我的_ViewImports.cshtml 文件中，标签助手在其他按钮上工作。

【问题讨论】：

标签： c# .net asp.net-mvc asp.net-core asp.net-mvc-5

【解决方案1】：

asp-action... 标签助手用于<a> 和<form> 元素，而不是<button>。
此外，问题的另一部分是<button> 上的type="button"。
- type="button" 表示该按钮在单击时什么都不做。
所以，纠正一些事情：
- 将<button> 更改为type="submit" 以提交父<form> 元素。
- 并将asp-action="" 和asp-controller="" 助手移动到您的<form>。

【讨论】：

这个按钮应该只是删除文档而不提交表单。我想我将不得不使用 ajax 调用来删除文档而不提交表单。
@NerdyDriod 提交表单有什么问题？
客户希望无需提交表单即可上传文件。他们认为他们的用户只需点击按钮将文档添加到现有条目而不是点击“更新”（提交表单）更容易。这是一个荒谬的要求，但没有人听开发者的话......

【解决方案2】：

您需要将<button> 放入<form method="post"></form>。

<form method="post">
    <button class="btn btn-outline-secondary"
            asp-controller="Home"
            asp-route-Id="@Model.Project.Id"
            asp-action="UploadDocument"
            id="uploadDocument">Upload</button>
</form>

生成的html：

结果：

【讨论】：

这个按钮应该只是删除文档而不提交表单。我想我将不得不使用 ajax 调用来删除文档而不提交表单。