Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aeagle/razorx.net
An ASP.NET MVC view engine supplementing Razor with React/JSX style component composability
https://github.com/aeagle/razorx.net
asp-net-mvc csharp dotnet jsx razor viewengine
Last synced: 1 day ago
JSON representation
An ASP.NET MVC view engine supplementing Razor with React/JSX style component composability
- Host: GitHub
- URL: https://github.com/aeagle/razorx.net
- Owner: aeagle
- License: mit
- Created: 2019-12-28T18:14:30.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-31T20:37:36.000Z (over 1 year ago)
- Last Synced: 2024-05-01T15:11:59.875Z (7 months ago)
- Topics: asp-net-mvc, csharp, dotnet, jsx, razor, viewengine
- Language: JavaScript
- Homepage:
- Size: 586 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# razorx.net
An ASP.NET MVC view engine supplementing Razor with React/JSX style component composability allowing you to do this:
### views/home/index.cshtml
```html
Tab 1
Tab 2
Tab 3
```
When you create these partials:
### /views/shared/tabcontainer.cshtml
```html
@Model.children
```
### /view/shared/tab.cshtml
```html
```
## Setup
In a .NET framework web application in your Global.asax.cs file, add:
```
RazorXViewEngine.Initialize();
```
## Why?
I've been writing React applications using JSX/TSX for a while now and appreciate the composability of creating reusable components with it.
With ASP.NET / Razor I have come to find the current methods of creating reusable presentational components lacking:
- *Partials* - Can't wrap other content unless you specifically create start and end partials and passing properties via the object model can be cumbersome.
- *HTMLHelpers / TagHelpers* - You have to write C# code which renders markup. Not to mention you can't use tag helpers in ASP.NET MVC (non-core).
- *@helper* - Doesn't deal with composability of multiple helpers in a nice way.
## How it works
In a nutshell `cshtml` files are pre-processed with a `VirtualFileProvider` meaning the resulting file presented to the default Razor view engine is a `cshtml` file with 100% valid Razor syntax. The preprocessing carried out is as follows:
- A tag formed with the name `component-xxx` will be processed into a `@Html.Partial("xxx")`.
- If the tag is not self closing there will be 2 `@Html.Partial()` references for the start and end passing a property to determine if the partial should render the top or bottom portion of markup.
- All tag attributes are added to a dynamic object and passed as the model to the partial.
- If a partial contains `@Model.children` it will automatically split by the view engine to conditionally render the top or bottom portion of the markup based on property in the model.
## Complex example
Apart from the special `component-` tag the rest of the `cshtml` file is rendered by the default Razor view engine allowing you to use expressions and constructs as you normally would:
```html
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
vitae purus id urna ornare convallis. Mauris ac cursus tortor. Phasellus
pharetra lacus a nunc eleifend aliquam.
@foreach (var idx in Enumerable.Range(1, 3))
{
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
vitae purus id urna ornare convallis. Mauris ac cursus tortor. Phasellus
pharetra lacus a nunc eleifend aliquam.
}
```
## Things to look at
- Less naive preprocessor moving from Regex to Razor syntax tree parser
- Property validation / intellisense
- Precompiled Razor views
- ASP.NET Core implementation
## Disclaimer
The work here is very experimental, work in progress and un-tested at this moment. Treat it more as a proof of concept and use at your own risk.