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.

Your client IP address doesn’t have access to the server while connecting with Azure DB

ChandradevLeave a comment

So many times, while connecting the azure Sql Server DB. we will get error message like

“Your client IP address doesn’t have access to server. Sign Into an Azure Account and create firewall rule to enable access.“

Solution for this issue:

Go to the firewall rules of your server and create new rule like given below image.

Note : Give the IP address range which is showing on SSMS error message

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 render XAML Controls in Blazor WebAssembly?

ChandradevLeave a comment

Many times, we encounter the need to migrate Silverlight or WPF applications to modern web applications like Blazor WebAssembly. In such scenarios, the typical approach involves re-engineering the Silverlight or WPF application, which can be time-consuming and expensive. However, there is a smarter and easier alternative: we can leverage the ‘Xaml for Blazor‘ NuGet package to reuse our existing XAML code in Blazor WebAssembly. This approach not only saves us significant development time but also reduces costs.


XAML for Blazor is powered by OpenSilver. It is open-source reimplementation of Microsoft Silverlight for the modern Web.

Let’s create one small demo Xaml Timer Control implementation in Blazor WebAssembly application

Step 1: Create the Blazor Web assembly using Visual Studio like this.

Step 2: Give the project Name

Step 3: Go to the visual studio extension and install the XAML for Blazor extension.

Step 4: Right click on Solution explore and install the NuGet package i.e. XamlforBlazor like this

Step 5: Create the Xaml folder, where will keep all xaml related file. For this right click on folder and add new items. You will see the Xaml for Blazor Controls like this

Step 6: Create the Timer Control in Xaml folder and write the code like this 

<UserControl
    x:Class="XamlTest.Xaml.Timer.TimerControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:XamlTest.Xaml.Timer">

    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock x:Name="TimerValue" FontSize="24" HorizontalAlignment="Center" Margin="0,0,0,10"/>
        <Button Content="Start Timer" Click="StartTimer_Click" HorizontalAlignment="Center" Margin="10"/>
        <Button Content="Stop Timer" Click="StopTimer_Click" HorizontalAlignment="Center" Margin="10"/>
        <Button Content="Reset Timer" Click="ResetTimer_Click" HorizontalAlignment="Center" Margin="10"/>
    </StackPanel>
</UserControl>

Step 7: Create the Code behind file i.e., Timer.xaml.cs file like this

using System.Windows;
using System.Windows.Controls;
using System.Windows.Threading;

namespace XamlTest.Xaml.Timer
{
    public partial class TimerControl : UserControl
    {
        private DispatcherTimer _timer;
        private TimeSpan _elapsedTime;

        public TimeSpan ElapsedTime
        {
            get => _elapsedTime;
            set
            {
                _elapsedTime = value;
                UpdateTimerValue();
            }
        }

        public TimerControl()
        {
            InitializeComponent();
            _timer = new DispatcherTimer();
            _timer.Interval = TimeSpan.FromSeconds(1);
            _timer.Tick += TimerTick;
        }

        private void TimerTick(object sender, EventArgs e)
        {
            ElapsedTime = ElapsedTime.Add(TimeSpan.FromSeconds(1));
        }

        private void StartTimer_Click(object sender, RoutedEventArgs e)
        {
            _timer.Start();
        }

        private void StopTimer_Click(object sender, RoutedEventArgs e)
        {
            _timer.Stop();
        }

        private void ResetTimer_Click(object sender, RoutedEventArgs e)
        {
            ElapsedTime = TimeSpan.Zero;
        }

        private void UpdateTimerValue()
        {
            TimerValue.Text = ElapsedTime.ToString(@"hh\:mm\:ss");
        }
    }
}

Step 8: Go to Index.razor page and call the Timer xaml control like this

@page "/"

<PageTitle>Index</PageTitle>
<h1>Time Control demo using Xaml for Blazor</h1>
<br />
<XamlForBlazor.XamlElement Type="@typeof(XamlTest.Xaml.Timer.TimerControl)" />

Step 9: Run the application and you will see XAML Timer control is running on browser

Now if you will see on browser console tab, with help of OpenSilver Control dll and wasm, we are able to run xaml code inside the Browser sandbox.

Limitation

Currently this NuGet package is only working with Blazor web assembly. Whenever Blazor Server will come, I will update here in dotnet community.

Summary:

In this step-by-step demo post, we discovered that it is easy to integrate any XAML control into Blazor WebAssembly without the need to write code in Razor pages. This makes the Xaml for Blazor NuGet package extremely valuable when migrating Silverlight or WPF applications to Blazor, as it significantly reduces development time and effort.

Source Code to download: https://github.com/Chandradev819/XamlTest.git