JSViewComponents demo

Demo for JSViewComponents, an extension of standard ASP.NET Core View components which allows to easily create visual components with added JavaScript/TypeScript functionality for ASP.NET projects.

JSViewComponents source code and more info at GitHub

Using generic JSViewComponents

Components SingleItem showing data for a single alumn and a single course.

First name	John
Last name	Smith
Birthdate	1/1/91 12:00:00 AM

@{
    JSViewComponents.JSVC.SingleItem.SingleItemViewComponent alumnComponent =
        new JSViewComponents.JSVC.SingleItem.SingleItemViewComponent(
            "alumn",
            Alumn.SampleAlumns.First(),
            null
        );
}
<jsvc component="alumnComponent"></jsvc>

Code	MATH
Course	Maths
Credits	32

@{
    JSViewComponents.JSVC.SingleItem.SingleItemViewComponent courseComponent =
        new JSViewComponents.JSVC.SingleItem.SingleItemViewComponent(
            "course",
            Course.SampleCourses.First(),
            null
        );
}
<jsvc component="courseComponent"></jsvc>

Two differents sets of data using same TableViewComponent, but with different CSS styles (click on the headers to get sorted data).

First name	Last name	Birthdate
John	Smith	1/1/91 12:00:00 AM
Boris	Spasky	2/2/92 12:00:00 AM
Fulanito	De Tal	3/3/93 12:00:00 AM
Li	Cheng	4/4/94 12:00:00 AM

@{
    JSViewComponents.JSVC.Table.TableViewComponent alumnsTableComponent =
        new JSViewComponents.JSVC.Table.TableViewComponent(
            "alumns",
            Alumn.SampleAlumns,
            null,
            Url.Action("GetAll", "Alumn", null, Context.Request.Scheme)
        );
}
<jsvc component="alumnsTableComponent"></jsvc>

Code	Course	Credits
MATH	Maths	32
ECON	Economics	30
PHIL	Philosophy	26
HIST	History	16

@{
    JSViewComponents.JSVC.Table.TableViewComponent coursesTableComponent =
        new JSViewComponents.JSVC.Table.TableViewComponent(
            "courses",
            Course.SampleCourses,
            null,
            Url.Action("GetAll", "Course", null, Context.Request.Scheme)
        );
}
<jsvc component="coursesTableComponent"></jsvc>

Extending JSViewComponents to create custom components

Report card for: Smith, John

MATH	7.5
ECON	6.3
PHIL	5
HIST	3.2