Blazor WebAssembly

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.

‘<‘ is an invalid start of a value. Path: $ | LineNumber: 0 | BytePositionInLine: 0.

ChandradevLeave a comment

If you are getting this error message with Web API in Blazor WeAssembly application. You can troubleshoot following ways.

  1. Take the api end point and trigger with PostMan
  2. If it is not triggering, then try to see the api method attribute. So many we missed out input parameter of Web api method.

In my case, I was missed out InstanceId for Web API Method

 [HttpGet]
 [Route("[action]]
 public async Task<List<ProductModel>> GetProducts(int instanceId) => await _service.GetProducts(instanceId);

Fix: Pass the instanceId parameter to web api method.

 [HttpGet]
 [Route("[action]/{instanceId}")]
 public async Task<List<ProductModel>> GetProducts(int instanceId) => await _service.GetProducts(instanceId);

Failed to launch browser in Visual Studio 2022 Version 17.8.1

ChandradevLeave a comment

While working on Blazor Web Assembly 8.0. I was getting this error, while lunching the browser on debug mode.

Failed to launch debug adapter.

If you will go to the LauchSettings.Json file. You will see this
“inspectUri”: “{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}”,

The "inspectUri" property in the configuration is used to specify the WebSocket URL for debugging purposes when running a .NET project. This URL is typically used for remote debugging scenarios where you want to connect a debugger, such as Visual Studio Code or Chrome DevTools, to your running .NET application.

In my system, I have not installed chrome browser and i donot want to do remote debugging.

Work Around Approach to fix this issue.

Approach 1: Update to visual latest version. It was bug in Visual Studio 2022 17.8.1

Approach 2: If approach 1 will not work then comment out this line.

I hope this will help to some one.

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;
    }
}