易于学习的.NET 6.0和Angular——入门Admin LTE设计——第3部分

最新推荐文章于 2024-06-12 10:01:28 发布

寒冰屋

最新推荐文章于 2024-06-12 10:01:28 发布

阅读量355

点赞数

分类专栏： ASP.NET CORE 架构及框架 web前端文章标签： angular.js javascript admin lte .net6

原文链接：https://www.codeproject.com/Articles/5334995/Easy-to-Learn-NET-6-0-and-Angular-Getting-Starte-3

版权

ASP.NET CORE 同时被 3 个专栏收录

1110 篇文章 54 订阅

订阅专栏

架构及框架

628 篇文章 16 订阅

订阅专栏

web前端

226 篇文章 4 订阅

订阅专栏

dashboard.component.html

bashboard.component.ts

下载源代码 - 261.2 KB

介绍

一直以来，我都计划发布.NET 6.0和Angular系列文章。在本系列中，我计划发表以下文章：

在本文中，我们将详细了解如何开始使用.NET 6.0和独立Angular模板，以使用Admin LTE引导程序设计制作一个简单的网站。

在本文中，我们将使用上一篇文章.NET 6.0和独立Angular模板源来应用Admin LTE设计。请阅读我之前的文章，其中非常详细地逐步解释了开始使用.NET 6.0和独立Angular模板。

我们使用AdminLTE的原因是其开源管理仪表板，它是使用Bootstrap开发的。如果我们想建立一个客户端和管理员类型的网站，那么最好使用AdminLTE管理仪表板，客户端和管理员网站，我们可以说电子商务网站，MES和所有类型的管理网站。

例如，我们可以将购物卡网站视为具有多个用户角色的网站，并且每个角色的仪表板和页面选项可能不同。我已经制作了购物车网站用例的简单演示示例，如下图所示，该图像具有多种用户类型，并且我还添加了购物车网站将具有的基本模块。

用户角色

Admin

超级管理员：超级管理员是购物车用户的主要用户，因为他将拥有购物车网站的所有控制权。有时，超级管理员也可以是开发网站的软件开发团队，也可以是购物车的所有者，以监视和控制所有其他卷。出于安全和安保原因，重要的网站设置和菜单母版将仅由此超级管理员处理。

管理员：管理员可以由超级管理员创建，所有站点控制将由主管理员处理，因为他可以创建员工，还可以接受，删除和监控供应商客户，员工和来宾用户的所有活动。

员工：如果员工是销售人员，那么他可以监控购物车网站的所有销售部分，那么他可以查看所有订单和交货，跟踪和监控交货状态，检查和确认交货是否成功完成。

Client

供应商：供应商可以注册并可以由管理员或超级管理员批准，批准后供应商可以将他们的产品上传到购物车网站，他们可以查看其产品的所有订购详细信息，如已交付，取消，待处理订单详细信息。

客户：客户是将在购物车站点注册，搜索所需商品并进行购物的最终用户，客户可以查看其购物车详细信息，订单历史记录详细信息并跟踪其订购商品的交付状态。客户还可以根据供应商的条件取消订购的物料。

来宾用户：来宾用户是来宾结帐用户，无需注册即可进行购物并登录到购物车站点。

在线购物网站还将具有基本模块，如用户模块，用于创建和管理用户，创建角色并根据角色管理用户。Products作为管理员，员工或供应商可以根据类别添加和管理他们的项目，包括项目详细信息，如销售成本，项目图像，项目交付成本等，除此之外，还有一些更基本的菜单，如订单管理，销售管理，交付和跟踪管理等。

所以在这里，我们可以看到每个用户角色，仪表板对于管理员和客户来说也可以是不同的，为了使网站的外观和感觉更加标准，我们可以使用AdminLTE管理仪表板Bootstrap设计，我们的网站也可以轻松访问多平台，如手机，平板电脑和任何具有互联网的PC，随时随地轻松访问。

背景

Visual Studio 2022
Node.js——如果您没有Node.js请安装Node.js（下载链接）
Angular CLI（下载链接）
Admin LTE管理仪表板模板（下载链接)

Admin LTE

从AdminLTE网站链接，我们可以下载最新的AdminLTE Bootstrap设计文档。

下载后，解压缩AdminLTE文件夹，我们可以看到所有需要的页面，插件，脚本，css和演示页面将添加到文件夹中。

要检查ADMINLTE页面，我们可以从文件夹中打开演示页面作为 Index.html、index2.html、index3.html以及具有不同主题的iframe HTML。如果我们打开任何演示HTML页面，我们可以看到AdminLTE设计的演示，如下所示，我们打开了仪表板，左侧有菜单和一些插件，可以向最终用户展示仪表板更多内容。

使用代码

注意：我们将使用上一篇文章源代码，逐步为项目应用AdminLTE引导模板。请注意，我将把所需的文件夹和文件从下载的 AdminLTE 文件夹复制到我们的Angular和.NET 6.0 Angular独立模板项目中。

步骤 1

在assets文件夹和内容文件夹中创建内容文件夹，再创建两个文件夹SiteImg和UITemplate。在UITemplate内，我们将复制AdminLTE的所有dist，JavaScript和Plugin文件夹，并在SiteImage文件夹中用于保存我们用于网站的图像。

步骤 2

将dist和插件文件夹从下载的AdminLTE文件夹拖放到我们的Angular项目UITemplate文件夹中。

步骤 3

接下来，您可以从 AdminLTE 文件夹中打开编辑器中的Index.html并复制标题链接和脚本部分。

步骤 4

现在，让我们首先设计我们的在线购物车仪表板页面，我们需要将css和JavaScript插件添加到我们的Angular索引页面。

从Angular项目中打开Index.html文件。

将标题和脚本部分粘贴到我们的Angular Index.html文件中。

<!DOCTYPE html>
<html lang="kr">

<head>
    <meta charset="utf-8" />

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv=Content-Type content="text/html; charset=windows-1252">
    <title>LINK5 BOT2U </title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" href="assets/UITemplate/dist/css/video-js.css">
    <link rel="stylesheet" href="assets/UITemplate/dist/css/video-js.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" 
     href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,
     700&display=fallback">
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" 
     href="assets/UITemplate/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="assets/UITemplate/dist/css/adminlte.min.css">
    <link rel="stylesheet" 
     href="assets/UITemplate/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">

    <!-- daterange picker -->
    <link rel="stylesheet" 
     href="assets/UITemplate/plugins/daterangepicker/daterangepicker.css">
    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" 
     href="assets/UITemplate/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <!-- Bootstrap Color Picker -->
    <link rel="stylesheet" 
     href="assets/UITemplate/plugins/bootstrap-colorpicker/css/
     bootstrap-colorpicker.min.css">
    <!-- Tempusdominus Bootstrap 4 -->
    <link rel="stylesheet" 
     href="assets/UITemplate/plugins/tempusdominus-bootstrap-4/
     css/tempusdominus-bootstrap-4.min.css">
    <!-- Select2 -->
    <link rel="stylesheet" href="assets/UITemplate/plugins/
     select2/css/select2.min.css">
    <link rel="stylesheet" 
     href="assets/UITemplate/plugins/
     select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <!-- Bootstrap4 Duallistbox -->
    <link rel="stylesheet" 
     href="assets/UITemplate/plugins/bootstrap4-duallistbox/
           bootstrap-duallistbox.min.css">
    <!-- BS Stepper -->
    <link rel="stylesheet" 
     href="assets/UITemplate/plugins/bs-stepper/css/bs-stepper.min.css">
    <!-- dropzonejs -->
    <link rel="stylesheet" 
     href="assets/UITemplate/plugins/dropzone/min/dropzone.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="assets/UITemplate/dist/css/adminlte.min.css">

    <link rel="stylesheet" 
     href="assets/UITemplate/plugins/jquery-ui/jquery-ui.css" />
    <link rel="stylesheet" 
     href="assets/UITemplate/js/jqueryconfirm/js/custom.jqueryconfirm.js" />

    <link rel="stylesheet" 
     href="assets/UITemplate/js/jqueryconfirm/dist/jquery-confirm.min.css" />
    <!-- SweetAlert2 -->
    <link rel="stylesheet" 
     href="assets/UITemplate/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
    <!-- Toastr -->
    <link rel="stylesheet" href="assets/UITemplate/plugins/toastr/toastr.min.css">

</head>
<body >
    <app-root>Loading...</app-root>

</body>
</html>

<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<!-- jQuery -->
<script asp-append-version="true" 
 src="assets/UITemplate/plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script asp-append-version="true" 
 src="assets/UITemplate/plugins/jquery-ui/jquery-ui.min.js"></script>

<script asp-append-version="true" 
 src="assets/UITemplate/plugins/jquery-ui/jquery-ui.js"></script>
<script asp-append-version="true" 
 src="assets/UITemplate/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Bootstrap 4 -->
<script asp-append-version="true" 
 src="assets/UITemplate/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
    $.widget.bridge('uibutton', $.ui.button)
      
    $(function () { 
        var Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000
        });
    }
</script>

<script src="https://unpkg.com/systemjs@0.19.47/dist/system.js">
</script>
<!-- Bootstrap 4 -->
<script src="assets/UITemplate/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- overlayScrollbars -->
<script src=
"assets/UITemplate/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js">
</script>
<!-- AdminLTE App -->
<script src="assets/UITemplate/dist/js/adminlte.js"></script>

<!-- daterangepicker -->
<script src="assets/UITemplate/plugins/moment/moment.min.js"></script>
<script src="assets/UITemplate/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="assets/UITemplate/plugins/tempusdominus-bootstrap-4/js/
 tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="assets/UITemplate/plugins/summernote/summernote-bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="assets/UITemplate/plugins/overlayScrollbars/js/
             jquery.overlayScrollbars.min.js"></script>

<!-- daterangepicker -->
<script src="assets/UITemplate/plugins/moment/moment.min.js"></script>
<script src="assets/UITemplate/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="assets/UITemplate/plugins/tempusdominus-bootstrap-4/js/
             tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="assets/UITemplate/plugins/summernote/summernote-bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="assets/UITemplate/plugins/overlayScrollbars/js/
             jquery.overlayScrollbars.min.js"></script>

<script src="assets/UITemplate/plugins/toastr/toastr.min.js"></script>
<script src="assets/UITemplate/js/jqueryconfirm/dist/jquery-confirm.min.js"></script>
<script src="assets/UITemplate/js/jqueryconfirm/js/custom.jqueryconfirm.js"></script>

<!-- Select2 -->
<script src="assets/UITemplate/plugins/select2/js/select2.full.min.js"></script>
<!-- Bootstrap4 Duallistbox -->
<script src="assets/UITemplate/plugins/bootstrap4-duallistbox/
             jquery.bootstrap-duallistbox.min.js"></script>
<!-- InputMask -->
<script src="assets/UITemplate/plugins/moment/moment.min.js"></script>
<script src="assets/UITemplate/plugins/inputmask/jquery.inputmask.min.js"></script>
<!-- date-range-picker -->
<script src="assets/UITemplate/plugins/daterangepicker/daterangepicker.js"></script>
<!-- bootstrap color picker -->
<script src="assets/UITemplate/plugins/bootstrap-colorpicker/js/
             bootstrap-colorpicker.min.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="assets/UITemplate/plugins/tempusdominus-bootstrap-4/js/
             tempusdominus-bootstrap-4.min.js"></script>
<!-- Bootstrap Switch -->
<script src="assets/UITemplate/plugins/bootstrap-switch/js/bootstrap-switch.min.js">
</script>
<!-- BS-Stepper -->
<script src="assets/UITemplate/plugins/bs-stepper/js/bs-stepper.min.js"></script>
<!-- dropzonejs -->
<script src="assets/UITemplate/plugins/dropzone/min/dropzone.min.js"></script>

<!-- SweetAlert2 -->
<script src="assets/UITemplate/plugins/sweetalert2/sweetalert2.min.js"></script>
<!-- Toastr -->
<script src="assets/UITemplate/plugins/toastr/toastr.min.js"></script>

步骤 5

现在，让我们在Angular App文件夹中添加页眉、导航、页脚和仪表板文件夹。

在仪表板页面中，我们将创建主仪表板登录设计页面，在布局文件夹中，我们添加页脚、顶部导航栏和购物车网站的侧边菜单栏部分。

现在，让我们在footer文件夹中添加页footer组件，并添加以下HTML和组件代码。

<footer class="main-footer">
  <img src="assets/Content/SiteImg/logo.png" alt="Shanu Cart"
       style="height:36px;width:36px">&nbsp;
  <strong>Copyright &copy; 2022-2023 .</strong> 
  <div class="float-right d-none d-sm-inline-block">  
    <strong>Shanu  <b>Cart</b> </strong> - Shop your need's from Anywhere Anytime
  </div>
</footer>

import { Component, Inject } from '@angular/core'; 
@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html'
})
export class FooterComponent {

}

现在，让我们为购物车网站添加顶部导航栏，让我们在navbar文件夹中添加组件，并添加以下html和组件代码。

注意：在navbar中，我还为我们的购物车网站添加了语言选择选项。在下一篇文章中，我们将详细了解如何为我们的Angular项目添加多语言选项。

<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-dark" style="height:40px;">
  <!-- Left navbar links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" data-widget="pushmenu" href="#" role="button" 
       enableRemember="true"><i class="fas fa-bars"></i></a>
    </li>
    <li class="nav-item">
      <h5 class="nav-link">
        <i class="fa fa-bug"></i>
        <strong>Shanu  <b>Cart</b> </strong>
      </h5>
    </li>
  </ul>

  <!-- Right navbar links -->
  <ul class="navbar-nav ml-auto"> 
    <li class="nav-item dropdown">
      <a class="nav-link" asp-controller="Home" 
      asp-action="Index">  Welcome Shanu !</a>
    </li>
    <!-- Messages Dropdown Menu -->
    <li class="nav-item dropdown">
      <a class="nav-link" data-toggle="dropdown" href="#">
        <i class="fas fa-language"></i> 
      </a>
      <div class="dropdown-menu dropdown-menu-lg-right dropdown-menu-right" 
           style="max-width: 20px;width:20px">
        <a href="#" class="dropdown-item">
          <!-- Message Start -->
          <div class="media">
            <img src="../../../../assets/Content/SiteImg/KOR.png" 
             alt="Korean" class="img-size-32 mr-lg-4 img-circle" 
             style="height:24px;width:24px;">
            <div class="media-body">
              <h3 class="dropdown-item-title">
                KOREA
              </h3>
            </div>
          </div>
          <!-- Message End -->
        </a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item ">
          <!-- Message Start -->
          <div class="media">
            <img src="../../../../assets/Content/SiteImg/ENG.png" 
             alt="English" class="img-size-32 mr-lg-4 img-circle" 
             style="height:24px;width:24px;">
            <div class="media-body">
              <h3 class="dropdown-item-title ">
                ENGLISH
              </h3>
            </div>

          </div>
          <!-- Message End -->
        </a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-widget="fullscreen" 
      href="#" role="button">
        <i class="fas fa-expand-arrows-alt"></i>
      </a>
    </li> 
    <li class="nav-item">
      <a class="nav-link" data-widget="pushmenu" href="#" role="button" 
       enableRemember="true"><i class="fas fa-bars"></i></a>
    </li>
  </ul>
</nav>

import { Component, Inject } from '@angular/core';  
@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html'
})
export class NavBarComponent {
  
}

现在，让我们为购物车网站添加主菜单。让我们在侧边栏文件夹中添加Angular组件，并添加以下HTML和组件代码。

注意：出于演示目的，我制作了静态菜单。实际的管理员和客户端模块菜单将是动态的，并根据数据库中的用户登录角色加载。在本系列文章的后面，我将尝试添加一篇新文章，该文章解释了如何根据购物车网站中的角色制作动态菜单和显示。

<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
  <!-- Brand Logo -->
  <a class="brand-link" [routerLink]="['/dashboard']">

    <img src="../../../../assets/Content/SiteImg/logo.png" alt="Shanu Cart" 
     class="brand-image" style="opacity: .8">
    <span class="brand-text font-weight-light">Shanu Cart</span>
  </a>
  <!-- Sidebar -->
  <div class="sidebar">
    <!-- Sidebar Menu -->
    <nav class="mt-2">
      <ul class="nav nav-pills nav-sidebar flex-column" 
       data-widget="treeview" role="menu" data-accordion="false">
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['/dashboard']">
            <i class="nav-icon fas fa-th"></i>
            <p>
              Dashboard
              <span class="right badge badge-danger">New</span>
            </p>
          </a>
        </li>
        <li class="nav-item">
          <!--<a class="nav-link" [routerLink]="['/fetch-data']">-->
          <a class="nav-link" [routerLink]="['/home']">
            <i class="nav-icon fas fa-th"></i>
            <p>
              About Us
            </p>
          </a>
        </li>
        <li class="nav-item">
          <!--<a class="nav-link" [routerLink]="['/fetch-data']">-->
          <a class="nav-link" [routerLink]="['/items']">
            <i class="nav-icon fas fa-th"></i>
            <p>
              Item Sales
              <span class="right badge badge-danger">New</span>
            </p>
          </a>
        </li>

        <li class="nav-item">
          <a class="nav-link" [routerLink]="['/']">
            <i class="nav-icon fas fa-copy"></i>
            <p>
              Products
              <i class="fas fa-angle-left right"></i>
              <span class="badge badge-info right">3</span>
            </p>
          </a>
          <ul class="nav nav-treeview">
            <li class="nav-item">
              <a class="nav-link" [routerLink]="['/']">
                <i class="far fa-circle nav-icon"></i>
                <p>Category</p>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" [routerLink]="['/']">
                <i class="far fa-circle nav-icon"></i>
                <p>Add Item</p>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" [routerLink]="['/']">
                <i class="far fa-circle nav-icon"></i>
                <p>Search Item</p>
              </a>
            </li>

          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['/']">
            <i class="nav-icon fas fa-copy"></i>
            <p>
              Orders
              <i class="fas fa-angle-left right"></i>
              <span class="badge badge-info right">3</span>
            </p>
          </a>
          <ul class="nav nav-treeview">
            <li class="nav-item">
              <a class="nav-link" [routerLink]="['/']">
                <i class="far fa-circle nav-icon"></i>
                <p>Order Details</p>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" [routerLink]="['/']">
                <i class="far fa-circle nav-icon"></i>
                <p>Address Book</p>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" [routerLink]="['/']">
                <i class="far fa-circle nav-icon"></i>
                <p>Delivery Status</p>
              </a>
            </li>

          </ul>
        </li>
      </ul>
    </nav>
    <!-- /.sidebar-menu -->
  </div>
  <!-- /.sidebar -->
</aside>

import { Component, Inject } from '@angular/core';
@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html'
})
export class SideBarComponent {

}

步骤 6

Dashboard组件

现在让我们设计管理部分主登陆仪表板页面。在这里，我做了一个非常简单的仪表板设计，显示今天的总订单，今天的交付项目，今天的销售和今天的退货项目。我们还添加了一个HTML表，以按项目代码显示当月项目销售额。

注意：在我们之前的系列文章中，我已经解释了如何添加WEB API控制器，然后在我们的Angular应用程序中绑定WEB API结果。在本文中，我完成了相同的格式，并添加了WEB API以返回项目销售计数，并在仪表板中对结果进行了分组。

在本系列的后面部分，我们将通过使用数据库连接并使用.NET 6和Angular独立模板执行crud操作来详细了解。

dashboard.component.html

<section class="content">
  <br />
  <div class="container-fluid">
    <div>
      <div class="row">
        <div class="col-12 col-sm-6 col-md-3">

          <div class="info-box mb-3 shadow">
            <span class="info-box-icon bg-info elevation-1">
              <i class="fa fa-cart-arrow-down"></i>
            </span>

            <div class="info-box-content">
              <span class="info-box-text">Todays Total Orders</span>
              <span class="info-box-number">
                5000

              </span>
            </div>
            <div class="icon">
              <i class="ion ion-bag"></i>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-12 col-sm-6 col-md-3">
          <div class="info-box mb-3 shadow">
            <span class="info-box-icon bg-danger elevation-1">
              <i class="fa fa-truck"></i>
            </span>

            <div class="info-box-content">
              <span class="info-box-text">Todays Delivered Items</span>
              <span class="info-box-number">230</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <!-- fix for small devices only -->
        <div class="clearfix hidden-md-up"></div>

        <div class="col-12 col-sm-6 col-md-3">
          <div class="info-box mb-3 shadow">
            <span class="info-box-icon bg-success elevation-1">
              <i class="fa fa-university"></i>
            </span>

            <div class="info-box-content">
              <span class="info-box-text">Todays Sales </span>
              <span class="info-box-number">23,000 $</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-12 col-sm-6 col-md-3">
          <div class="info-box mb-3 shadow">
            <span class="info-box-icon bg-warning elevation-1">
              <i class="fa fa-angle-double-left" aria-hidden="true"></i>
            </span>

            <div class="info-box-content">
              <span class="info-box-text">Todays Returned Items </span>
              <span class="info-box-number">13</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
      <!-- Main row -->
      <div class="row">
        <div class="col-md-8">
          <div class="card card-outline card-success">
            <div class="card-header">
              <h3 class="card-title">Item Sales Count by current Month </h3>
              <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                  <i class="fas fa-minus"></i>
                </button>
              </div>
            </div>

            <div class="card-body" style="display: flex; justify-content: center;">
              <table class="table table-bordered table-striped" *ngIf="itemsdetails">
                <thead>
                  <tr>
                    <th> Item Code </th>
                    <th> sale Count </th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let itemdetail of itemsdetails">
                    <td>{{ itemdetail.itemCode }}</td>
                    <td>{{ itemdetail.saleCount }}</td>
                  </tr>
                </tbody>
              </table>
            </div>

          </div>
        </div>

        <div class="col-md-4">
          <div class="card card-outline card-primary">
            <div class="card-header">
              <h3 class="card-title">Shanu Cart Logo</h3>
              <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                  <i class="fas fa-minus"></i>
                </button>
              </div>
              <!-- /.card-tools -->
            </div>
            <!-- /.card-header -->
            <div class="card-body" style="display: flex; justify-content: center;">
              <img src="../../assets/Content/SiteImg/logo.png" style="width:60%;" />
            </div>
          </div>
        </div>
      </div>
      <!-- /.row (main row) -->
    </div><!-- /.container-fluid -->
  </div>
</section>

bashboard.component.ts

import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
})
export class DashboardComponent {
  public itemsdetails: ItemDetails[] = [];

  constructor(http: HttpClient) {
    http.get<ItemDetails[]>('/ItemDetails').subscribe(result => {
      this.itemsdetails = result;
    }, error => console.error(error));
} 
}
interface ItemDetails {
  itemCode: string;
  saleCount: number;
}

注意

将上述所有组件和路由添加到我们的app.module中。

步骤 7

app.component.html

现在让我们将以下代码添加到我们的应用程序组件中，就像这里一样，我们添加了要在主应用程序组件中显示的所有导航栏、侧边栏、页脚。

<body class="dark-mode sidebar-mini sidebar-collapse">
  <app-navbar></app-navbar>
  <app-sidebar></app-sidebar>

  <div class="content-wrapper">
    <nav style="background-color: #49b0fa;height:2px ;">
    </nav>
    <router-outlet></router-outlet>
  </div>
  <app-footer></app-footer>
</body>

注意：我还添加了另一个名为项目的应用程序组件，并在该页面中绑定了项目销售计数，并在侧面菜单单击中显示我们的管理仪表板页面。

步骤 8

构建和运行

现在是时候查看我们的管理仪表板页面了。当我们运行应用程序时，我们可以看到如下所示的仪表板页面。在这里，我将来自WEB API的项目销售详细信息和其余详细信息显示为静态内容，在本系列的后面，我们可以看到如何绑定数据库中的所有结果。

当我们单击链接中的“项目销售”菜单时，我们会显示当月的“项目销售详细信息”。菜单的其余部分我将其作为演示目的的静态。

兴趣点

希望这篇文章能帮助你理解如何使用Visual Studio 2022开始ASP.NET Core和Angular独立项目，并使用Admin LTE Bootstrap模板设计我们的.NET 6应用程序。在下一部分中，我们将更详细地了解如何使用ASP.NET Core和Angular进行Admin LTE设计。