Separating Variable Declarations from a Blazor page into a Class in Data repository in a Blazor WebAssembly App

Question

I am trying to write a single page webpage using Blazor WebAssessmbly in .Net6. In my blazor "@code" section, I declared variables as following. `

// lists of all cards from 3 fields
    public List<Card> KingCards = new List<Card>();
    public List<Card> QueenCards = new List<Card>();
    public List<Card> TressCards = new List<Card>();

    // lists of different graph paths
    public List<string> KingGraphs = new List<string>();
    public List<string> QueenGraphs = new List<string>();
    public List<string> TressGraphs = new List<string>();
    public List<string> MinorPatterns = new List<string>() { "Cups", "Pentacles", "Swords", "Wands" };

    // list of degrees rotated
    protected List<string> RotateDegrees = new List<string>() { "0deg", "180deg" };

    // variables to control only choosing one card from each field
    protected bool KingChosen, QueenChosen, TressChosen = false;

    // whether a card is being flipped
    public bool flipping = false;

`

How can I remove these declarations into a class in Project.Data section apart from the razor file, but still gain access to these variables from the razor page?

I am new to Blazor and I have tried to just create a class and move these declarations into the class under my Project's Data repository, but it didn't work...

Can anyone help me with this issue? Thanks!

Answer 1

There are two ways:

1. Declaring class as partial(the file created should be called by standar (componentName).razor.cs

Declaring class as partial with the same name as the component:

In this case you are declaring that this file contains the logic of that component, so it cant be reused by other component

public partial class componentName
    {

        public class Card { public string id; }


        public List<Card> KingCards = new List<Card>();
        public List<Card> QueenCards = new List<Card>();
        public List<Card> TressCards = new List<Card>();

        // lists of different graph paths
        public List<string> KingGraphs = new List<string>();
        public List<string> QueenGraphs = new List<string>();
        public List<string> TressGraphs = new List<string>();
        public List<string> MinorPatterns = new List<string>() { "Cups", "Pentacles", "Swords", "Wands" };

        // list of degrees rotated
        protected List<string> RotateDegrees = new List<string>() { "0deg", "180deg" };

        // variables to control only choosing one card from each field
        protected bool KingChosen, QueenChosen, TressChosen = false;

        // whether a card is being flipped
        public bool flipping = false;

    }

2. Inherit from cs file

If you want to reuse that class for other component you can do the following .razor file:

@page "/"
@inherits YourClassName


@*thing you want here*@

@code{
}

In your .cs file you have to inherit from ComponentBase , this way:

using Microsoft.AspNetCore.Components;

namespace BlazorApp1.Pages
{
    public  class YourClassName : ComponentBase
    {

        public class Card { public string id; }


        public List<Card> KingCards = new List<Card>();
        public List<Card> QueenCards = new List<Card>();
        public List<Card> TressCards = new List<Card>();

        // lists of different graph paths
        public List<string> KingGraphs = new List<string>();
        public List<string> QueenGraphs = new List<string>();
        public List<string> TressGraphs = new List<string>();
        public List<string> MinorPatterns = new List<string>() { "Cups", "Pentacles", "Swords", "Wands" };

        // list of degrees rotated
        protected List<string> RotateDegrees = new List<string>() { "0deg", "180deg" };

        // variables to control only choosing one card from each field
        protected bool KingChosen, QueenChosen, TressChosen = false;

        // whether a card is being flipped
        public bool flipping = false;

    }
}