Blazor How to access duplicated page parameter?

Question

I have a question about duplicating Razor pages.

I found this code on Youtube and tried myself. And having a hard time founding a way to access a parameter (taskList).

ToDos (Test pages)

@page "/Todo"

<div class="row">
    <div class="col-6">
        <Todo Headername="Daily Task"></Todo>
    </div>
    <div class="col-6">
        <Todo Headername="Monthly Task"></Todo>

    </div>
</div>
<div>
    <!-- I want to print out both List parameter value on the page!! -->
</div>


@code {
 
}

Todo(Components)

@page "/Tests"


<h3>@Headername</h3>

<!-- Edit form-->
<EditForm Model="task" class="form-inline"  OnValidSubmit="AddTask">
    <input type="text" class="form-control mx-2" @bind-value="task.TaskName" />
    <button class="btn btn-outline-primary mx-2">Add Task</button>
</EditForm>

<div class="progress-bar my-2" role="progressbar" style="width:@(PercentageCompleted)%" aria-valuemax="100" aria-valuemin="0">
    @(PercentageCompleted)%
</div>

<ul class="list-group" my-2>
    @foreach (var taskitem in taskList)
    {
        if (taskitem.IsComplete)
        {
            <!--Task Completed-->
            <li class="list-group-item list-group-item-success mx-1" @onclick="(()=>taskitem.IsComplete = task.IsComplete)"> <del>@taskitem.TaskName</del></li>
        }
        else
        {
            <!--Task Not Completed-->
            <li class="list-group-item list-group-item-secondary mx-1" @onclick="(()=>taskitem.IsComplete = !task.IsComplete)">@taskitem.TaskName</li>
        }
    }

</ul>


@code {
    [Parameter]
    public string Headername { get; set; }

    protected List<TaskModel> taskList = new List<TaskModel>();

    protected TaskModel task = new TaskModel();

    protected override void OnInitialized()
    {
        if (Headername == "")
        {
            Headername = "Todo";
        }
    }

    public int PercentageCompleted {
        get {
            return taskList.Count > 0 ? (taskList.Count(x => x.IsComplete) * 100 / taskList.Count) : 0;
        }
    }

    private void AddTask()
    {
        taskList.Add(task);
        task = new TaskModel();
    }
}

below is a example of ToDos pages

reference : https://www.youtube.com/watch?v=T6lUWO-_NfM&ab_channel=CodingSimplified

taskList is not a parameter and it is not public, so you cannot. You can read up on how Blazor works with Parent/Child components here https://blazor-university.com/components/ — Mister Magoo, Jun 08 '22 at 11:22

score 0 · Answer 1 · answered Jun 08 '22 at 16:52

It's difficult to make suggestions without a fuller understanding of the context of what you are doing/ trying to achieve with Tasks?

In the code you've show taskList is a protected property of ToDo, so the component `ToDos' can't see it.

You can start plumbing up two way binding if you wish - that's what Mister Magoo's reference demonstrates. This approach works for simple examples.

I however advocate getting the data out of the UI and using events. My answer to this question demonstrates how to do that - How can I trigger/refresh my main .RAZOR page from all of its sub-components within that main .RAZOR page when an API call is complete?.

Thanks for answering. What i am trying to do is just accessing the taskList parameter... Example only shows two Todo lists but i want to try with more than two times. and if possible it can be controled on add UI for duplicating component. if i make taskList parameter with public than can i access to this? or can you give an example of Mister Magoo's reference? maybe links? Cheers — GRAGW, Jun 09 '22 at 03:49

Blazor How to access duplicated page parameter?

1 Answers1