Font Awesome 无法识别元素

Question

我创建 ASP.NET CORE MVC 2.2 应用程序，一个有趣的部分是当我创建 fontawesome 时无法识别任何操作（编辑、详细信息、删除）我将尝试解释我的意思。我的模型带有 ID 和 NAME 以及控制器动作

型号

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace Svecanosti.Models
{
    public class CategoryEvent
    {
        public int Id { get; set; }

        [Required]
        public string  Name { get; set; }
    }
}

控制器

using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Svecanosti.Data;
using Svecanosti.Models;

namespace Svecanosti.Controllers
{
    [Area("Admin")]
    public class CategoryEventController : Controller
    {
        public readonly ApplicationDbContext _db;

        public CategoryEventController(ApplicationDbContext db)
        {
            _db = db;
        }

        public IActionResult Index()
        {
            return View(_db.CategoryEvents.ToList());
        }


        public IActionResult Create()
        {
            return View();
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create(CategoryEvent categoryEvent)
        {
            if (ModelState.IsValid)
            {
                _db.Add(categoryEvent);
                await _db.SaveChangesAsync();
                return RedirectToAction(nameof(Index));
            }
            return View(categoryEvent);
        }


        //GET Edit Action method
        public async Task<IActionResult> Edit(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }
            var categoryEvent = await _db.CategoryEvents.FindAsync(id);
            if (categoryEvent == null)
            {
                return NotFound();
            }
            return View(categoryEvent);
        }

        //POST Edit Action Method
        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Edit(int id, CategoryEvent categoryEvent)
        {
            if (id != categoryEvent.Id)
            {
                return NotFound();
            }

            if (ModelState.IsValid)
            {
                _db.Update(categoryEvent);
                await _db.SaveChangesAsync();
                return RedirectToAction(nameof(Index));
            }
            return View(categoryEvent);
        }

        //GET Details Action method
        public async Task<IActionResult> Details(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }
            var categoryEvent = await _db.CategoryEvents.FindAsync(id);
            if (categoryEvent == null)
            {
                return NotFound();
            }
            return View(categoryEvent);
        }
    }
}

在我的索引视图中，我为按钮添加了局部视图（如下图）

@model int
@*
    For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@

<td style="width:150px">
    <div class="btn-group" role="group">
        <a type="button" class="btn btn-primary" href="@Url.Action("Edit/"+Model)">
            <i class="fas fa-edit"></i>
        </a>
        <a type="button" class="btn btn-success" href="@Url.Action("Details/"+Model)">
            <i class="far fa-list-alt"></i>
        </a>
        <a type="button" class="btn btn-danger" href="@Url.Action("Delete/"+Model)">
            <i class="fas fa-trash-alt"></i>
        </a>
    </div>
</td>

在我的 Index.cshtml 中，我称之为局部视图，当我点击编辑事件时，没有任何反应。我尝试调试，当我在我的编辑操作结果中放置断点时，编译器没有进入功能。当我检查控制台时，我看到这条消息

[Deprecation] '-webkit-appearance: button' for a is deprecated and will be removed in M79, around December 2019. See https://www.chromestatus.com/features/5070237827334144 for more details.

我在我的 Layout.cshtml fontawesome 中添加了

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Svecanosti.com</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
        <link href="~/fontawesome/css/all.css" rel="stylesheet" />
        <link href="~/fontawesome/css/brands.css" rel="stylesheet" />
        <link href="~/fontawesome/css/fontawesome.css" rel="stylesheet" />
        <link href="~/fontawesome/css/regular.css" rel="stylesheet" />
        <link href="~/fontawesome/css/solid.css" rel="stylesheet" />
        <link href="~/fontawesome/css/svg-with-js.css" rel="stylesheet" />
        <link href="~/fontawesome/css/v4-shims.css" rel="stylesheet" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
              crossorigin="anonymous"
              integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" />
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    </environment>
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
            <a class="navbar-brand" href="#">Svecanosti.com</a>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item"><a class="nav-link" asp-area="Admin" asp-controller="CategoryEvent" asp-action="Index">Event Category</a></li>
                </ul>

            </div>
            <div>
                <partial name="_LoginPartial" />
            </div>
        </nav>
    </header>
    <div class="container">
        <partial name="_CookieConsentPartial" />
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2019 - Svecanosti.com - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>

    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
        </script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o">
        </script>
    </environment>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>

当我在以下步骤中创建视图时，一切正常

现在有人知道问题出在哪里吗？我以前从未遇到过这种情况，我认为问题出在我的部分观点和 fontawesome 但不是 100% 确定。

Answer 1

您可以在浏览器中使用 F12 检查它是否为您的 <a> 标签生成正确的 href。

您似乎没有正确使用@Url.Action()，将您的局部视图更改为：

@model int

<td style="width:150px">
    <div class="btn-group" role="group">
        <a type="button" class="btn btn-primary" href="@Url.Action("Edit",new { id = Model })">
            <i class="fas fa-edit"></i>
        </a>
        <a type="button" class="btn btn-success" href="@Url.Action("Details",new { id = Model })">
            <i class="far fa-list-alt"></i>
        </a>
        <a type="button" class="btn btn-danger" href="@Url.Action("Delete",new { id = Model})">
            <i class="fas fa-trash-alt"></i>
        </a>
    </div>
</td>

Font Awesome 无法识别元素

Fontawesome doesnt recognize elements

font-awesome

asp.net-core-mvc