Blazor(13)-Binding

Razor元件可以使用@符號及@bind來為DOM元素提供資料及事件細節功能。 @符號能夠將Code區塊內的屬性綁定到Html中， @bind可以將輸入元件的值綁定到Code區塊中的屬性，最後，「@bind:event="事件"」可以繫結輸入元件的事件。這邊會實作一個留言板功能來介紹Blazor的幾個繫結方法。

資料繫結

單向繫結

將Code區塊中的屬性的值，透過@符號將值綁定至Html中。這邊建立一個Comment.razor做為留言板的元件，新增Comments屬性做為留言內容，並將Comments值綁定至留言板(comment-content)。程式碼如下：

@page "/comment"

<div class="comments">
    <div class="comment-content">
        @Comments
    </div>
    <div class="post-comment">
    </div>
</div>

@code {
    public string Comments { get; set; } = "Content";
}

Comment.razor

新增完畢後，連結至「https://localhost:[port]/BlazorDemo/comment」之後就會看到Code區塊Comments的值被綁定到留言板中了。

雙向繫結

但留言板是給User留言用的，因此我們要新增一個輸入框來讓User輸入留言，之後在顯示在留言板上。程式碼如下：

@page "/comment"

<div class="comments">
    <div class="comment-content">
        @Comments
    </div>
    <div class="post-comment">
        <input type="text" @bind=Comments />
    </div>
</div>

@code {
    public string Comments { get; set; } = string.Empty;
}

Comment.razor

這樣就將textbox的值，繫結到Html中了。在User輸入完畢後(指標離開textbox)，就會將值顯示在留言版中了。

事件繫結

確定資料繫結都沒問題後，我們來進一步完善留言板的功能吧。接下來我們要做一個預覽框，讓使用者在輸入的「同時」，將輸入資料繫結到預覽框中。並新增一個按鈕將使用者留言送出到留言板，同時清空輸入框。

1.新增預覽框及預覽屬性值，並使用「@bind:event="oninput"」來控制輸入時同時繫結資料。這邊可以看到在輸入的同時，預覽框就會同步顯示輸入框所輸入的內容。

@page "/comment"

<div class="comments">
    <div class="comment-content">
        @Comments
    </div>
    <div class="post-comment">
        <input type="text" @bind=Preview @bind:event="oninput" />
    </div>
    <div class="Preview">
        @Preview
    </div>
</div>

@code {
    public string Comments { get; set; } = string.Empty;

    public string Preview { get; set; } = string.Empty;
}

Comment.razor

2.新增按鈕，使用「@onclick=[方法名]」來觸發按鈕點擊事件。將預覽值套用至留言板，並清空預覽值。

@page "/comment"

<div class="comments">
    <div class="comment-content">
        @Comments
    </div>
    <div class="post-comment">
        <input type="text" @bind=Preview @bind:event="oninput" />
        <input type="button" @onclick=ButtonOnClick value="送出" />
    </div>
    <div class="Preview">
        @Preview
    </div>
</div>

@code {
    public string Comments { get; set; } = string.Empty;

    public string Preview { get; set; } = string.Empty;

    protected void ButtonOnClick()
    {
        Comments = Preview;

        Preview = string.Empty;
    }
}

Comment.razor