Thiết kế website giá rẻ

Question

Who can help me create a favorite list of teams for example that I can then display on another page and do this with local storage? The list comes from an SQL database.

At the end of the list (table) there is a heart icon, which you can click on. When you click on the heart icon it changes into another icon. But when I refresh the page I want to see the selected items again. Also, when I open another page, I get a list of my selected items.

teams.cshtm

@page
@model organizer.Pages.TeamsModel
@using Microsoft.AspNetCore.Http
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout2";
}
<div class="eigentabel">
    <h3 class="text-end"> @Model.variabelTNaam</h3>
    @foreach (var itemD in Model.listDivisieD)
    {           
    //hier zetten we de titel op de pagina
        <span><h2>@itemD.naam </h2></span>
        <table id="" class="display">
        @{
        Model.nummer = 0;  
        }
        <thead>
            <tr>
                    <th style="width: 2%">#</th>
                <th style ="text-align: center; width: 2%"></th>
                <th style="text-align: left; width: 10%">Team name</th>
                <th style="width: 5%">Country</th>
                <th style="width: 5%">Payed on</th>
                <th style="width: 5%">Like</th>
            </tr>
        </thead>
                <tbody>

            @foreach (var itemT in Model.listTeamT)
            {
            if (itemT.divisie == @itemD.naam)
            {
            <tr>
            @{
            Model.nummer = Model.nummer + 1; 
            }

                    <td>@Model.nummer</td>
                    <td><img src="https://@itemT.vlag" width="20" height="13"></td>
                    <td><a asp-page-handler="Team" asp-route-varTeamId="@itemT.id">@itemT.naam</a></td>
                    <td>@itemT.land</td>
                    <td>@itemT.betaling</td>
                    <td><i onclick="myFunction(this)" id="hartje" class="fa fa-heart-o"></i></td>
            </tr>
            }
        }
        </tbody>
        </table>
    }
</div>

teams.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Data.SqlClient;

namespace organizer.Pages
{
    public class TeamsModel : PageModel
    {
        public String? variabelTNaam;
        public List<TeamInfoT> listTeamT = new();
        public List<DivisieInfoD> listDivisieD = new();
        public string? sessionvarTorId;
        public int nummer;
        private readonly IConfiguration _configuration;

        //Dit moeten we hier zetten en de variabele instellen
        public void OnGetTeamAsync(Guid? varTeamId)
        {
            HttpContext.Session.SetString("SessionTeamId", varTeamId.ToString());
            Response.Redirect("/Team_detail"); 
    }

        public TeamsModel(IConfiguration configuration)
        {
            _configuration = configuration;
        }
        public void OnGet()
        {
        //Set value in Session object.
            if (HttpContext.Session.GetString("SessionTorId") != null)
                sessionvarTorId = HttpContext.Session.GetString("SessionTorId");
                
            try
            {
                string connString = _configuration.GetConnectionString("DefaultConnection");
                using SqlConnection connection = new(connString);
                connection.Open();
                String sqlD = "SELECT  .....";
                String sqlT = "SELECT ...";
                String sql1 = "SELECT ...";

                using SqlCommand command1 = new(sql1, connection);
                variabelTNaam = (string)command1.ExecuteScalar();

                using (SqlCommand commandD = new(sqlD, connection))
                {
                    using SqlDataReader readerD = commandD.ExecuteReader();
                    while (readerD.Read())
                    {
                        DivisieInfoD divisieInfoD = new()
                        {
                            id = readerD.GetGuid(0),
                            naam = readerD.GetString(2),
                            maxTeams = readerD.GetInt32(14),
                        };

                        listDivisieD.Add(divisieInfoD);
                    }
                }

                using SqlCommand commandT = new(sqlT, connection);
                { 
                    using SqlDataReader readerT = commandT.ExecuteReader();
                    while (readerT.Read())
                    {
                        TeamInfoT teamInfoT = new()
                        {
                            id = readerT.GetGuid(0),
                            naam = readerT.GetString(1),
                            land = readerT.GetString(2),
                            vlag = readerT.GetString(3).ToString().ToLower().Replace(" ", "_"),
                            betaling = readerT.IsDBNull(4) ? "-" : readerT.GetDateTime(4).ToString("dd-MMM-yyyy"),
                            divisie = readerT.GetString(5),
                        };
                    
                        listTeamT.Add(teamInfoT);
                    }
                }
            }
            catch (Exception ex)
            {
                Console.WriteLine("NOT Connected"); 
                Console.WriteLine("Exception: connectie NIET ok " + ex.Message);
            }
        }
    }
    public class DivisieInfoD
    {
        public String? naam;
        public Guid? id;
        public int maxTeams;
    }
    public class TeamInfoT
    {
        public Guid id;
        public String? naam;
        public String? land;
        public String? vlag;
        public String? betaling;
        public String? divisie;
    }
}

_layout2.cshtml

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

    <!-- DataTables -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" href="~/js/datatables.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" />
    <link href="~/css/site.css" rel="stylesheet" />
    <!-- Font Awesome CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

    
<body>
    <header>
     <div class="fixed-top"> 
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm bg-primary navbar-dark border-bottom box-shadow mb-3 ">
            <div class="container-fluid">
                <div class="navbar-left">
                    <a class="navbar-brand"  target="_blank">                     
                    </a>
                </div>
                <div class="navbar-right">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                
                    <div class="navbar-collapse collapse d-sm-inline-flex justify-content-end">
                        <ul class="navbar-nav flex-grow-1">
                            <li class="nav-item">
                                <a class="nav-link text-light " style="margin-left:1em" asp-area="" asp-page="/Index"><span class="fa fa-home"></span> Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-light " style="margin-left:1em" asp-area="" asp-page="/Tornooi_Algemeen"><span class="fa fa-dashboard"></span> Dashboard</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
    </div>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            ©  - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
    </footer>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    <script type="text/javascript">
        //function changing heart
        function myFunction(x) {
            x.classList.toggle("fa-thumbs-up");
            window.localStorage.setItem("FavoriteTeam", "test");
        }

        // Initialize the DataTable
        $(document).ready(function () {
            $('table.display').DataTable({
                // Set the number of rows to be
                // displayed per page on the DataTable
                pageLength: 25,
                lengthMenu: [25, 50]
            });
        });

        // Initialize the DataTable
        $(document).ready(function () {
            $('table.display2').DataTable({
 
        "dom": "<'row'<'col-lg-10 col-md-10 col-xs-12'f><'col-lg-2 col-md-2 col-xs-12'l>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",

                // Set the number of rows to be
                // displayed per page on the DataTable
                pageLength: 25,
                lengthMenu: [25, 50, 100]
            });
        });
    </script>

    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-4CPZWF653F"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-4CPZWF653F');
    </script>



    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    @await RenderSectionAsync("Scripts", required: false)

</body>
</html>

Thiết kế website giá rẻ

Danh mục

ASP.net core Razoepage Favorite list with localstorage