クリックしたときにRefresh()メソッドを呼び出すボタンがページ(コンポーネント)にあります。次に、このメソッドはStateHasChanged()を呼び出しますが、ページを再ロードしません。 GetData()は、データベースからデータをロードするために外部APIを呼び出しています。
<button class="btn btn-warning" @onclick="Refresh">Refresh</button>
code {
protected override async Task OnInitializedAsync()
{
try
{
await GetData();
base.OnInitialized();
}
catch (Exception ex)
{
Console.WriteLine(ex.Message);
}
}
protected async Task GetData()
{
try
{
results = await HttpClient.GetJsonAsync<Results[]>(ServiceEndpoints.GET_RESULTS);
}
catch (Exception ex)
{
Console.WriteLine("Error retrieving data from Oracle.", ex.Message);
}
}
public void Refresh()
{
StateHasChanged();
}
私のページ(コンポーネント)には、変更可能な入力がプリロードされたフォームもあります。ユーザーがフォームを編集できるようにしたいが、ボタンをクリックしてページを更新できるようにして、元のデータに戻したい。これは以前のバージョンのBlazorで機能していましたが、これに関する既知の問題はありますか?
@page "/"
@inherits IndexBase
<EditForm Model="@results">
<label><strong>Select a job to view its current parameters</strong></label>
<div class="currentJobForm">
<InputSelect id="jobSelect" @bind-Value="jobSelected">
@foreach (var items in results)
{
<option value="@items.JOB_NAME">@items.JOB_NAME</option>
}
</InputSelect>
<button class="btn btn-warning" @onclick="SaveChanges" disabled="@IsDisabled">Save</button>
<button class="btn btn-warning" @onclick="Refresh">Refresh</button>
<button class="btn btn-danger" @onclick="DeleteJob">Delete Job</button>
</div>
<label><strong>Notify Parameters</strong></label>
<div class="notifyParametersForm">
@foreach (var item in results.Where(i => i.JOB_NAME == jobSelected))
{
<div class="issueDescription">
<label><strong>Issue Description</strong></label>
<InputText id="issueDesc" @bind-Value="item.JOB_HEADER" placeholder="Enter New Issue Description" />
</div>
<div class="sendSlack">
<label><strong>Send Slack</strong></label>
<InputSelect id="sendSlackSelect" @bind-Value="item.SENDSLACK">
@foreach (var items in InitializeData.SendSlacks)
{
<option value="@items.SendSlackName">@items.SendSlackName</option>
}
</InputSelect>
</div>
<div class="slackUser">
<label><strong>Slack User</strong></label>
<InputText id="slackUser" @bind-Value="item.SLACK_USER" placeholder="Enter New Slack User" />
</div>
<div class="slackChannel">
<label><strong>Slack Channel</strong></label>
<InputSelect id="sendSlackChannel" @bind-Value="item.SLACK_CHANNEL">
@foreach (var items in InitializeData.SlackChannels)
{
<option value="@items.SlackChannelName">@items.SlackChannelName</option>
}
</InputSelect>
</div>
<div class="slackUrl">
<label><strong>Slack URL</strong></label>
<InputText id="slackUrlTextBox" @bind-Value="item.SLACK_URL" placeholder="Enter New Slack Url" />
</div>
<div class="sendMail">
<label><strong>Send Mail</strong></label>
<InputSelect id="sendMailSelect" @bind-Value="item.SENDMAIL">
@foreach (var items in InitializeData.SendMails)
{
<option value="@items.SendMailName">@items.SendMailName</option>
}
</InputSelect>
</div>
<div class="mailFrom">
<label><strong>From:</strong></label>
<InputText id="from" @bind-Value="item.MAILFROM" placeholder="Enter New Mail From" />
</div>
<div class="mailTo">
<label><strong>To:</strong></label>
<InputText id="to" @bind-Value="item.MAILTO" placeholder="Enter New Mail To" />
</div>
<div class="subject">
<label id="subjectLabel"><strong>Subject:</strong></label>
<InputText id="subject" @bind-Value="item.EMAIL_SUBJECT" placeholder="Enter New Subject" />
</div>
}
</div>
</div>
値を元の値に戻す必要があります。 StateHasChanged
はページを更新しません。コンポーネントをリセットして、RenderTreeをチェックしてdom要素を更新する必要があるかどうかを確認します。ただし、値が変更されていないため、探している方法は更新されません。
StateHasChanged
の代わりにGetData()
を呼び出すこともできますが、APIに再度アクセスするのではなく、値を保存したい場合があります。
実用的な例を提供するためにコードを簡略化しました。
@page "/update-test"
<EditForm Model="@Item">
<div class="notifyParametersForm">
</div>
<div class="mailFrom">
<label><strong>From:</strong></label>
<InputText id="from" @bind-Value="Item.MAILFROM" placeholder="Enter New Mail From" />
</div>
<div class="mailTo">
<label><strong>To:</strong></label>
<InputText id="to" @bind-Value="Item.MAILTO" placeholder="Enter New Mail To" />
</div>
<div class="subject">
<label id="subjectLabel"><strong>Subject:</strong></label>
<InputText id="subject" @bind-Value="Item.EMAIL_SUBJECT" placeholder="Enter New Subject" />
</div>
<button class="btn btn-warning" @onclick="ResetInputs">Refresh</button>
</EditForm>
@code {
EmailItem Item;
protected override async Task OnInitializedAsync()
{
try
{
GetData();
base.OnInitialized();
}
catch (Exception ex)
{
Console.WriteLine(ex.Message);
}
}
protected void GetData()
{
Item = new EmailItem()
{
MAILFROM = "[email protected]",
MAILTO = "[email protected]",
EMAIL_SUBJECT = "subject",
};
}
public void ResetInputs()
{
GetData();
}
public class EmailItem
{
public string MAILTO { get; set; }
public string MAILFROM { get; set; }
public string EMAIL_SUBJECT { get; set; }
}
}
文字列値をバインドすることでそれを行いました。値を機能させるために本文ページに値を表示する必要はありません。文字列を大文字から小文字に変更します。面白いことに、これは文字列値でのみ機能します。
NAVMENU ----------------------
<button type="button" class="btn btn-warning border-secondary" @onclick="runSearch">Search</button>
@code {
public string pageReload = "Search";
private void runSearch()
{
if (pageReload == "Search") { pageReload = "search"; } else { pageReload = "Search"; }
NavigationManager.NavigateTo($"/Page2/{pageReload}", false);
}
}
Page 2------------------------------------------------------------------------
@page "/Datatest2/{pageReload}"
<h1>page will now refresh every time</h1>
@code{
[Parameter]
public string pageReload { get; set; }
}