Load Json file List & Dropdownlist in Blazor

Question

employees.txt

1)I want to load json file to List , here is the view model

CD

METS

CATEGORY

DESC

2.Load DESC to Html Dropdownlist.

3. When a Description is selected and submit is clicked display Description ex : "snowmobiling, driving, moderate"

Answer 1

Keep in mind, that your original problem has been solved.

The new problem are basic bugs that can be found using the Visual Studio debugger.

Working code sample

@page "/selectdemo"
@inject HttpClient Http
@inject ILogger<SelectDemo> Logger

<PageTitle>Activity Dropdown</PageTitle>

<h3>Activity</h3>

<EditForm Model="@submitActivity" OnSubmit="@Submit">
    <div>
        <InputSelect @bind-Value="submitActivity.CD">
            @if (submitActivity != null)
            {
                <option value="">--Select--</option>
                @foreach (var activity in ActivityList)
                {
                    <option value="@activity.CD">@activity.DESC</option>
                }
            }
        </InputSelect>
    </div>
     <br />
    <div class="row">
        <div class="col-md-3">
            <p>Weight (in kgs)</p>
        </div>
        <div class="col-md-4">
            <input placeholder="Weight (in kgs)" @bind="@weight" />
        </div>
    </div>

    <br />
    <div class="row">
        <div class="col-md-3">
            <p>Time  (in minutes)</p>
        </div>
        <div class="col-md-4">
            <input placeholder="Time in minutes" @bind="@minutes" />
        </div>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

<div>
    <div>@finalresult</div>
</div>

@code {
    private List<ACTIVITY> ActivityList = new();
    private ACTIVITY submitActivity { get; set; } = new();

    private int weight;
    private int minutes;
    private string finalresult = string.Empty;
    private decimal hours;

    protected override async Task OnInitializedAsync()
    {
        //Get the data from the employees.txt
        var root = await Http.GetFromJsonAsync<Rootobject>("sample-data/employees.txt");
        ActivityList = root.burned.ACTIVITY;
    }

    private void Submit()
    {
        //Debug - View the CD
        Logger.LogInformation("CD = {CD}", submitActivity.CD);

        //use the CD to get the and display the description
        ACTIVITY model = ActivityList.FirstOrDefault(a => a.CD == submitActivity.CD);

        hours = (decimal)minutes / 60;
        finalresult = (weight * model.METS * hours).ToString();
    }


    //View Model
    public class Rootobject
    {
        public Burned burned { get; set; }
    }

    public class Burned
    {
        public List<ACTIVITY> ACTIVITY { get; set; }
    }

    public class ACTIVITY
    {
        public string CD { get; set; }
        public decimal METS { get; set; }
        public string CATEGORY { get; set; }
        public string DESC { get; set; }
    }
}

Answer 2

Is used the CD field to find the description since it is unique. I added the page below to a standard Blazor WASM project. The employees.txt file was copied to the wwwroot/sample-data folder. The rest of the code comes form the official documentation.

ASP.NET Core Blazor forms and input components

@page "/selectdemo"
@inject HttpClient Http
@inject ILogger<SelectDemo> Logger

<PageTitle>Activity Dropdown</PageTitle>

<h3>Activity</h3>

<EditForm Model="@submitActivity" OnSubmit="@Submit">
    <div>
        <InputSelect @bind-Value="submitActivity.CD">
            @if (submitActivity != null)
            {
                @foreach (var activity in ActivityList)
                {
                    <option value="@activity.CD">@activity.DESC</option>
                }
            }
        </InputSelect>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

<div>
    <div>@Description</div>
</div>

@code {
    private List<ACTIVITY> ActivityList = new();
    private SubmitActivity submitActivity { get; set; } = new();
    private string Description = string.Empty;

    protected override async Task OnInitializedAsync()
    {
        //Get the data from the employees.txt
        var root = await Http.GetFromJsonAsync<Rootobject>("sample-data/employees.txt");
        ActivityList = root.burned.ACTIVITY;
    }

    private void Submit()
    {
        //Debug - View the CD
        Logger.LogInformation("CD = {CD}", submitActivity.CD);

        //use the CD to get the and display the description
        Description = ActivityList.FirstOrDefault(a => a.CD == submitActivity.CD).DESC;
    }

    //Model to submit
    public class SubmitActivity
    {
        public string CD { get; set; }
    }


    //View Model
    public class Rootobject
    {
        public Burned burned { get; set; }
    }

    public class Burned
    {
        public List<ACTIVITY> ACTIVITY { get; set; }
    }

    public class ACTIVITY
    {
        public string CD { get; set; }
        public string METS { get; set; }
        public string CATEGORY { get; set; }
        public string DESC { get; set; }
    }
}

Answer 3

@AgaveJoe

I tried to enhance the program , I am getting a runtime error I cannot load the dropdown.

@page "/"
@inject HttpClient Http
@using Microsoft.AspNetCore.Components.Forms


<PageTitle>Activity Dropdown</PageTitle>

<h3>Activity</h3>





<br />
<EditForm Model="@submitActivity" OnSubmit="@Submit">
    <div>
        <InputSelect @bind-Value="submitActivity.CD"> 
            @if (submitActivity != null) 
            {
                @foreach (var activity in ActivityList)
                {
                    <option value="@activity.CD">@activity.DESC</option>
                }
            }
        </InputSelect>
    </div>

    <br />
    <div class="row">
        <div class="col-md-3">
            <p>Weight (in kgs)</p>
        </div>
        <div class="col-md-4">
            <input placeholder="Weight (in kgs)" @bind="@weight" />
        </div>
    </div>

    <br />
    <div class="row">
        <div class="col-md-3">
            <p>Time  (in minutes)</p>
        </div>
        <div class="col-md-4">
            <input placeholder="Time in minutes" @bind="@minutes" />
        </div>
    </div>



    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>






<div class="row">
    <div class="col-md-3">
        <p>Result(Calories needed to maintain weight):</p>
    </div>
    <div class="col-md-4">
        <input readonly @bind="@finalresult" />
    </div>
</div>
<br />



<div>
    <div>@Description</div>
</div>

@code {
    private List<ACTIVITY> ActivityList = new();
    private SubmitActivity submitActivity { get; set; } = new();
    private string Description = string.Empty;
    private int weight;
    private int minutes;
    private string finalresult;
    private int fmets;
    private int hours;
    protected override async Task OnInitializedAsync()
    {
        //Get the data from the employees.txt
        var root = await Http.GetFromJsonAsync<Rootobject>("sample-data/employees.txt");
        ActivityList = root.burned.ACTIVITY;
    }

    private void Submit()
    {
        //Debug - View the CD
        //     Logger.LogInformation("CD = {CD}", submitActivity.CD);

        //use the CD to get the and display the description
        Description = ActivityList.FirstOrDefault(a => a.CD == submitActivity.CD).DESC;
        fmets = ActivityList.FirstOrDefault(a => a.CD == submitActivity.CD).METS;
        hours = minutes / 60;
        finalresult = (weight * fmets * hours).ToString();
    }

    //Model to submit
    public class SubmitActivity
    {
        public string CD { get; set; }
    }


    //View Model
    public class Rootobject
    {
        public Burned burned { get; set; }
    }

    public class Burned
    {
        public List<ACTIVITY> ACTIVITY { get; set; }
    }

    public class ACTIVITY
    {
        public string CD { get; set; }
        public int METS { get; set; }
        public string CATEGORY { get; set; }
        public string DESC { get; set; }
    }
}