Jx.Cms開發筆記（五）-文章編輯頁面標簽設計

標簽頁的樣子

設計思路

1. 與其他輸入框一樣，存在一個Label標簽，由於這里不像其他輸入框一樣可以直接使用Row標簽，所以這里需要額外增加。

2. 使用Tag組件顯示所有的標簽，我們在Blazor 組件庫 BootstrapBlazor 中Tag組件介紹中寫過使用方法。

3. 使用AutoComplete組件輸入新的標簽，我們同樣在Blazor 組件庫 BootstrapBlazor 中AutoComplete組件介紹中介紹過使用方法。

相關代碼

razor:

<label class="form-label">標簽</label>
        <div class="row g-3">
            @if (Article.Tags != null)
            {
                foreach (var tag in Article.Tags)
                {
                    <div class="col-auto">
                        <Tag Color="Color.Primary" ShowDismiss="true" OnDismiss="() => TagClose(tag)">@tag</Tag>
                    </div>
                }
            }
            <div class="col-auto">
                <AutoComplete onkeydown="enter_down(event);" ShowLabel="false" Items="@AllTags" IsSelectAllTextOnFocus="true" OnEnterAsync="TagPress"/>
            </div>
        </div>

code:

    private Task TagPress(string value)
    {
        if (value.IsNullOrEmpty() || Article.Tags.Any(x => x == value))
        {
            return Task.CompletedTask;
        }
        
        Article.Tags.Add(value);
        StateHasChanged();
        return Task.CompletedTask;
    }
    
    private Task TagClose(string tagName)
    {
        Article.Tags.Remove(tagName);
        StateHasChanged();
        return Task.CompletedTask;
    }

js:

function enter_down(event) {
    if(event.keyCode == "13") {
        stopDefault(event);
    }
}

function stopDefault(e) {
    //如果提供了事件對象，則這是一個非IE瀏覽器   
    if(e && e.preventDefault) {
        //阻止默認瀏覽器動作(W3C)  
        e.preventDefault();
    } else {
        //IE中阻止函數器默認動作的方式   
        window.event.returnValue = false;
    }
    return false;
} 

注意事項

由於瀏覽器行為中如果在一個Form中有且僅有一個類型為Submit的按鈕，當在按下回車時，會自動觸發提交行為。

這里我們的AutoComplete組件也是使用回車鍵來觸發添加Tag的邏輯，與瀏覽器默認行為沖突，所以我們要屏蔽掉回車鍵的onkeydown事件。

但是blazor並不支持單按鍵的屏蔽邏輯，所以我們只能在這里借助Js來實現。

blazor的razor文件里不能直接寫js塊，但是可以在標簽里直接調用Js方法或者寫簡單的js語句，如<AutoComplete onkeydown="enter_down(event);" ShowLabel="false" Items="@AllTags" IsSelectAllTextOnFocus="true" OnEnterAsync="TagPress"/>里的onkeydown。