ASP.NET Core Razor page favorite list with localstorage

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 a 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.cshtml:

@page
@model organizer.Pages.TeamsModel
@using Microsoft.AspNetCore.Http
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers

@{
    Layout = "_Layout2";
}


     @Model.variabelTNaam
    @foreach (var itemD in Model.listDivisieD)
    {           
    //hier zetten we de titel op de pagina
        @itemD.naam 
        
        @{
        Model.nummer = 0;  
        }
        

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

                    
            }
        }
        
            
                    #
                
                Team name
                Country
                Payed on
                Like
            
        
                @Model.nummer
                    
                    @itemT.naam
                    @itemT.land
                    @itemT.betaling
                    
            
        
    }

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 listTeamT = new();
        public List 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:




    
    
    @ViewData["Title"] - TEST

    
    
    
    
    
    
    
    

   

    
      
        
            
                
                                         
                    
                
                
                
                
                    
                        
                            
                                 Home
                            
                            
                                 Dashboard
                            
                        
                    
                
            
        
    
    
    
        
            @RenderBody()
        
    

    
        
            ©  - Privacy
        
    

    
    
    

    

    
    
    



    

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

Jalpa Panchal · Accepted Answer

You could try below code:

Data/ApplicationDbContext.cs:

using Microsoft.EntityFrameworkCore;
using System.Text.Json.Serialization;

namespace FavoriteTeams.Data
{
    public class ApplicationDbContext : DbContext
    {
        public ApplicationDbContext(DbContextOptions options)
               : base(options)
        {
        }

        public DbSet Teams { get; set; }
        public DbSet Divisions { get; set; }
    }

    public class Team
    {
        public Guid Id { get; set; }
        public string Name { get; set; }
        public string Country { get; set; }
        public string Flag { get; set; }
        public DateTime? Payment { get; set; }
        public Guid DivisionId { get; set; }

        [JsonIgnore]
        public Division Division { get; set; }
    }

    public class Division
    {
        public Guid Id { get; set; }
        public string Name { get; set; }
        public int MaxTeams { get; set; }

        [JsonIgnore]
        public ICollection Teams { get; set; }
    }

}

Data/DbInitializer.cs:

using Microsoft.EntityFrameworkCore;

namespace FavoriteTeams.Data
{
    public class DbInitializer
    {
        public static void Initialize(IServiceProvider serviceProvider)
        {
            using (var context = new ApplicationDbContext(
                serviceProvider.GetRequiredService>()))
            {
                if (context.Divisions.Any() || context.Teams.Any())
                {
                    return;   // DB has been seeded
                }

                var divisions = new Division[]
                {
                       new Division { Id = Guid.NewGuid(), Name = "Division 1", MaxTeams = 10 },
                       new Division { Id = Guid.NewGuid(), Name = "Division 2", MaxTeams = 10 }
                };

                foreach (var d in divisions)
                {
                    context.Divisions.Add(d);
                }

                context.SaveChanges();

                var teams = new Team[]
                {
                       new Team { Id = Guid.NewGuid(), Name = "Team 1", Country = "Country 1", Flag = "flag_url_1", Payment = DateTime.Now, DivisionId = divisions[0].Id },
                       new Team { Id = Guid.NewGuid(), Name = "Team 2", Country = "Country 2", Flag = "flag_url_2", Payment = DateTime.Now, DivisionId = divisions[1].Id }
                };

                foreach (var t in teams)
                {
                    context.Teams.Add(t);
                }

                context.SaveChanges();
            }
        }
    }

}

Pages/Shared/_Layout.cshtml:




    
    
    @ViewData["Title"] - FavoriteTeams
   @*   *@
    
    

    
    
    
    
    
    



    
        
            
                FavoriteTeams
                
                
                    
                        
                            Home
                        
                        
                            Privacy
                        
                    
                
            
        
    
    
        
            @RenderBody()
        
    

    
        
            © 2024 - FavoriteTeams - Privacy
        
    

    @* 
    
     *@

    
    
    
    
    
    


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

Pages/Teams.cshtml:

@page
@model FavoriteTeams.Pages.TeamsModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@{
    Layout = "_Layout";
}


    Teams Overview
    @foreach (var division in Model.Divisions)
    {
        @division.Name 
        
                @{
                    var num = 0;
                }
                @foreach (var team in Model.Teams.Where(t => t.DivisionId == division.Id))
                {
                    
                }
            
            
                
                    #
                    
                    Team name
                    Country
                    Payed on
                    Like
                
            
            
                        @(++num)
                        
                        @team.Name
                        @team.Country
                        @(team.Payment.HasValue ? team.Payment.Value.ToString("dd-MMM-yyyy") : "-")
                        
                    
        
    }


@section Scripts {
    
}

Teams.cshtml.cs:

using FavoriteTeams.Data;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;

namespace FavoriteTeams.Pages
{
    public class TeamsModel : PageModel
    {
        private readonly ApplicationDbContext _context;

        public TeamsModel(ApplicationDbContext context)
        {
            _context = context;
        }

        public IList Teams { get; set; }
        public IList Divisions { get; set; }

        public async Task OnGetAsync()
        {
            Teams = await _context.Teams.Include(t => t.Division).ToListAsync();
            Divisions = await _context.Divisions.ToListAsync();
        }


    }
}

Pages/FavoriteTeams.cshtml:

@page
@model FavoriteTeams.Pages.FavoriteTeamsModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@{
    Layout = "_Layout";
}





    
    
    Favorite Teams


    Favorite Teams
    



@section Scripts {
    
}

FavoriteTeams.cshtml.cs:

using FavoriteTeams.Data;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;

namespace FavoriteTeams.Pages
{
    public class FavoriteTeamsModel : PageModel
    {
        private readonly ApplicationDbContext _context;

        public List Teams { get; set; }

        public FavoriteTeamsModel(ApplicationDbContext context)
        {
            _context = context;
        }

        public void OnGet()
        {
            Teams = _context.Teams.Include(t => t.Division).ToList();
        }


    }
}

Program.cs:

using FavoriteTeams.Data;
using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

builder.Services.AddDbContext(options =>
       options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));
builder.Services.AddSession();


var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

SeedDatabase(app);


app.Run();
static void SeedDatabase(IApplicationBuilder app)
{
    using (var serviceScope = app.ApplicationServices.GetService().CreateScope())
    {
        DbInitializer.Initialize(serviceScope.ServiceProvider);
    }
}

ASP.NET Core Razor page favorite list with localstorage

Answers (1)

Related Questions