Question:

How can I get ID from link in .NET 7 in Blazor?

Problem:

When I open page with id in link I have error in browser. I have an assumption that in this way it refers to some kind of endpoint, but I don’t understand how I can make it so that I can get the ID from the link

I have page UpdateWalletType.razor

I'm trying to get the ID from a link by this way

@page "/update-wallet-type/{walletTypeId}"

@code {

private UpdateWalletTypeByIdDto _newWalletType;

private WalletTypeDto existingWalletTypeDto = new WalletTypeDto();

protected override async Task OnInitializedAsync()

{

var walletTypeId = NavigationManager.Uri.Split('/').Last();

existingWalletTypeDto = await HttpClient.GetFromJsonAsync<WalletTypeDto>($"getWalletTypeById/{walletTypeId}");

}

I don't have any errors at build, but when I open page /update-wallet-type/id I have this error in browser console

Explain what I'm doing wrong and how I can solve it?

Solution:

The error you're encountering is due to the fact that the UpdateWalletType component does not have a property named walletTypeId, and you're trying to access it in the OnInitializedAsync method. To fix this issue, you can add a public property named walletTypeId to your UpdateWalletType component and use that property to fetch the data. Here's an example of how you can modify your component:

csharp

@code {

private UpdateWalletTypeByIdDto _newWalletType;

private WalletTypeDto existingWalletTypeDto = new WalletTypeDto();

// Add a public property to store the walletTypeId

[Parameter]

public string WalletTypeId { get; set; }

protected override async Task OnInitializedAsync()

{

// Use the WalletTypeId property instead of trying to extract it from the URL

existingWalletTypeDto = await HttpClient.GetFromJsonAsync<WalletTypeDto>($"getWalletTypeById/{WalletTypeId}");

}

Now, when you navigate to the /update-wallet-type/id page, you need to pass the id as a parameter. If you're using a RouteView or NavLink, you can pass the parameter like this:

html

<NavLink href="/update-wallet-type/123">Update Wallet Type</NavLink>

Ensure that you replace 123 with the actual ID you want to fetch. This way, the WalletTypeId property will be set when the component is initialized, and you won't encounter the mentioned error.

>How to Set up the Android emulator?

>How to Set up the local environment for Angular development?

>How to solve encoding issue when writing to a text file, with Python?

>Step by Step guide to Deploy Terraform in Azure using GitHub Actions

>Testing react components using Hooks and Mocks

>Use Firebase Realtime Database with ASP.NET MVC App

>Use of Singletons in .NET Core in AWS Lambda