初探 ASP.NET Blazor

@page "/GetList"

@using WebUrlListBlazorAP.Data
@inject WebUrlDataService service

<h3>GetList</h3>

<table class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Url</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in list)
        {
            <tr>
                <td>@item.Name</td>
                <td><a href="@item.Url" target="_blank">@item.Url</a></td>
            </tr>
        }
    </tbody>
</table>

@code {
    private List<WebUrlData> list = new List<WebUrlData>();

    protected override async Task OnInitializedAsync()
    {
        list = service.GetList();
    }
}

@page "/Insert"
<h3>InserUrlData</h3>

@using WebUrlListBlazorAP.Data
@inject WebUrlDataService service

<EditForm Model="@urlModel" OnSubmit="@Insert">
    <span>名稱</span><InputText @bind-Value="urlModel.Name" /> <br />
    <span>網址</span><InputText @bind-Value="urlModel.Url"></InputText> <br />
    <button type="submit">新增</button>
</EditForm>

@code {

    private WebUrlData urlModel = new();

    private void Insert()
    {
        service.Insert(urlModel.Name, urlModel.Url);
        urlModel.Name = string.Empty;
        urlModel.Url = string.Empty;
    }
}