Nelze Přesunout Divs v Blazor

Nejste si jisti, co chcete... Zkopírujte níže uvedený kód a spustit jej, a řekněte nám, jestli to je to, co jste se snaží dostat.

Index.břitva

@page "/"

<div class=mainScreen id="outerBox" style="width:@($"{TotalWidth}px");height:@($"{TotalHeight}px"); background-color: green; top:60px; position:absolute">
    @foreach (Device device in devices)
    {
    <div class=column style="width:@($"{device.Width}px");height:@($"{device.Height}px");margin-left:@($"{device.Left}px");margin-top:@($"{device.Top}px"); background-color:aliceblue">
       @device.Name: Main Content Here...
    </div>
    }
</div>

@code {
    private int TotalWidth = 520;
    private int TotalHeight = 530;

    private IList<Device> devices = Enumerable.Range(1, 5).Select(i => new Device { Name = $"Name {i}", Width = 520, Height = 100, Left = 0, Top = 5 }).ToList();

    public class Device
    {
        public string Name { get; set; }
        public int Width { get; set; }
        public int Height { get; set; }
        public int Left { get; set; }
        public int Top { get; set; }
    }
}

Poznámka: OnInitialized{Async} pár metod, které jsou život-cyklus metody základní třídy ComponentBase. Jsou automaticky volány Blazor rámec, když Břitva složka je vytvořena. Jsou provedeny pouze jednou. Můžete přepsat je, a přidat své logiky, ale nikdy volat ručně z vašeho kódu.

To:

protected override async Task OnInitializedAsync()
{
    await this.OnAfterRenderAsync(true);
} 

Je to špatně a nesmí být nikdy provedeno. Neměli byste zavolat OnAfterRender{Async}. To je Blazor rámec, který by měl zavolat OnAfterRender{Async},, ne developer. Mohl byste se pokusit pochopit, co váš kód dělá...

Snažte se pochopit, že když Břitva komponenty jsou definovány jako C# tříd, které jsou zvláštní případy Tříd, které vyžadují zvláštní zacházení na základě rámcové...

Aktualizace

Ken Tola, následující kód věřím, že dělá to, co hledáte. To čte šířka a výška okna objektu, předat Index component, a přemístit vaše drahá divs. Všimněte si, že předtím, než aplikace přemístí do div, jsem zkontrolovat hodnoty šířky a výšky, a zjistit rozměry divs. Je to samozřejmě dělá pro demonstrační účely, a můžete změnit tyto hodnoty, jak si přejete...

Index.břitva

@page "/"
    
@implements IDisposable
@inject IJSRuntime JSRuntime

    
<div class=mainScreen id="outerBox" style="width:@($" {TotalWidth}px");height:@($"{TotalHeight}px"); background-color: green; top:60px; position:absolute">
    @foreach (Device device in devices)
    {
        <div class=column style="width:@($" {device.Width}px");height:@($"{device.Height}px");margin-left:@($"{device.Left}px");margin-top:@($"{device.Top}px"); background-color:aliceblue">
            @device.Name: Main Content Here...
        </div>
    }
</div>

@code
{

    private DotNetObjectReference<BrowserService> objRef;
    private BrowserService BSS;

    private int TotalWidth; 
    private int TotalHeight; 

    private IList<Device> devices = Enumerable.Range(1, 5).Select(i => new Device { Name = $"Name {i}", Width = 520, Height = 100, Left = 0, Top = 5 }).ToList();

    public class Device
    {
        public string Name { get; set; }
        public int Width { get; set; }
        public int Height { get; set; }
        public int Left { get; set; }
        public int Top { get; set; }
    }
      
    protected override void OnInitialized()
    {
        BSS = new BrowserService();

        objRef = DotNetObjectReference.Create(BSS);

        BSS.Notify += OnNotify;
    }
    
    public void Dispose()
    {
        BSS.Notify -= OnNotify;

        objRef?.Dispose();
    }

    public async Task OnNotify()
    {
        // Note that the notifier only notify your component 
        // that data is ready, and that the dimensions are read
        // from a property. You can instead define event handler
        // that pass the data in the form of EventArgs... 
        TotalWidth = BSS.Dimension.Width >= 877 ? 520 : 550;
        TotalHeight = BSS.Dimension.Height >= 550 ? 800 : 1200;
    
        await InvokeAsync(() => StateHasChanged());
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // This code is excuted only once, in order to initialize
        // the JavaScript objects
        if (firstRender)
        {
            await JSRuntime.InvokeAsync<object> 
                  ("myJsFunctions.getDimensions", objRef);
                
        }
    }

}

BrowserService.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text.Json;
using System.Threading.Tasks;
using Microsoft.JSInterop;

 public class BrowserService
    {
        public event Func<Task> Notify;
#nullable enable
        public Dimension? Dimension { get; set; }
#nullable disable

        [JSInvokableAttribute("GetDimensions")]
        public async Task GetDimensions(string dimension)
        {
            JsonSerializerOptions options = new(JsonSerializerDefaults.Web)
            {
                WriteIndented = true
            };
            var _dimension = System.Text.Json.JsonSerializer.Deserialize(dimension, typeof(Dimension), options);
            Dimension = (Dimension)_dimension;

            if (Notify != null)
            {
                await Notify?.Invoke();
            }
        }
    }
    public class Dimension
    {
        public int Width { get; set; }
        public int Height { get; set; }

    }
}

Spuštění.ConfigureServices

services.AddScoped<BrowserService>();

_Host.cshtml

<script src="_framework/blazor.server.js"></script>

<script type="text/javascript">
    window.myJsFunctions = {

        getDimensions: function (dotnetHelper) {
            var dimension = {
                 width: window.innerWidth,
                 height: window.innerHeight
            };
            var json = JSON.stringify(dimension);

            return dotnetHelper.invokeMethodAsync('GetDimensions', json);
        }
    };
</script>

Poznámka: Zvážit, manipulace přemístění prvky div, když změníte velikost okna. To by mělo být citlivé, že ? Nejste si jisti, že ve vašem případě můžete použít media query. Každý, jak,, jak můžete vidět, navrhl jsem kód tak, že bere v úvahu, že vaše prvky div, může být potřeba přemístit znovu a znovu, tak to neustále (při změně velikosti) oznámí své Index component měnící rozměry. Myslím, že tohle si zaslouží novou otázku.....