S&box Wiki

Home / History for A Razor Overview

Revision Difference

ui-razor#547815

<title>Razor</title>⤶ ⤶ # What are Razor components?⤶ ⤶ Asp.net has this thing called [Razor](https://en.wikipedia.org/wiki/ASP.NET_Razor).⤶ ⤶ Filename is `FriendName.razor`⤶ ⤶ ```⤶ @using Sandbox;⤶ @using Sandbox.UI;⤶ @namespace Menu⤶ ⤶ <root class="friend-name @FriendClasses()">@Friend.Name</root>⤶ ⤶ @code⤶ {⤶ public Friend Friend { get; set; }⤶ ⤶ string FriendClasses()⤶ {⤶ if (Friend.IsMe)⤶ return "is-me";⤶ ⤶ if (Friend.IsFriend)⤶ return "is-friend";⤶ ⤶ return "";⤶ }⤶ }⤶ ```⤶ ⤶ As you can see, it's html with c# mixed in. This code creates a new panel class called `FriendName`, which just shows a friend's name.⤶ ⤶ # Loops⤶ ⤶ Where `Categories` is a list of categories.⤶ ⤶ ```⤶ @foreach ( var category in Categories ) ⤶ {⤶ var c = category.category == CurrentCategory ? "active" : "";⤶ <button @onclick=@( () => ChangeCategory( category.category )) class=@c icon="@category.icon">@category.title</button>⤶ }⤶ ```⤶ ⤶ # Panels⤶ ⤶ If an html element starts with a capital letter then we assume it's a panel and will try to create/use that class directly. This gives your code a rigidity - because if that panel type changes, your old code will need to too.⤶ ⤶ You can also set properties on the class directly with attributes. If your attribute starts with a capital letter it will be assumed to be a member of the panel.⤶ ⤶ Here's `LobbyChatEntry`⤶ ⤶ ```⤶ @using Sandbox;⤶ @using Sandbox.UI;⤶ @namespace Menu.Lobby⤶ ⤶ <root class="card">⤶ ⤶ <div class="card-image" style="background: url( avatar:@Entry.Friend.Id )">⤶ </div>⤶ <div class="card-body">⤶ <row>⤶ <FriendName Friend=@Entry.Friend></FriendName>⤶ <div class="time">@Entry.Created.ToShortTimeString()</div>⤶ </row>⤶ <h3>@Entry.Message</h3>⤶ </div>⤶ ⤶ </root>⤶ ⤶ @code⤶ {⤶ public Lobby.ChatEntry Entry { get; set; }⤶ }⤶ ⤶ ```⤶ ⤶ and here's a snippet of `LobbyChat`⤶ ⤶ ```⤶ @foreach (var entry in Lobby.ChatEntries )⤶ {⤶ <LobbyChatEntry Entry=@entry></LobbyChatEntry>⤶ }⤶ ```⤶ ⤶ You can see how we use LobbyChatEntry directly, and set Entry directly.⤶ ⤶ # Panel Events⤶ ⤶ You can hook regular panel events with attributes starting with `@on`. Here are some examples.⤶ ⤶ ```⤶ <button @onclick=@SaveChanges>Save Changes</button>⤶ ⤶ <button @onclick=@( () => Log.Info( "Clicked!" ) )>Save Changes</button>⤶ ⤶ <button @onclick=@( ( PanelEvent e ) => Log.Info( $"Clicked {e.This}!" ) )>Save Changes</button>⤶ ```⤶

Account Management

Special Pages

Wiki List