Create toolbar .NET Core

Brass Contributor

Dec 08, 2023

Hi jareyes,
You can refer to below link
https://ej2.syncfusion.com/aspnetcore/documentation/toolbar/getting-started
And also give you an example of the toolbar

1. To create a toolbar in an ASP.NET Core application that includes buttons for actions like New, Update, Create, and Delete, you can use a combination of partial views, tag helpers, and Razor syntax. Here's a step-by-step guide:

Create a Partial View for the Toolbar:

Create a new partial view file (e.g., _Toolbar.cshtml) in the Views/Shared folder.


<div class="toolbar">
<button onclick="location.href='@Url.Action("Create", ViewContext.RouteData.Values)"">New</button>
<button onclick="location.href='@Url.Action("Update", ViewContext.RouteData.Values)"">Update</button>
<button onclick="location.href='@Url.Action("Delete", ViewContext.RouteData.Values)"">Delete</button>

</div>
Include the Partial View in the Layout (_Layout.cshtml):

Include the toolbar partial view in your layout file.


<!DOCTYPE html>
<html>
<head>

</head>
<body>
<div class="container">

@await Html.PartialAsync("_Toolbar")


<main>
@RenderBody()
</main>
</div>
</body>
</html>
2. Access Controller, Action, and Model in the Toolbar:

To access the current controller, action, and model, you can use the ViewContext property and RouteData dictionary.

<div class="toolbar">
<button onclick="location.href='@Url.Action("Create", ViewContext.RouteData.Values)"">New</button>
<button onclick="location.href='@Url.Action("Update", ViewContext.RouteData.Values)"">Update</button>
<button onclick="location.href='@Url.Action("Delete", ViewContext.RouteData.Values)"">Delete</button>

<div>
<strong>Controller:</strong> @ViewContext.RouteData.Values["controller"]<br />
<strong>Action:</strong> @ViewContext.RouteData.Values["action"]<br />

@if (ViewContext.ViewData.Model != null)
{
<strong>Model Type:</strong> @ViewContext.ViewData.Model.GetType().FullName
}
</div>

</div>

3. Styling (Optional):

Add some styling to make your toolbar visually appealing.
/* Add your CSS in a separate file or in the head of your layout */
.toolbar {
background-color: #f2f2f2;
padding: 10px;
margin-bottom: 20px;
}

.toolbar button {
margin-right: 10px;
}
This example assumes that you have a basic understanding of ASP.NET Core MVC and Razor syntax. The toolbar will appear on all pages that use the layout file. The Url.Action method is used to generate URLs for the specified controller actions dynamically.

Remember to customize the buttons and styling according to your application's requirements.

Thanks & Best Regards,

AddWebSolution

Forum Discussion

Resources