Blazor Server

How to use html dropdown in Blazor

ChandradevLeave a comment


While working on a Blazor project, so many times we will use plain HTML dropdown. In this scenario, we will get a requirement to trigger the event and reset the selection item to the initial state.

Here are some code snippets for completing this task.

Approach 1: 

@page "/counter"

<select @onchange="OptionChanged" value="@selectedOption">
    <option value="-1">Select Option</option>
    @foreach (var option in options)
    {
        <option value="@option">@option</option>
    }
</select>

<button @onclick="ClearSelection">Clear Selection</button>

@code {
    private List<string> options = new List<string> { "Option 1", "Option 2", "Option 3" };
    private string selectedOption { get; set; } = "-1"; // Set default value to "-1"

    private void OptionChanged(ChangeEventArgs e)
    {
        // Extract the selected value from the event argument
        string selectedValue = e.Value.ToString();
        Console.WriteLine($"Selected option: {selectedValue}");
        // Assign the selected value to the selectedOption variable
        selectedOption = selectedValue;
    }

    private void ClearSelection()
    {
        // Clear the selected option
        selectedOption = "-1"; // Reset to default value "-1"
        StateHasChanged(); // Trigger a UI update
    }
}

Approach 2:

@page "/"

<PageTitle>Home</PageTitle>

<select @onchange="OptionChanged" value="@selectedOption">
    <option value="">Select Option</option>
    @foreach (var option in options)
    {
        <option value="@option">@option</option>
    }
</select>

<button @onclick="ClearSelection">Clear Selection</button>

@code {
    private List<string> options = new List<string> { "Option 1", "Option 2", "Option 3" };
    private string selectedOption { get; set; } = "";

    private void OptionChanged(ChangeEventArgs e)
    {
        // Extract the selected value from the event argument
        string selectedValue = e.Value.ToString();
        Console.WriteLine($"Selected option: {selectedValue}");
        // Assign the selected value to the selectedOption variable
        selectedOption = selectedValue;
    }

    private void ClearSelection()
    {
        // Clear the selected option
        selectedOption = "";
        // Trigger a UI update
        StateHasChanged();
    }
}

Summary:

In this code snippet, we demonstrate how to handle various scenarios using an HTML dropdown in Blazor.

CICD pipeline for Blazor application on Azure without writing any code.

FeaturedLeave a comment

For creating CICD pipeline on azure portal for Blazor or Asp.net Core Project is very simple and straight forward. In this short demo post, we will see how do it.

Step 1: Create the App Service like this.

Step 2: Do the required mandatory setting like

Step 3: Do the configuration for GitHub Action setting like given below image. This will help us to create CICD pipeline for us.

Step 4: Now click on create web app.

If you will come to github repo, you will see that azure webapp deployment wizard has already added yaml file for us. which will trigger the deployment process for us.

Step 5: Now change the code on source code and push to GitHub repo. then CICD process will trigger.

Step 7: Now run the created web app. we will see output like this

Summary:

In the above demo, we saw that without writing single line of code azure portal is creating CICD pipeline for us. It will hardly take 5 to 10 min to create CICD pipeline.

But this approach will not work for docker image or deployment on Linux.

Source code: https://github.com/Chandradev819/HelloWorldDemo

Creating Auto Expand of popup Width of Telerik Blazor DropDownList.

ChandradevLeave a comment

So many we will get requirement to expand popup width on basis of text Content while working with Blazor Telerik dropdown.

We can do like this

@page "/counter"

<TelerikDropDownList Data="@DropDownData" Width="auto" 
                     Value="@DropDownValue" 
                     ValueChanged="@( (string newValue) => OnDropDownValueChanged(newValue) )">
                     <DropDownListSettings>
                         <DropDownListPopupSettings Width="Auto"/>
                     </DropDownListSettings>
</TelerikDropDownList>

@code {
    private List<string> DropDownData { get; set; } = new List<string> {
        "Manager", "Developer", "QA", "Technical Writer Technical Write", "Support Engineer"
    };

    private string DropDownValue { get; set; } = "Developer";
    private void OnDropDownValueChanged(string newValue)
    {
        DropDownValue = newValue;
    }
}

How to create cascading grid in Blazor Telerik Grid ?

ChandradevLeave a comment

In Blazor Telerik Grid, we can easily achieve using DetailTemplate. We donot have to keep grid inside another grid.

Here is the code snippet.

@page "/grid"
<h3>GridDemo</h3>

<TelerikGrid Data="salesTeamMembers"
             OnRowCollapse="@OnRowCollapseHandler">
    <DetailTemplate>
        @{
            var employee = context as MainModel;
            <TelerikGrid Data="employee.Orders" Pageable="true" PageSize="5">
                <GridColumns>
                    <GridColumn Field="OrderId"></GridColumn>
                    <GridColumn Field="DealSize"></GridColumn>
                </GridColumns>
            </TelerikGrid>
        }
    </DetailTemplate>
    <GridColumns>
        <GridColumn Field="Id"></GridColumn>
        <GridColumn Field="Name"></GridColumn>
    </GridColumns>
</TelerikGrid>

<br />


@code {
    void OnRowCollapseHandler(GridRowCollapseEventArgs args)
    {
        MainModel item = args.Item as MainModel;
    }
 
    List<MainModel> salesTeamMembers { get; set; }

    protected override void OnInitialized()
    {
        salesTeamMembers = GenerateData();
    }

    private List<MainModel> GenerateData()
    {
        List<MainModel> data = new List<MainModel>();
        for (int i = 0; i < 5; i++)
        {
            MainModel mdl = new MainModel { Id = i, Name = $"Name {i}" };
            mdl.Orders = Enumerable.Range(1, 15).Select(x => new DetailsModel { OrderId = x, DealSize = x ^ i }).ToList();
            data.Add(mdl);
        }
        return data;
    }

    public class MainModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<DetailsModel> Orders { get; set; }
    }

    public class DetailsModel
    {
        public int OrderId { get; set; }
        public double DealSize { get; set; }
    }
}