Question 259075 in CSS Question posted in
Some basic documentation can be found here.

Change css in Blazor

Is there any way to have a specific card show its own text when you click the show text button. I’ve tried several different ways of manipulating CSS, it doesn’t work


    @foreach(var note in noteViewModels)
    {
        
    <div class="m-2">
        <div class="d-flex justify-content-around" style="background-color: darkgray">
            <p>@note.NoteModel.Title</p>
            <p>@note.NoteModel.CreateDate</p>
            <div>
                <button class="btn bg-dark text-light" @onclick="()=>DetailsButtonHandler(note)">View Text</button>
                <button class="btn bg-dark text-light">Edit Card</button>
            </div>
        </div>  
        <div style="background-color:lightgray;">
            <div class="m-0 p-1">
                <p class="m-2 p-2 bg-light">@note.NoteModel.Text</p>
            </div>
        </div>
    </div>
    }

help me pls i dont know what to do

Tags:

2

Answers


  1. 0

    There’s various ways you can do this.

    Since you’re working with a collection of Notes then the simplest way would be to add a property to the Note class

    public class Note
{
    // other properties
    public bool IsShowText {get;set;} = false;
}

    Using an @if statement in the markup to control what to show and hide.
    The button clicks pass the specific note to the handler method, where you change the IsShowText property.

    @foreach(var note in noteViewModels)
{
    <div class="m-0 p-1">
        <p class="m-2 p-2 bg-light">@note.Name</p>
    </div>
    <button class="btn bg-dark text-light" @onclick="(()=>HandleClick(note))">Show/Hide Text</button>
    @if(note.IsShowText)
    {
        <div style="background-color:lightgray;">
    
            <div class="m-0 p-1">
                <p class="m-2 p-2 bg-light">@note.NoteModel.Text</p>
            </div>
        </div>
    }
}
@code{
    void HandleClick(Note note)
    {
        note.IsShowText = !note.IsShowText;
    }
}

    Or, you can use CSS classes/properties. Where you use the @() block to write C# code in.

    In the example below i’m adding the bootstrap d-none class based on the IsShowText property of the note on this line, class='@(note.IsShowText?"":"d-none")'.

    @foreach(var note in noteViewModels)
{
    <div class="m-0 p-1">
        <p class="m-2 p-2 bg-light">@note.Name</p>
    </div>
    <button class="btn bg-dark text-light" @onclick="(()=>HandleClick(note))">Show/Hide Text</button>
    <div style="background-color:lightgray;" class='@(note.IsShowText?"":"d-none")'>
    <div class="m-0 p-1">
        <p class="m-2 p-2 bg-light">@note.NoteModel.Text</p>
    </div>
    </div>
}

<button class="btn bg-dark text-light" @onclick="HandleClick">Show/Hide Text</button>
@code{
    void HandleClick(Note note)
    {
        note.IsShowText = !note.IsShowText;
    }
}

    Both methods demos

    Login or Signup to reply.
  2. 0

    Well, if you want to individually toggle each item, you need to either add a bool ShowText to the Notes class itself, or create a dictionary with each instance as a key, and a boolean as the value. Here’s an example of the latter.

    @page "/"


@foreach (var note in Notes)
{

    <div class="m-2">
        <div class="d-flex justify-content-around" style="background-color: darkgray">
            <p>@note.Title</p>
            <p>@note.CreateDate</p>
            <div>
                <button class="btn bg-dark text-light" @onclick="()=>NoteToggles[note]=!NoteToggles[note]">Toggle Text</button>
                <button class="btn bg-dark text-light">Edit Card</button>
            </div>
        </div>
        @if (NoteToggles[note])
        {
            <div style="background-color:lightgray;">
                <div class="m-0 p-1">
                    <p class="m-2 p-2 bg-light">@note.Text</p>
                </div>
            </div>
        }
    </div>
}

@code {
    public class Note
    {
        public string Title;
        public DateTime CreateDate;
        public string Text;
    }
    List<Note> Notes = new()
    {
        new Note(){ Title = "So cool!", CreateDate = DateTime.Now, Text = "This is my important message."  },
        new Note(){ Title = "Very nice!", CreateDate = DateTime.Now.AddDays(-1), Text = "This is another important message."  },
        new Note(){ Title = "Radical, dude!", CreateDate = DateTime.Now.AddYears(-1), Text = "This is the most important message."  }
    };
    Dictionary<Note, bool> NoteToggles;
    protected override void OnInitialized()
    {
        NoteToggles = Notes.ToDictionary(n => n, n=> false);
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search