Link 验证 blazor 后到不同的页面
Link to different page after validation blazor
你好,我想问一下有没有办法将验证和 link 提交到 BLAZOR 中的其他页面
我就是这样 link 取消到其他页面的
<NavLink href="@($"/personal/list/1")">
<button class="btn btn-primary" @onclick="CloseModal">@Loc["cancel"]</button>
</NavLink>
那是我的提交按钮
<button type="submit" class="btn btn-success">@Loc["save"]</button>
这就是其中按钮的编辑模型
<EditForm Model="PersModel" OnValidSubmit="@CreatePersonal">
<FluentValidator TValidator="PersonalViewModelValidator" />
这就是有效提交到 API
的连接
protected async Task CreatePersonal()
{
var token = Storage["JWT-Token"];
bool personalExist = false;
Http.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", token);
//Convert Selected values into the Pers database values
PersModel.Pers.Group = PersModel.SelectedGruppe?.Name;
PersModel.Pers.Anrede = PersModel.SelectedAnredeName;
PersModel.Pers.Grad = PersModel.SelectedGradName;
PersModel.Pers.Titel = PersModel.SelectedTitelName;
PersModel.Pers.Department = PersModel.SelectedAbteilungName;
PersModel.Pers.Group = PersModel.SelectedGruppeName;
PersModel.Pers.PrevDepartment = PersModel.SelectedPrevAbteilungName;
PersModel.Pers.PrevGroup = PersModel.SelectedPrevGruppeName;
PersModel.Pers.Uni = PersModel.SelectedStaetteName;
//on input select after editing the --Select-- is converted into value
try
{
BoolValue uh = await Http.GetFromJsonAsync<BoolValue>(Storage["environment_uri"] + "/personal/exists/" + PersModel.Pers.PersName);
personalExist = uh.Value;
}
catch (Exception ex)
{
Logger.LogWarning(ex, "Failed to load BoolValue uh");
Storage.SetItem("Transaction", "errorload");
}
if (personalExist == false && PersModel.Pers.PersName != "_add_")
{
await Http.PostAsJsonAsync(Storage.GetItem("environment_uri") + "/personal", PersModel.Pers); // thats the one i add here
Storage.SetItem("Transaction", "modified");
await OnParametersSetAsync();
CloseModal();
}
else if (isEdit == true)
{
// here was post in original
await Http.PutAsJsonAsync(Storage.GetItem("environment_uri") + "/personal", PersModel.Pers); // this update
CloseModal();
Storage.SetItem("Transaction", "modified");
await OnParametersSetAsync();
}
else if (isEdit == false && personalExist == true)
{
Storage.SetItem("Transaction", "errorsame");
await OnParametersSetAsync();
}
}
这就是验证 class
public PersonalViewModelValidator()
{
CascadeMode = CascadeMode.StopOnFirstFailure;
RuleFor(data => data.Pers.PersName).NotEmpty().WithMessage("is a required field.");
RuleFor(data => data.Pers.Bezeichnung).NotEmpty().WithMessage("is a required field.");
RuleFor(data => data.Pers.Id).NotEmpty().WithMessage("is a required field.");
RuleFor(data => data.Pers.Street).NotEmpty().WithMessage("is a required field.");
RuleFor(data => data.Pers.HouseNumber).NotEmpty().WithMessage("is a required field.");
RuleFor(data => data.Pers.PLZ).NotEmpty().WithMessage("is a required field.");
RuleFor(data => data.Pers.Location).NotEmpty().WithMessage("is a required field.");
RuleFor(data => data.Pers.DateHired).NotEmpty().WithMessage("is a required field.");
RuleFor(data => data.Pers.FullTime).NotEmpty().WithMessage("is a required field.");
RuleFor(data => data.Pers.Email).EmailAddress().WithMessage("A valid email address is required.");
//rule for the sieze max
RuleFor(data => data.Pers.Comment_1).Length(0,40).WithMessage("Must be less than 40 characters");
RuleFor(data => data.Pers.Comment_2).Length(0,40).WithMessage("Must be less than 40 characters");
// not working
RuleFor(data => data.SelectedAbteilungName).NotEmpty().WithMessage("is a required field.");
RuleFor(data => data.SelectedGruppeName).NotNull().WithMessage("is a required field.");
//RuleFor(data => data.SelectedAbteilung).NotEmpty().WithMessage("Abteilung is a required field.");
//RuleFor(data => data.SelectedGruppe).NotNull().WithMessage("Test test");
}
那么如果存在验证错误等,提交所有这些信息得到反馈是什么 link 到另一个页面并从 Toaster 获取消息,例如
NavLink href="@($"/personal/list/1")
@if (Storage.GetItem("Transaction") == "modified")
{
Toaster.Success(@TLoc["success1"], @TLoc["success2"]);
Storage.RemoveItem("Transaction");
}
我找到了解决方法
[Inject]
public NavigationManager NavigationManager { get; set; }
protected void NavigateToOverview()
{
NavigationManager.NavigateTo("/personal/list/1");
}
然后您只需在 API
的结果之后调用此方法
NavigateToOverview();
我的情况是
else if (isEdit == true)
{
// here was post in original
await Http.PutAsJsonAsync(Storage.GetItem("environment_uri") + "/personal", PersModel.Pers); // this update
CloseModal();
Storage.SetItem("Transaction", "modified");
await OnParametersSetAsync();
NavigateToOverview();
}
你好,我想问一下有没有办法将验证和 link 提交到 BLAZOR 中的其他页面 我就是这样 link 取消到其他页面的
<NavLink href="@($"/personal/list/1")">
<button class="btn btn-primary" @onclick="CloseModal">@Loc["cancel"]</button>
</NavLink>
那是我的提交按钮
<button type="submit" class="btn btn-success">@Loc["save"]</button>
这就是其中按钮的编辑模型
<EditForm Model="PersModel" OnValidSubmit="@CreatePersonal">
<FluentValidator TValidator="PersonalViewModelValidator" />
这就是有效提交到 API
的连接 protected async Task CreatePersonal()
{
var token = Storage["JWT-Token"];
bool personalExist = false;
Http.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", token);
//Convert Selected values into the Pers database values
PersModel.Pers.Group = PersModel.SelectedGruppe?.Name;
PersModel.Pers.Anrede = PersModel.SelectedAnredeName;
PersModel.Pers.Grad = PersModel.SelectedGradName;
PersModel.Pers.Titel = PersModel.SelectedTitelName;
PersModel.Pers.Department = PersModel.SelectedAbteilungName;
PersModel.Pers.Group = PersModel.SelectedGruppeName;
PersModel.Pers.PrevDepartment = PersModel.SelectedPrevAbteilungName;
PersModel.Pers.PrevGroup = PersModel.SelectedPrevGruppeName;
PersModel.Pers.Uni = PersModel.SelectedStaetteName;
//on input select after editing the --Select-- is converted into value
try
{
BoolValue uh = await Http.GetFromJsonAsync<BoolValue>(Storage["environment_uri"] + "/personal/exists/" + PersModel.Pers.PersName);
personalExist = uh.Value;
}
catch (Exception ex)
{
Logger.LogWarning(ex, "Failed to load BoolValue uh");
Storage.SetItem("Transaction", "errorload");
}
if (personalExist == false && PersModel.Pers.PersName != "_add_")
{
await Http.PostAsJsonAsync(Storage.GetItem("environment_uri") + "/personal", PersModel.Pers); // thats the one i add here
Storage.SetItem("Transaction", "modified");
await OnParametersSetAsync();
CloseModal();
}
else if (isEdit == true)
{
// here was post in original
await Http.PutAsJsonAsync(Storage.GetItem("environment_uri") + "/personal", PersModel.Pers); // this update
CloseModal();
Storage.SetItem("Transaction", "modified");
await OnParametersSetAsync();
}
else if (isEdit == false && personalExist == true)
{
Storage.SetItem("Transaction", "errorsame");
await OnParametersSetAsync();
}
}
这就是验证 class
public PersonalViewModelValidator()
{
CascadeMode = CascadeMode.StopOnFirstFailure;
RuleFor(data => data.Pers.PersName).NotEmpty().WithMessage("is a required field.");
RuleFor(data => data.Pers.Bezeichnung).NotEmpty().WithMessage("is a required field.");
RuleFor(data => data.Pers.Id).NotEmpty().WithMessage("is a required field.");
RuleFor(data => data.Pers.Street).NotEmpty().WithMessage("is a required field.");
RuleFor(data => data.Pers.HouseNumber).NotEmpty().WithMessage("is a required field.");
RuleFor(data => data.Pers.PLZ).NotEmpty().WithMessage("is a required field.");
RuleFor(data => data.Pers.Location).NotEmpty().WithMessage("is a required field.");
RuleFor(data => data.Pers.DateHired).NotEmpty().WithMessage("is a required field.");
RuleFor(data => data.Pers.FullTime).NotEmpty().WithMessage("is a required field.");
RuleFor(data => data.Pers.Email).EmailAddress().WithMessage("A valid email address is required.");
//rule for the sieze max
RuleFor(data => data.Pers.Comment_1).Length(0,40).WithMessage("Must be less than 40 characters");
RuleFor(data => data.Pers.Comment_2).Length(0,40).WithMessage("Must be less than 40 characters");
// not working
RuleFor(data => data.SelectedAbteilungName).NotEmpty().WithMessage("is a required field.");
RuleFor(data => data.SelectedGruppeName).NotNull().WithMessage("is a required field.");
//RuleFor(data => data.SelectedAbteilung).NotEmpty().WithMessage("Abteilung is a required field.");
//RuleFor(data => data.SelectedGruppe).NotNull().WithMessage("Test test");
}
那么如果存在验证错误等,提交所有这些信息得到反馈是什么 link 到另一个页面并从 Toaster 获取消息,例如
NavLink href="@($"/personal/list/1")
@if (Storage.GetItem("Transaction") == "modified")
{
Toaster.Success(@TLoc["success1"], @TLoc["success2"]);
Storage.RemoveItem("Transaction");
}
我找到了解决方法
[Inject]
public NavigationManager NavigationManager { get; set; }
protected void NavigateToOverview()
{
NavigationManager.NavigateTo("/personal/list/1");
}
然后您只需在 API
的结果之后调用此方法 NavigateToOverview();
我的情况是
else if (isEdit == true)
{
// here was post in original
await Http.PutAsJsonAsync(Storage.GetItem("environment_uri") + "/personal", PersModel.Pers); // this update
CloseModal();
Storage.SetItem("Transaction", "modified");
await OnParametersSetAsync();
NavigateToOverview();
}