ASP.NET Web 应用程序问题中的引导程序答案

【问题标题】：Bootstrap in ASP.NET Web Application IssueASP.NET Web 应用程序问题中的引导程序
【发布时间】：2020-06-22 14:52:10
【问题描述】：

我正在尝试通过引导程序将一些字形图标添加到我的 Web 应用程序中，但之前没有使用过引导程序，我不明白我应该如何执行此操作。有很多关于如何做到这一点的令人困惑的文章，我关注了一些但没有得到任何结果。到目前为止，我已经使用 NuGet 在我的项目中添加了引导程序。

我查看了我的文件，所有的依赖项和引用都在那里。但是，当我运行我的项目时，字形图标仍然没有出现。我已经在我想显示这些字形图标的页面下方发布了代码。知道我还需要做什么才能让它们正常工作吗？

@page
@model CustomerPageTest.Pages.Customer.ListModel
@{
    ViewData["Title"] = "List";
}

<div>
    <p align="right">
        <a class="btn btn-dark"
           asp-page="./AddCustomer">Add New Customer</a>
    </p>
</div>

<form method="get">
    <div class="form-group">
        <div class="input-group">
            <input type="search" class="form-control" asp-for="SearchTerm" />
            <span class="btn btn-outline-dark">
                <i class="glyphicon glyphicon-search"></i>
            </span>
        </div>
    </div>
</form>

<table class="table">
    @foreach(var customer in Model.Customers)
    {
        <tr>
            <td>@customer.name</td>
            <td>@customer.notes</td>
            <td>
                <a class="btn btn-outline-dark"
                   asp-page="/Assessment/AddAssessment" asp-route-customerId ="@customer.customer_id">
                    <i class="glyphicon glyphicon-plus"></i> 
                </a>
            </td>
        </tr>
    }
</table>

【问题讨论】：

您是否查看了浏览器的网络选项卡以确保所有文件都正常加载？你确定你有正确的标记来加载必要的内容文件吗？我在你的问题中没有看到这一点。
我实际上不确定如何检查所有文件是否正确加载，或者如何检查我是否有正确的标记来加载文件。我该如何检查呢？
Umesh 的回答包括向页面添加正确的标记以加载文件。为了检查文件是否正确加载，您将打开浏览器的开发人员工具到网络选项卡，然后检查以确保所有文件都是从缓存中加载或获得 2XX 范围内的状态代码响应，而不是类似于 404 或500 错误。

标签： c# asp.net-core razor bootstrap-4 web-applications

【解决方案1】：

您需要将下面的 bootstrap.min.css 文件放到您的页面上以显示 glyphicon。

@page
@model CustomerPageTest.Pages.Customer.ListModel
@{
    ViewData["Title"] = "List";
}
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> 
<div>
    <p align="right">
        <a class="btn btn-dark"
           asp-page="./AddCustomer">Add New Customer</a>
    </p>
</div>

<form method="get">
    <div class="form-group">
        <div class="input-group">
            <input type="search" class="form-control" asp-for="SearchTerm" />
            <span class="btn btn-outline-dark">
                <i class="glyphicon glyphicon-search"></i>
            </span>
        </div>
    </div>
</form>

<table class="table">
    @foreach(var customer in Model.Customers)
    {
        <tr>
            <td>@customer.name</td>
            <td>@customer.notes</td>
            <td>
                <a class="btn btn-outline-dark"
                   asp-page="/Assessment/AddAssessment" asp-route-customerId ="@customer.customer_id">
                    <i class="glyphicon glyphicon-plus"></i> 
                </a>
            </td>
        </tr>
    }
</table>

【讨论】：