Я работаю над серверным приложением Blazor ASP.NET Core (.NET 5.0). Я пытаюсь добавлять / редактировать пользователей в модальном режиме и назначать роли пользователю в другом модальном режиме. Итак, у меня есть родительский компонент и два дочерних компонента.
Родительский компонент:
@if (ShowPopup)
{
<!-- This is the popup to create or edit user -->
<EditUserModal ClosePopup="ClosePopup" CurrentUserRoles="" DeleteUser="DeleteUser" objUser="objUser" SaveUser="SaveUser" strError="@strError" />
}
@if (ShowUserRolesPopup)
{
<!-- This is the popup to create or edit user roles -->
<EditUserRolesModal AddRoleToUser="AddRoleToUser" AllRoles="AllRoles" ClosePopup="ClosePopup" CurrentUserRoles="@CurrentUserRoles" objUser="objUser" RemoveRoleFromUser="RemoveRoleFromUser" SelectedUserRole="@SelectedUserRole" strError="@strError" _allUsers="_allUsers" _userRoles="UserRoles" />
}
@code {
// Property used to add or edit the currently selected user
ApplicationUser objUser = new ApplicationUser();
// Roles to display in the roles dropdown when adding a role to the user
List<IdentityRole> AllRoles = new List<IdentityRole>();
// Tracks the selected role for the current user
string SelectedUserRole { get; set; }
// To enable showing the Popup
bool ShowPopup = false;
// To enable showing the User Roles Popup
bool ShowUserRolesPopup = false;
......
}
Родительский компонент содержит объекты, которые содержат объекты данных (состояние), например. objUser
, SelectedUserRole
и т. Д. И методы, которые используют эти объекты для реализации бизнес-правил, например SaveUser
и AddRoleToUser
.
Дочерний компонент EditUserModal используется для добавления / редактирования пользователей. Он принимает objUser
в качестве параметра от родительского компонента. objUser содержит значение нового / выбранного пользователя.
<div class="form-group">
<input class="form-control" type="text" placeholder="First Name" @bind="objUser.FirstName" />
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="Last Name" @bind="objUser.LastName" />
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="Email" @bind="objUser.Email" />
</div>
<button class="btn btn-primary" @onclick="SaveUser">Save</button>
@code {
[Parameter]
public ApplicationUser objUser { get; set; }
[Parameter]
public EventCallback SaveUser { get; set; }
.......
}
Объект objUser
и обратный вызов события SaveUser
являются параметрами в дочернем компоненте. После ввода данных в форме дочернего компонента и их сохранения, SaveUser
вызывается в родительском компоненте, и привязка данных автоматически выполняется с объектом objUser
в родительском компоненте. Этот объект содержит текущие введенные данные. Затем этот объект используется для вызова служб баз данных для создания / обновления пользовательских данных. Работает отлично!
Вот как это выглядит:
У объекта objUser
есть введенные данные, и все работает нормально.
Но проблема заключается в компоненте EditUserRolesModal, где я делаю нечто подобное с переменной. Код компонента EditUserRolesModal:
<h5 class="my-3">Add Role</h5>
<div class="row">
<div class="col-md-10">
<div class="form-group">
<input class="form-control" type="text" @bind="objUser.Email" disabled />
</div>
<div class="form-group">
<select class="form-control" @bind="@SelectedUserRole">
@foreach (var option in AllRoles)
{
<option value="@option.Name">@option.Name</option>
}
</select>
</div>
<button class="btn btn-primary" @onclick="AddRoleToUser">Assign</button>
</div>
</div>
@code {
[Parameter]
public ApplicationUser objUser { get; set; }
[Parameter]
public string SelectedUserRole { get; set; }
[Parameter]
public List<IdentityRole> AllRoles { get; set; }
[Parameter]
public EventCallback AddRoleToUser { get; set; }
........
}
Здесь параметр SelectedUserRole
используется для хранения значения роли, которая будет назначена пользователю. Он привязан к раскрывающемуся списку. Когда я изменяю значение раскрывающегося списка, отладка показывает, что значение обновляется в дочернем компоненте (параметре) объекта. Следующие изображения показывают это:
Значение устанавливается в объект параметра SelectedUserRole
в дочернем компоненте.
Подобно тому, как objUser
использовался в EditUserModal
для хранения значений полей FirstName
, LastName
и Email
нового / выбранного пользователя, SelectedUserRole
используется в EditUserRolesModal
для хранения значения выбранной роли, которая будет назначена пользователю.
Но когда нажата кнопка Назначить и событие AddRoleToUser
вызывается в родительском компоненте через дочерний компонент, переменная SelectedUserRole
в родительском компоненте содержит значение null.
Сценарий в обоих дочерних компонентах одинаков, цель которого состоит в том, что при изменении значения параметров внутри дочернего компонента связанные значения должны быть обновлены и отражены в родительском состоянии. Однако он работает в EditUserModal
компоненте, а не в EditUserRolesModal
компоненте. Почему? Что я делаю неправильно?
P.S. У меня нет опыта в Blazor или веб-программировании на основе компонентов.
Изменить: я создал общедоступный репозиторий для этого проекта. Он также содержит файл сценария базы данных. Его можно найти здесь.
ApplicationUser
логический код (CRUD, роли обновления и т. Д.) В одно место - объект службы данных. Вы можете получить доступ к этой единственной копии правды через Dependancy Injection из всех ваших компонентов. Если вы хотите следить за этим, я отправлю пример кода в качестве ответа. - person MrC aka Shaun Curtis   schedule 12.04.2021