Marvin's Blog【程式人生】

Ability will never catch up with the demand for it

27 Aug 2021

Blazor文档阅读【十一】

Blazor 》 Component。

ASP.NET Core Blazor data binding

例子略。

Multiple option selection with elements

略。

Binding element options to C# object null values

略。

Unparsable values

略。

Format strings

略。

Custom binding formats

略。

Binding with component parameters

将子组件的辖属绑定到父组件的辖属是一个常见的场景,称为链式绑定。

组件参数允许以@bind-{PROPERTY}语句来绑定一个父组件的辖属。

略。

Bind across more than two components

绑定参数时可以跨越多重子组件,但是要保证:

  • 变更通知必须从下到上
  • 新参数值必须从上到下

例子略。

ASP.NET Core Blazor event handling

事件的委托处理通过@on{DOM EVENT}="{DELEGATE}"来指定。

对于事件处理器:

  • 支持以Task为返回值的异步委托处理
  • 外托事件处理器自动触发一个UI渲染,无需手动调用StateHasChanged
  • 会录记异常

例子略。

Event arguments

如果不被使用,事件参量的类型可不指定。

内携的事件参量如下:

  • 事件,类型,DOM事件
    • Clipboard, ClipboardEventArgs, oncut, oncopy, onpaste
    • 剩余略

更多参考:

自建事件参量需要以下几步。

首先JS中定义事件创建函数:

function eventArgsCreator(event) { 
  return {
    customProperty1: 'any value for property 1',
    customProperty2: event.srcElement.value
  };
}

向Blazor注册:

<script>
  Blazor.registerCustomEventType('customevent', {
    createEventArgs: eventArgsCreator;
  });
</script>

在C#中定义一个对照的参量类:

public class CustomEventArgs : EventArgs
{
    public string CustomProperty1 {get; set;}
    public string CustomProperty2 {get; set;}
}

在C#中定义一个事件的类型:

[EventHandler("oncustomevent", typeof(CustomEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
static class EventHandlers
{
}

自定义事件需要显示将其的bubbles设置为true

一个自定义的剪贴板例子。

Lambda expressions

可以用lambda表达式作为受托事件处理器:

    <button @onclick="@(e => heading = "New heading!!!")">
        Update heading
    </button>

若需额外参数, 则:

        <button @onclick="@(e => UpdateHeading(e, buttonNumber))">
            Button #@i
        </button>

@code {
    private string heading = "Select a button to learn its position";

    private void UpdateHeading(MouseEventArgs e, int buttonNumber)
    {
        heading = $"Selected #{buttonNumber} at {e.ClientX}:{e.ClientY}";
    }
}

不要直接使用循环变量,而是需要找个中间值缓冲下。

EventCallback

当下级组件发生事件时需要调用上级组件的的方法,该怎么办?使用EventCallback。

Prevent default actions

通过@on{DOM EVENT}:preventDefault可以阻止DOM的默认事件:

    <input value="@count" @onkeydown="KeyHandler" @onkeydown:preventDefault />

Stop event propagation

通过@on{DOM EVENT}:stopPropagation可以停止事件传播。

Focus an element

可以调用元素引用之上的FocusAsync方法来在代码中聚焦一个元素:

@page "/event-handler-example-8"

<p>
    <input @ref="exampleInput" />
</p>

<button @onclick="ChangeFocus">
    Focus the Input Element
</button>

@code {
    private ElementReference exampleInput;

    private async Task ChangeFocus()
    {
        await exampleInput?.FocusAsync();
    }
}

(本篇完)

Categories