https://github.com/ekondur/razorkit
RazorKit is a collection of lightweight, fluent-style Razor HTML helpers that make it easy for developers to integrate popular JavaScript libraries into their ASP.NET applications.
https://github.com/ekondur/razorkit
chartjs csharp datatables htmlhelper javascript razor
Last synced: 9 months ago
JSON representation
RazorKit is a collection of lightweight, fluent-style Razor HTML helpers that make it easy for developers to integrate popular JavaScript libraries into their ASP.NET applications.
- Host: GitHub
- URL: https://github.com/ekondur/razorkit
- Owner: ekondur
- License: mit
- Created: 2024-09-22T21:14:11.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-08-18T19:54:14.000Z (10 months ago)
- Last Synced: 2025-08-29T22:30:41.436Z (10 months ago)
- Topics: chartjs, csharp, datatables, htmlhelper, javascript, razor
- Language: C#
- Homepage: https://ekondur.github.io/RazorKit/
- Size: 4.24 MB
- Stars: 10
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Welcome to RazorKit
RazorKit is a collection of lightweight, fluent-style Razor HTML helpers that make it easy for developers to integrate popular JavaScript libraries into their ASP.NET applications.
With RazorKit, you can quickly implement features from libraries like [Chart.js](https://ekondur.github.io/RazorKit/chartjs/) and [DataTables](https://ekondur.github.io/RazorKit/datatables/), without the hassle of writing complex JavaScript or HTML code manually.
## Using DataTables
Install the [RazorKit.DataTables](https://www.nuget.org/packages/RazorKit.DataTables/) package from nuget.
```
PM> Install-Package RazorKit.DataTables
```
Add related scripts and style links and implement. [Reference:](https://datatables.net/)
```csharp
@using RazorKit
@(Html.DataTable()
.Columns(c =>
{
c.Field(f => f.Id).Visible(false);
c.Field(f => f.Name).Title("Name");
})
.DataSource(ds => ds
.URL(Url.Action("GetDataResult"))
.Method("POST")
.Naming(Convention.CamelCase))
.ServerSide(true)
.Render())
```
```csharp
using RazorKit.DataTables;
[HttpPost]
public JsonResult GetDataResult(DataRequest request)
{
var result = ctx.People.ToDataResult(request);
return Json(result);
}
```
## Using ChartJs
Install the [RazorKit.ChartJs](https://www.nuget.org/packages/RazorKit.ChartJs/) package from nuget.
```
PM> Install-Package RazorKit.ChartJs
```
Add related scripts and implement. [Reference:](https://www.chartjs.org/docs/latest/getting-started/)
```csharp
@using RazorKit
@(Html.Chart("canvasId")
.Data(d => d
.Labels("January", "February", "March", "April", "May", "June", "July")
.Datasets(ds => ds
.Line()
.Label("Line Chart")
.Data(65, 59, 80, 81, 56, 55, 40)))
.Render())
```
## Using SweetAlert2
Install the [RazorKit.SweetAlert2](https://www.nuget.org/packages/RazorKit.SweetAlert2/) package from nuget.
```
PM> Install-Package RazorKit.SweetAlert2
```
Add related scripts and implement. [Reference:](https://sweetalert2.github.io/#download)
```csharp
Show Alert
@using RazorKit
@{
var alert =
Html.Swal()
.Title("Good job!")
.Text("You clicked the button!")
.Icon("question")
.Footer("footer of the alert");
}
document.getElementById('alertButton').addEventListener('click', function () {
@alert.Fire()
});
```