@page "/contact"
 
<h3>Contact Us</h3>
 
<EditForm Model="@contactModel" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div>
        <label for="name">Name:</label>
        <InputText id="name" @bind-Value="contactModel.Name" />
    </div>
    <div>
        <label for="email">Email:</label>
        <InputText id="email" @bind-Value="contactModel.Email" />
    </div>
    <div>
        <label for="message">Message:</label>
        <InputTextArea id="message" @bind-Value="contactModel.Message" />
    </div>
    <button type="submit">Submit</button>
</EditForm>
 
@code {
    private ContactModel contactModel = new ContactModel();
 
    private void HandleValidSubmit()
    {
        // Process the contact form submission
    }
 
    public class ContactModel
    {
        public string Name { get; set; }
        public string Email { get; set; }
        public string Message { get; set; }
    }
}

@page "/data"
 
<h3>Data Management</h3>
 
@if (dataItems == null)
{
    <p>Loading...</p>
}
else
{
    <ul>
        @foreach (var item in dataItems)
        {
            <li>@item</li>
        }
    </ul>
}
 
@code {
    [Inject] private IDataService DataService { get; set; }
 
    private List<string> dataItems;
 
    protected override async Task OnInitializedAsync()
    {
        dataItems = await DataService.GetDataAsync();
    }
}
 
public interface IDataService
{
    Task<List<string>> GetDataAsync();
}
 
public class DataService : IDataService
{
    public Task<List<string>> GetDataAsync()
    {
        // Simulate data retrieval
        return Task.FromResult(new List<string> { "Item 1", "Item 2", "Item 3" });
    }
}

@page "/state"
 
<h3>State Management</h3>
 
<input type="text" @bind="message" />
<p>Message: @message</p>
 
<button @onclick="SaveMessage">Save</button>
 
@code {
    private string message;
 
    [Inject] private IJSRuntime js { get; set; }
 
    private async Task SaveMessage()
    {
        await js.InvokeVoidAsync("localStorage.setItem", "message", message);
    }
}

function loadScriptOnce(url, callback) {
    if (!window.loadedScripts) {
        window.loadedScripts = {};
    }
 
    if (window.loadedScripts[url]) {
        callback();
    } else {
        var script = document.createElement('script');
        script.src = url;
        script.onload = function () {
            window.loadedScripts[url] = true;
            callback();
        };
        document.head.appendChild(script);
    }
}

@page "/page-with-jquery"
 
<h3>Page with JQuery</h3>
 
@code {
    [Inject] IJSRuntime JS { get; set; }
 
    protected override async Task OnInitializedAsync()
    {
        await JS.InvokeVoidAsync("loadScriptOnce", "/path/to/jquery.js", DotNetObjectReference.Create(this));
    }
 
    [JSInvokable]
    public static void ScriptLoadedCallback()
    {
        // Script has been loaded
    }
}

function loadScriptOnce(url, callback) {
    if (!window.loadedScripts) {
        window.loadedScripts = {};
    }
 
    if (localStorage.getItem(url)) {
        callback();
    } else {
        var script = document.createElement('script');
        script.src = url;
        script.onload = function () {
            window.loadedScripts[url] = true;
            localStorage.setItem(url, true);
            callback();
        };
        document.head.appendChild(script);
    }
}