GitXplorerGitXplorer
V

Jazor

public
0 stars
0 forks
2 issues

Commits

List of commits on branch main.
Verified
1f9a9aaddea03cb695623c2c5f008a983b15dd6f

Update README.md

VVaclavElias committed 4 years ago
Verified
d4d45cfab5fcb55d1358a112d4a0c84bd6f51e65

Update README.md

VVaclavElias committed 4 years ago
Verified
4e1cbbcc5d205dde150c6807ce21775ae48b0e45

Update README.md

VVaclavElias committed 4 years ago
Verified
d35a968f4c7b099311721fcfbd221747ddd0879c

Update README.md

VVaclavElias committed 4 years ago
Unverified
70d68d08b6b8e3ba29ba17b8ee3247779c456dd2

Solution file updated

VVaclavElias committed 4 years ago
Unverified
1ea82d9145c417447f128c72d708ddf1ce862505

Description added

VVaclavElias committed 4 years ago

README

The README file for this repository.

Jazor Experiment

This experiment library helps with very common actions on the website which involve repeating JavaScript code across multiple different projects. Click a button or a link, do something in the backend and UI. This library takes an approach rather updating whole HTML blocks than granular tags with JSON and JavaScript libraries, so there is no need fiddling and mapping JSON objects to whatever UI you have.

You might find this approach useful in certain project cases if you want to write minimum or no JavaScript. Still, JavaScript knowledge is required in certain scenarios.

There is a crossover with Blazor or rather Jazor is filling a gap between static HTML/Razor pages and Blazor.

When could you possibly use this library and not necessarily Blazor?

  • You have got many Partial views in Razor pages and views which you would like to reuse e.g.
public IActionResult OnGetNews() =>  Partial("_NewsPartial", 10);
  • You would like a hybrid of your current website and add simple SPA functionality
  • Your project doesn't require minimising traffic in between the browser and server

This library is using currently:  

  • TypeScript to handle all common actions workload
  • ASP.NET Core 5.0 TagHelpers to simplify using data- and a bit help with strongly typed Controllers and Actions

Requirements

  1. Add jazor.js to your Razor page or _Layout.
  2. Add @addTagHelper *, Jazor to your _ViewImports.cshtml

ToDo

  • Add more functionality
  • Make prompts and spinners pluggable

Examples

I will be heavily using Bootstrap in my examples.

Example 1

Load multiple delayed HTML / Partial Views.

  • Load News part
  • Load Top News part after 1 second
  • This will load your HTML from your desired url
    <div jazor-url="/examples/news">Loading...</div>
    <div jazor-url="@((nameof(ExamplesController), nameof(ExamplesController.TopNews), null))" jazor-delay="1">Loading...</div>

Example 2

Click a button or link to load HTML / Partial Views to your target element.

    <button jazor-click="/examples/itnews" jazor-target="content" type="button" class="btn btn-primary">Show .NET News</div>
    <button jazor-click="@((nameof(ExamplesController), nameof(ExamplesController.AngularNews), null))" jazor-target="content" type="button" class="btn btn-primary">Show Angular News</button>

    <div id="content">The content will be loaded here.</div>