GitXplorerGitXplorer
V

Jazor

public
0 stars
0 forks
2 issues

Commits

List of commits on branch main.
Unverified
1eee27b814ff4e698aeb5ac724c08198d993aecd

Example project added

VVaclavElias committed 4 years ago
Unverified
aa2cc4ed08332d7e5b2f45b268c78c5be82ab6ae

Folder structure changed

VVaclavElias committed 4 years ago
Verified
98e82d2271ecc21e97dabca92ff14f2cfec632d3

Merge pull request #3 from VaclavElias/add-license-1

VVaclavElias committed 4 years ago
Verified
e45ba1fcbf61f6638cb65802436de5c937e5b3d7

Create LICENSE

VVaclavElias committed 4 years ago
Verified
18cc7f45ffe82ccf8145f0bf8eb1d04720d3a5e9

Update README.md

VVaclavElias committed 4 years ago
Verified
96870e9379532d2d4a7984f502795d6e64f54af4

Update README.md

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>