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.

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 and DataTables, without the hassle of writing complex JavaScript or HTML code manually.

Using DataTables

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);
}

Using ChartJs

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())

Using SweetAlert2

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>