ASP.NET Core中的Blazor组件介绍

@code{
    public string Name { get; set; }
}

            Pages.Test test = new Pages.Test();
            test.Name = "Blazor";

<img alt="Company logo" src="/images/logo.png" />

@page "/"

        [HttpGet("Test/{Id}")]
        public string Test([FromQuery]int Id)
        {
            return "123";
        }

@page "/test"
@page "/test/{Id}"

<h2>@Id</h2>

@code{
    [Parameter]
    public string Id { get; set; } = "123";
}

InvalidOperationException: Unable to set property 'Id' on object of type 'BlazorApp1.Pages.Test'. The error was: Unable to cast object of type 'System.String' to type 'System.Int32'.

<h2>@Title</h2>

@code{
    [Parameter]
    public string Title { get; set; } = "test";
}

<Test Title="111" />

<h2>@Title</h2>

@code{
    [Parameter]
    public string Title { get; set; } = "test";

    private string _Title;
    protected override void OnInitialized()
    {
        _Title = Title;
    }
}

<div>@Children</div>

@code{
    [Parameter]
    public RenderFragment Children { get; set; }
}

@page "/"

<Test Children=r />
@code{
    private RenderFragment r =@<h1>测试子内容</h1>;
}

<input id="1"
       maxlength="@Maxlength"
       placeholder="@Placeholder"
       required="@Required"
       size="@Size" />

<input id="2"
       @attributes="InputAttributes" />

@code {
    #region
    private string Maxlength { get; set; } = "10";
    private string Placeholder { get; set; } = "Input placeholder text";
    private string Required { get; set; } = "required";
    private string Size { get; set; } = "50";
    #endregion

    // 使用字典键值对表示
    public Dictionary<string, object> InputAttributes { get; set; } = new Dictionary<string, object>()
    {
            { "maxlength", "10" },
            { "placeholder", "Input placeholder text" },
            { "required", "required" },
            { "size", "50" }
     };
}

        public bool CaptureUnmatchedValues { get; set; }

@code{
    // 这个属性没有用，随便起个名字测试
    [Parameter]
    public string A { get; set; }

    [Parameter(CaptureUnmatchedValues = true)]
    public IDictionary<string, object> AdditionalAttributes { get; set; }
}

<Test A="A"
      B="B"
      C="C" />

<ul>
    @foreach (var item in AdditionalAttributes)
    {
        <li>@item.Key - @item.Value</li>
    }
</ul>

@code{
    // 这个属性没有用，随便起个名字测试
    [Parameter]
    public string TTT { get; set; }

    [Parameter(CaptureUnmatchedValues = true)]
    public IDictionary<string, object> AdditionalAttributes { get; set; }
}

@page "/"

<Test TTT="ces"
      id="useIndividualParams"
      maxlength="10"
      placeholder="Input placeholder text"
      required="required"
      size="50" />

@page "/"
<Test @ref="_test" />
@code{
    private Test _test;
}

    // 能够向所有正在打开的 Index.razor 页面发送通知
    public static class MyUIServer
    {
        // 向所有人发送通知
        public static async Task ToMessage(string message)
        {
            if (events != null)
            {
                await events.Invoke(message);
            }
        }
        public static void AddEvent(Func<string, Task> func)
        {
            events += func;
        }
        public static void RemoveEvent(Func<string, Task> func)
        {
            events -= func;
        }
        private static event Func<string, Task> events;
    }

@page "/"
@using BlazorApp1.Data
@implements IDisposable

<input @bind="_message" />
<button @onclick="Btn">发送消息</button>
<ul>
    @foreach (var item in messageList)
    {
        <li>@item</li>
    }
</ul>

@code {
    private string _message;
    private List<string> messageList = new List<string>();
    // 进入页面时
    protected override void OnInitialized()
    {
        MyUIServer.AddEvent(UIEvent);
    }

    // 退出当前页面UI后移除该事件
    public void Dispose()
    {
        MyUIServer.RemoveEvent(UIEvent);
    }

    protected async Task UIEvent(string message)
    {
        // 组件自带的方法，用于外部调用更新状态
        await InvokeAsync(() =>
        {
            messageList.Add(message);
            StateHasChanged();
        });
    }

    // 向所有正在访问 Index.razor 页面发送消息
    private async Task Btn()
    {
        await MyUIServer.ToMessage(_message);
    }

}

    public class NotifierService
    {
        public async Task Update(string key, int value)
        {
            if (Notify != null)
            {
                await Notify.Invoke(key, value);
            }
        }

        public event Func<string, int, Task> Notify;
    }

@page "/"
@using BlazorApp1.Data
@inject NotifierService Notifier
@implements IDisposable

<p>Last update: @_lastNotification.key = @_lastNotification.value</p>

@code {
    private (string key, int value) _lastNotification;

    protected override void OnInitialized()
    {
        Notifier.Notify += OnNotify;
    }

    public async Task OnNotify(string key, int value)
    {
        // 组件自带的方法，用于外部调用更新状态
        await InvokeAsync(() =>
        {
            _lastNotification = (key, value);
            StateHasChanged();
        });
    }

    // 退出当前页面UI后移除该事件
    public void Dispose()
    {
        Notifier.Notify -= OnNotify;
    }
}

@page "/test"
@using BlazorApp1.Data
@inject NotifierService Notifier
Key：
<input @bind="Key" />
Value:
<input @bind="Value" />
<button @onclick="Update">更新</button>

@code{
    private string Key { get; set; }
    private int? Value { get; set; }
    private async Task Update()
    {
        await Notifier.Update(Key, Value.Value);
        Key = string.Empty;
        Value = null;
    }
}

@page "/"
@using BlazorApp1.Data

Key：
<input @bind="_key" />
Value：
<input @bind="_value" />
<button @onclick="Add">添加</button>
<button @onclick="Remove">移除</button>
<ul>
    @foreach (var item in dic)
    {
        <li @key="item.Key">@item.Key - @item.Value</li>
    }
</ul>

@code {
    private int? _key;
    private int _value;
    private List<MyData> dic { get; set; } = new List<MyData>();
    private void Add()
    {
        if (_key == null)
            return;
        dic.Add(new MyData
        {
            Key = _key.Value,
            Value = _value
        });
        _key = null;
    }
    private void Remove()
    {
        if (_key == null)
            return;
        dic.Remove(dic.First(x => x.Key == _key.Value));
        _key = null;
    }
}

@code{
    protected int Id { get; set; }
}

@inherits TestBase
@code{ 
    public int Get()
    {
        return Id;
    }
}

@page "/"
@attribute [Authorize]

@html

@code{ 
    public MarkupString html = (MarkupString)"<h1> Test </h1>";
}