Getting Started - TheHeadmaster/Neural GitHub Wiki

Getting Started

Neural uses views to display pages to the client. Views consist of a *.nrl file, which is similar to an html document, and an underlying *.nrl.cs file, which acts as a view model.

Here's an example of what a nrl file looks like:

<View title="Profile Page">
    <div id="shortName">{Binding Person.ShortName}</div>
    <div id="canBeWhatever">{Binding Person.Age}</div>
    <p style="font-family:consolas;">
        I'm {Binding.FullName}, and I'm <span>{Binding Person.Height}</span> cm tall.
    </p>
    <input type="button" onClick="{Binding onDetailsButtonClick}">See more details...</input>
    <input type="button" onClick="onExitButtonClick">Exit page</input>
    <div class="page-divider"></div>
    <div style="font-size:8px;">{Binding License}</div>
</View>

It's a lot like html, except there's a root element named "View", and there's bindings on the page? and there's events, but there's no javascript calls? Are they hiding?

No, it's actually all contained in the underlying class file. Let's take a look:

public class ProfileView : View
{
    public Person Person { get; set; }
    public string License => This page is licensed under the MIT license.

    public async Task OnDetailsButtonClick(Element sourceElement, ClickEventArgs args)
    {
        if (args.ClickType == ClickType.DoubleClick)
        {                
            this.InsertElementAfter(sourceElement, new Div("Here's some more details about me.")
        }
    }
        
    public async Task OnExitButtonClick(Element sourceElement, ClickEventArgs args)
    {
        this.SwitchToView<HomeView>();
    }
}

The bindings on the page correspond to public properties of the same name. Neural discovers the properties automatically when loading the view and binds them. The same is true for the events, though they have to match the signature of the event that they are subscribing to, or Neural will ignore them. An important note is that Neural's discovery process is case insensitive; so while it is legal to have two members with the same name but different casing, if they are bound to a property, Neural will silently throw an error:

public string Naughty { get; set; }
public string naughty { get; set; } // throws an error

Either make one private or make one not a property, or better still, change the name.

⚠️ **GitHub.com Fallback** ⚠️