让我们将我使用的字典定义为
searchBoardGames[image.Id]
选择位于 foreach 循环中，因此我可以渲染多个选择元素，因为我想要做的是从用户收集多个条目的数据，但使用相同的 gameId 列表。带有 的 @foreach 循环将是这样的： <div class="image-gallery"> @foreach (var image in images) { <div class="image-item"> <img src="data:image/png;base64,@Convert.ToBase64String(image.ImageData)" alt="Unknown Image" /> <div id="boardGameSelect" class="board-game-select"> @if (searchResults.ContainsKey(image.Id) && searchResults[image.Id].Any()) { <select id="@selectInputId" @bind="searchBoardGames[image.Id]"> <option value="">-- Select a Board Game --</option> @foreach (var game in searchResults[image.Id]) { <option value="@game.Id">@game.Name</option> } </select> } </div> </div> } </div> 所以现在的问题是@bind=searchBoardGames[image.Id]不起作用，但我不知道如何解决这个问题。我无法添加 @onchange，因为它被 @bind 使用，并且我无法构造可以返回某些内容的方法，因为它需要绑定到属性，而不是某些返回变量的值。 您可以使用 @onchange 手动处理每个 <select> 的更改，因为 @bind 无法直接绑定到字典键。 您可以遵循的完整工作演示： @page "/" @rendermode InteractiveServer <form method="post" @onsubmit="HandleValidSubmit" @formname="TestForm"> <div class="image-gallery"> @foreach (var image in images) { <div class="image-item"> <img src="data:image/png;base64,@Convert.ToBase64String(image.ImageData)" alt="Unknown Image" /> <div id="boardGameSelect" class="board-game-select"> @if (searchResults.ContainsKey(image.Id) && searchResults[image.Id].Any()) { <select id="[email protected]" value="@GetSelectedValue(image.Id)" @onchange="(e) => UpdateSelectedGame(image.Id, e.Value)"> <option value="">-- Select a Board Game --</option> @foreach (var game in searchResults[image.Id]) { <option value="@game.Id">@game.Name</option> } </select> } </div> </div> } </div> <button type="submit">Submit</button> </form> @code { // Dictionary to hold the selected board game for each image private Dictionary<int, string> searchBoardGames = new Dictionary<int, string>(); // List of images (you can replace this with your actual model for images) List<ImageModel> images = new List<ImageModel> { new ImageModel { Id = 1, ImageData =new byte[0] }, // Sample image new ImageModel { Id = 2, ImageData = new byte[0]} // Sample image }; // Dictionary that stores search results for board games per image ID private Dictionary<int, List<GameModel>> searchResults = new Dictionary<int, List<GameModel>> { { 1, new List<GameModel> { new GameModel { Id = "g1", Name = "Catan" }, new GameModel { Id = "g2", Name = "Ticket to Ride" } } }, { 2, new List<GameModel> { new GameModel { Id = "g3", Name = "Pandemic" }, new GameModel { Id = "g4", Name = "Carcassonne" } } } }; // Method to get the selected value for the current image private string GetSelectedValue(int imageId) { if (searchBoardGames.ContainsKey(imageId)) { return searchBoardGames[imageId]; } return ""; } // Method to update the selected board game for an image private void UpdateSelectedGame(int imageId, object selectedGameId) { if (!string.IsNullOrEmpty(selectedGameId?.ToString())) { searchBoardGames[imageId] = selectedGameId.ToString(); } } private void HandleValidSubmit() { // Process the selected board games foreach (var entry in searchBoardGames) { Console.WriteLine($"Image {entry.Key} has selected game ID: {entry.Value}"); } } // Sample models public class ImageModel { public int Id { get; set; } public byte[] ImageData { get; set; } } public class GameModel { public string Id { get; set; } public string Name { get; set; } } }