@page "/screenA"
@using MongoDB.Driver
@inject IMongoDatabase _mongoDatabase
<h3>Select an Option</h3>
<select @onchange="OnOptionSelected">
<option value="">Select an option</option>
@foreach (var option in options)
{
<option value="@option">@option</option>
}
</select>
@code {
private List<string> options = new List<string>();
protected override async Task OnInitializedAsync()
{
var collection = _mongoDatabase.GetCollection<BsonDocument>("YourCollectionName");
var documents = await collection.Find(Builders<BsonDocument>.Filter.Empty).ToListAsync();
options = documents.Select(doc => doc["fieldName"].AsString).ToList();
}
private void OnOptionSelected(ChangeEventArgs e)
{
NavigationManager.NavigateTo($"screenB?selectedOption={e.Value}");
}
}
@page "/screenB"
@page "/screenB/{selectedOption}"
@using Microsoft.AspNetCore.Components.Web
@using System.Collections.Generic
<h3>Selected Option: @selectedOption</h3>
<div class="toolbar">
<button @onclick="OnPreviousClick" disabled="@IsFirstBoxSelected">Previous</button>
<button @onclick="OnNextClick" disabled="@IsLastBoxSelected">Next</button>
<button @onclick="OnUpdateClick">Update</button>
<button @onclick="OnDeleteClick">Delete</button>
</div>
<div class="box-container">
@foreach (var box in boxes)
{
<div class="box @(box.IsHighlighted ? "highlighted" : "")" @onclick="() => OnBoxClick(box)">
<h4>@box.Title</h4>
<img src="@box.ImageUrl" alt="@box.Title" />
@if (box.IsSourceProduct)
{
<div class="buy-multiple">
<input type="checkbox" @bind="box.BuyMultiple" />
<select @if="box.BuyMultiple" @bind="box.Quantity">
@for (int i = 2; i <= 12; i++)
{
<option value="@i">@i</option>
}
</select>
</div>
}
</div>
}
</div>
@code {
[Parameter] public string SelectedOption { get; set; }
private List<BoxModel> boxes = new List<BoxModel>();
private int currentIndex = 0;
private BoxModel selectedBox => boxes[currentIndex];
private bool IsFirstBoxSelected => currentIndex == 0;
private bool IsLastBoxSelected => currentIndex == boxes.Count - 1;
protected override void OnInitialized()
{
// Fetch boxes based on the selected option from your data source
boxes = FetchBoxesBasedOnSelectedOption(SelectedOption);
}
private void OnPreviousClick()
{
if (!IsFirstBoxSelected)
{
currentIndex--;
}
}
private void OnNextClick()
{
if (!IsLastBoxSelected)
{
currentIndex++;
}
}
private void OnBoxClick(BoxModel box)
{
box.IsHighlighted = !box.IsHighlighted;
}
private void OnUpdateClick()
{
// Handle update logic here
// Access the selectedBox to update its properties
}
private void OnDeleteClick()
{
// Handle delete logic here
// You can remove the selectedBox using "boxes.RemoveAt(currentIndex)"
}
public class BoxModel
{
public string Title { get; set; }
public string ImageUrl { get; set; }
public bool IsHighlighted { get; set; }
public bool IsSourceProduct { get; set; } = false;
public bool BuyMultiple { get; set; } = false;
public int Quantity { get; set; } = 2;
}
}
.box-container {
display: flex;
flex-wrap: wrap;
}
.box {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.highlighted {
background-color: lightgreen;
}
.box img {
max-width: 100%;
height: auto;
}
.toolbar {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.toolbar button {
padding: 5px 10px;
cursor: pointer;
}
.buy-multiple {
display: flex;
align-items: center;
margin-top: 5px;
}
.buy-multiple input {
margin-right: 5px;
}
.buy-multiple select {
width: 50px;
}