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
- Create a new Blazor Web Server application using your preferred IDE.
- 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
- Open SQL Server Object Explorer from the View menu in your IDE.
- Create a new Database named
Northwind
underlocaldb
.
- Add a new table named
CustomMenuItem
to theNorthwind
database.
- Define the fields for the
CustomMenuItem
table as required.
- Populate the
CustomMenuItem
table with data.
- Copy the connection string from the properties of the
Northwind
database. - Update the
appsettings.json
in the Server project with the connection string:
"AllowedHosts": "*",
"ConnectionStrings": {
"CustomDBContext": "Your Connection String Here"
}
- Register
CustomDBContext
in theProgram.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")));
- 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; }
}
- Define a
DbContext
class namedCustomDBContext
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
- Add a new controller to the Server project to handle data retrieval.
- 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
- 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);
}
}
}
}
- Retrieve the port number from
launchsettings.json
in the properties folder of the client project and use it in theGetAsync
method.
- The output will display the menu items retrieved from the database.
Additional References
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!