How to integrate database with a Syncfusion Blazor Menu Component?

This article provides a step-by-step guide on how to connect a database to a menu component in a Blazor Menu Bar Web Server application.

Creating a Blazor Web Server Application

1. Create a new Blazor Web Server application using your preferred IDE.
2. Ensure to select the appropriate options to create a hosted application.
   
   

Setting up the database

Prerequisites

Ensure the following NuGet packages are installed in the Server Project:

• EntityFramework
• Microsoft.EntityFrameworkCore
• Microsoft.EntityFrameworkCore.SqlServer

Steps

1. Open SQL Server Object Explorer from the View menu in your IDE.
2. Create a new Database named Northwind under localdb.
   
3. Add a new table named CustomMenuItem to the Northwind database.
   
4. Define the fields for the CustomMenuItem table as required.
   
5. Populate the CustomMenuItem table with data.
   
6. Copy the connection string from the properties of the Northwind database.
7. Update the appsettings.json in the Server project with the connection string:

"AllowedHosts": "*",
"ConnectionStrings": {
  "CustomDBContext": "Your Connection String Here"
}

8. Register CustomDBContext in the Program.cs file of the Server project:

builder.Services.AddMvc(options => options.EnableEndpointRouting = false)
                .SetCompatibilityVersion(CompatibilityVersion.Version_3_0);
builder.Services.AddDbContext<CustomDBContext>(options =>
           options.UseSqlServer(builder.Configuration.GetConnectionString("CustomDBContext")));

9. Create a class named CustomMenuItem to represent menu items in the Data project.

public class CustomMenuItem
{
    public string Id { get; set; }
    public string Text { get; set; }
    public string? ParentId { get; set; }
}

10. Define a DbContext class named CustomDBContext to manage the data:

public class CustomDBContext : DbContext
{
    public CustomDBContext(DbContextOptions<CustomDbContext> options) : base(options) { }

    public DbSet<CustomMenuItem> CustomMenuItem { get; set; }
}

Creating an API controller

1. Add a new controller to the Server project to handle data retrieval.
   
   
2. Implement the MenuController with a method to get menu items from the database:

public class MenuController : ControllerBase
{
    private readonly CustomDBContext _dbContext;

    public MenuController(CustomDBContext dbContext)
    {
        _dbContext = dbContext;
    }

    [HttpGet]
    public List<CustomMenuItems> Get()
    {
        return _dbContext.CustomMenuItem.ToList();
    }
}

Rendering the Menu component

1. Add a menu component to the Index.razor file:

@page "/custommenu"
@using Newtonsoft.Json
@using Syncfusion.Blazor.Navigations
@using WebServerAPI.Data
@using WebServerAPI.Shared

<div id="container">
    <SfMenu Items="@items" TValue="CustomMenuItems">
        <MenuFieldSettings ItemId="Id" Text="Text" ParentId="ParentId"></MenuFieldSettings>
    </SfMenu>
</div>

@code{
    public List<CustomMenuItems> items { get; set; } = new List<CustomMenuItems>();

    protected override async Task OnInitializedAsync()
    {
        using (var httpClient = new HttpClient())
        {
            using (var response = await httpClient.GetAsync("https://localhost:7016/api/menu/"))
            {
                string apiResponse = await response.Content.ReadAsStringAsync();
                items = JsonConvert.DeserializeObject<List<CustomMenuItems>>(apiResponse);
            }
        }
    }
}

2. Retrieve the port number from launchsettings.json in the properties folder of the client project and use it in the GetAsync method.
   
3. The output will display the menu items retrieved from the database.
   
   

Additional References

• Syncfusion Blazor Documentation
• Entity Framework Core Documentation
• ASP.NET Core Documentation

Please note that the actual connection string and URLs used in the code snippets should be replaced with the appropriate values for your environment.

Conclusion

I hope you enjoyed learning about how to integrate database with a Syncfusion Blazor Menu Component.

You can refer to our Blazor Menu Bar feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Menu Bar example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!