英文:
Blazor highlight selected button and remove highlight from others
问题
以下是您要翻译的代码部分：
I'm using a custom object `TestObject` that that has an Id (int), Text(string) and other Details.
These are populated using `@foreach` which then renders a component for each `TestObject`.
When the button is selected, that button should be highlighted by applying a style in the component, any other button's highlight removed and the 'other details' shown on the page.
The 'other details' are switching correctly, but I cannot get the button to highlight properly, and other buttons to remove highlight (1st one is highlighted by default).
I have tried passing in a bool whether the button should be highlighted or not, including whether it's selected in the `TestObject` object and passing in the selected button's `Id` but none of these are updating the buttons. The parent page is calculating this correctly but not passing to the components to re-render.
TestObject.cs
public class TestObject
{
public int Id { get; set; }
public string Text { get; set; }
public string Details { get; set; }
public bool Selected { get; set; }
}
TestComponent.razor
<button @onclick="Click" class="test" style="@styles">
@Text
</button>
@code {
[Parameter] public int Id { get; set; }
[Parameter] public string Text { get; set; }
[Parameter] public bool Selected { get; set; }
[Parameter] public int SelectedId { get; set; }
[Parameter] public EventCallback<int> CallBack { get; set; }
private string styles = "";
protected override async Task OnInitializedAsync()
{
CheckIfSelected();
}
private void Click()
{
CallBack.InvokeAsync(Id);
StateHasChanged();
}
private void CheckIfSelected()
{
//if (Selected)
if(Id == SelectedId)
{
styles = "background-color: grey;";
}
else
{
styles = "background-color: white;";
}
}
}
TestParent.razor
<div style="border: 1px solid black; background-color: white;">
@foreach (var T in TestObjects)
{
<TestComponent Id="@T.Id" Text="@T.Text" Selected="@T.Selected" SelectedId="@SelectedTestObject.Id" CallBack="SelectObject" />
}
<hr />
<div>
Details: <br />
@SelectedTestObject.Details;
</div>
</div>
@code {
private List<Models.TestObject> TestObjects = new();
private TestObject SelectedTestObject = new();
protected override async Task OnInitializedAsync()
{
TestObjects.Add(new TestObject
{
Id = 1,
Text = "Test 1",
Details = "Test 1 Details"
});
TestObjects.Add(new TestObject
{
Id = 2,
Text = "Test 2",
Details = "Test 2 Details"
});
TestObjects.Add(new TestObject
{
Id = 3,
Text = "Test 3",
Details = "Test 3 Details"
});
SelectedTestObject = TestObjects[0];
}
private void SelectObject(int SelectedId)
{
SelectedTestObject = TestObjects.Where(t => t.Id == SelectedId).FirstOrDefault();
StateHasChanged();
}
}
希望这对您有所帮助！
英文:
I'm using a custom object TestObject that that has an Id (int), Text(string) and other Details.
These are populated using @foreach which then renders a component for each TestObject.
When the button is selected, that button should be highlighted by applying a style in the component, any other button's highlight removed and the 'other details' shown on the page.
The 'other details' are switching correctly, but I cannot get the button to highlight properly, and other buttons to remove highlight (1st one is highlighted by default).
I have tried passing in a bool whether the button should be highlighted or not, including whether it's selected in the TestObject object and passing in the selected button's Id but none of these are updating the buttons. The parent page is calculating this correctly but not passing to the components to re-render.
TestObject.cs
public class TestObject
{
public int Id { get; set; }
public string Text { get; set; }
public string Details { get; set; }
public bool Selected { get; set; }
}
TestComponent.razor
<button @onclick="Click" class="test"style="@styles">
@Text
</button>
@code {
[Parameter] public int Id { get; set; }
[Parameter] public string Text { get; set; }
[Parameter] public bool Selected { get; set; }
[Parameter] public int SelectedId{ get; set; }
[Parameter] public EventCallback<int> CallBack { get; set; }
private string styles = "";
protected override async Task OnInitializedAsync()
{
CheckIfSelected();
}
private void Click()
{
CallBack.InvokeAsync(Id);
StateHasChanged();
}
private void CheckIfSelected()
{
//if (Selected)
if(Id == SelectedId)
{
styles = "background-color: grey;";
}
else
{
styles = "background-color: white;";
}
}
}
TestParent.razor
<div style="border: 1px solid black; background-color: white;">
@foreach (var T in TestObjects)
{
<TestComponent Id="@T.Id" Text="@T.Text" Selected="@T.Selected" SelectedId="@SelectedTestObject.Id" CallBack="SelectObject" />
}
<hr />
<div>
Details: <br />
@SelectedTestObject.Details;
</div>
</div>
@code {
private List<Models.TestObject> TestObjects = new();
private TestObject SelectedTestObject = new();
protected override async Task OnInitializedAsync()
{
TestObjects.Add(new TestObject
{
Id = 1,
Text = "Test 1",
Details = "Test 1 Details"
});
TestObjects.Add(new TestObject
{
Id = 2,
Text = "Test 2",
Details = "Test 2 Details"
});
TestObjects.Add(new TestObject
{
Id = 3,
Text = "Test 3",
Details = "Test 3 Details"
});
SelectedTestObject = TestObjects[0];
}
private void SelectObject(int SelectedId)
{
SelectedTestObject = TestObjects.Where(t => t.Id == SelectedId).FirstOrDefault();
StateHasChanged();
}
}
答案1
得分: 1
这是对您正在使用的设置的快速修复，生成的设置可能不是最佳的，但它基于您尝试实现的内容。
这是您的TextComponent.razor
<button @onclick="Click" class="test" style="background-color: @(Selected? "grey" : "white");">
@Text
</button>
[Parameter] public int Id { get; set; }
[Parameter] public string Text { get; set; }
[Parameter] public bool Selected { get; set; }
[Parameter] public EventCallback<int> CallBack { get; set; }
private void Click()
{
CallBack.InvokeAsync(Id);
}
这是您的TestParent.razor
<div style="border: 1px solid black; background-color: white;">
@foreach (var T in TestObjects)
{
<TestComponent Id="@T.Id" Text="@T.Text" Selected=@(T.Id==selectedId) CallBack="SelectObject" />
}
<hr />
<div>
Details: <br />
@SelectedTestObject.Details;
</div>
</div>
private List<TestObject> TestObjects = new();
private TestObject SelectedTestObject = new();
private int selectedId = 1;
protected override async Task OnInitializedAsync()
{
TestObjects.Add(new TestObject
{
Id = 1,
Text = "Test 1",
Details = "Test 1 Details"
});
TestObjects.Add(new TestObject
{
Id = 2,
Text = "Test 2",
Details = "Test 2 Details"
});
TestObjects.Add(new TestObject
{
Id = 3,
Text = "Test 3",
Details = "Test 3 Details"
});
SelectedTestObject = TestObjects[0];
}
private void SelectObject(int id)
{
selectedId = id;
SelectedTestObject = TestObjects.FirstOrDefault(x => x.Id == id);
}
英文:
This is a quick fix to the setup you are using, the resulting setup wont be best but its based on what you are trying to achieve
This is your TextComponent.razor
<button @onclick="Click" class="test" style="background-color: @(Selected? "grey" : "white");">
@Text
</button>
[Parameter] public int Id { get; set; }
[Parameter] public string Text { get; set; }
[Parameter] public bool Selected { get; set; }
[Parameter] public EventCallback<int> CallBack { get; set; }
private void Click()
{
CallBack.InvokeAsync(Id);
}
This is your TestParent.razor
<div style="border: 1px solid black; background-color: white;">
@foreach (var T in TestObjects)
{
<TestComponent Id="@T.Id" Text="@T.Text" Selected=@(T.Id==selectedId) CallBack="SelectObject" />
}
<hr />
<div>
Details: <br />
@SelectedTestObject.Details;
</div>
</div>
private List<TestObject> TestObjects = new();
private TestObject SelectedTestObject = new();
private int selectedId = 1;
protected override async Task OnInitializedAsync()
{
TestObjects.Add(new TestObject
{
Id = 1,
Text = "Test 1",
Details = "Test 1 Details"
});
TestObjects.Add(new TestObject
{
Id = 2,
Text = "Test 2",
Details = "Test 2 Details"
});
TestObjects.Add(new TestObject
{
Id = 3,
Text = "Test 3",
Details = "Test 3 Details"
});
SelectedTestObject = TestObjects[0];
}
private void SelectObject(int id)
{
selectedId = id;
SelectedTestObject = TestObjects.FirstOrDefault(x => x.Id == id);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论