透過 EventCallBack 子元件回傳資料給母元件(頁面)範例
緣起
Blazor可以讓元件變成一個小部份放到另一個頁面或元件中，那麼元件間的資料傳遞就會是很常見的狀況。這一篇用一個簡單的方式來示範如何透過 EventCallBack 來傳遞資料。
子元件
透過屬性，宣告為 EventCallback 來傳遞，相關的範例程式碼如下：
<h3>Calendar</h3>
<input type="text" @bind="txtDate" />
<button @onclick="returnData">傳回</button>
@code {
private string txtDate = DateTime.Now.ToString("yyyy/MM/dd");
[Parameter]
public EventCallback<string> OnReturnDate { get; set; }
private async void returnData()
{
await OnReturnDate.InvokeAsync(txtDate);
}
}
主要是透過 Parameter 的 InvokeAsync 回傳那一段
使用的母元件(頁面)
畫面的部分：
日期：<input type="text" @bind="rtnDate" />
<button @onclick="CalenderShow">顯示Calendar</button>
@if (showCalendar)
{
<Calendar OnReturnDate="returnData"></Calendar>
}
C# 程式碼的部分：
private string rtnDate = "";
private bool showCalendar = false;
private void CalenderShow()
{
showCalendar = true;
}
protected void returnData(string returnDate)
{
rtnDate = returnDate;
showCalendar = false;
}
以下是簽名：
- 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
| Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |
