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 and DataTables, without the hassle of writing complex JavaScript or HTML code manually.
Install the RazorKit.DataTables package from nuget.
PM> Install-Package RazorKit.DataTables
Add related scripts and style links and implement. Reference:
@using RazorKit
@(Html.DataTable<Person>()
.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())
using RazorKit.DataTables;
[HttpPost]
public JsonResult GetDataResult(DataRequest request)
{
var result = ctx.People.ToDataResult(request);
return Json(result);
}
Install the RazorKit.ChartJs package from nuget.
PM> Install-Package RazorKit.ChartJs
Add related scripts and implement. Reference:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@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())
Install the RazorKit.SweetAlert2 package from nuget.
PM> Install-Package RazorKit.SweetAlert2
Add related scripts and implement. Reference:
<button id="alertButton">Show Alert</button>
@using RazorKit
@{
var alert =
Html.Swal()
.Title("Good job!")
.Text("You clicked the button!")
.Icon(SwalIcon.Question)
.Footer("footer of the alert");
}
<script>
document.getElementById('alertButton').addEventListener('click', function () {
@alert.Fire()
});
</script>