Blazor Dynami c Root Переменные - PullRequest
Новая
       2

Blazor Dynami c Root Переменные

1 голос
/ 20 января 2020

Я собираюсь создать веб-сайт, который работает так же, как и в этом видео, который не основан на JS (как в этом видео), который может использовать C# чтобы взаимодействовать с JS и получить windowWidth и windowHeight, а затем динамически изменять все переменные CSS, чтобы все содержимое, изображения и размер шрифта / shading / border / shadows и т. д. c .. Все будет масштабироваться по мере увеличения или уменьшения масштаба страницы.

Конечный результат - создать размер, который работает для одного разрешения, а затем масштабировать до разрешения от 320 до 3200 Вт. Это означает, что один веб-сайт, один шаблон, не нужно возиться с тысячами разных итераций того, как должен выглядеть сайт.

Я потратил около недели, пытаясь разработать код C#, который на самом деле мог бы измениться и установите переменные, однако, я не опытный C# ветеран, я предпочитаю писать все на PS.

Я понимаю ограничения Blazor и то, как он «изменяет» состояние, изменяющееся при рендеринге, но если BlazorStyled может изменить CSS, то я не вижу причин, по которым ширина / высота окна не сможет напрямую влиять на переменные, из которых работает сайт.

Я изучал черчение и дизайн Я покинул поле, прежде чем смог изучать программирование и C # /. Net, чтобы продолжить то, что я мог сделать с HTML и CSS более десяти лет, go ... то же самое относится и к Учебная программа MCSE / MCSA, от которой я также отказался ...

... но я потратил последний год на то, чтобы наверстать упущенное.

https://youtu.be/Z99zsCwYhWk <- это то, что Я пытаюсь выступить в Blazor. Это использует javascript и document.queryselector, document.setproperty ... Я не уверен, что это можно сделать как с JSInterop, так и без него, и да ... <em>Я знаю, как изменить css типов с медиазапросами ... Я пытаюсь создать forl oop, который фиксирует каждое возможное разрешение и масштабируется для каждого пикселя в пределах этого l oop.

Но также , учитывает тот факт, что макеты могут иметь несколько форматов, соответствующих этим динамическим c переменным. Итак, как я продемонстрировал в видео, ниже 720w панель навигации сместится наверх, что можно сделать с помощью собственных CSS медиа-запросов, но что нельзя сделать, это изменить элементы DOM, не испортив путь Блазор работает. Я пробовал. Даже потратил неделю, пытаясь написать код C#, который бы использовал JSInterop, а также пользовательские классы и измерения и соответственно изменил свойства ...

После компиляции ... он сказал: «Я потерпел неудачу». Он сказал это несколько раз ... Так что я был чертовски. Потратил целую неделю, пытаясь сделать что-то очень крутое ... и эта программа посмотрела на меня и сказала: "Братан, мне не нравится этот ввод ..."

Но что я могу сделать?

Учитывая природу ASP .Net / Blazor, я не буду публиковать код, потому что там много контента. Я могу дать вам краткий обзор того, что я пробовал до сих пор ...

Я нашел старый проект Криса Сэйнти на github под названием browserResize. Но я думаю, что это нарушает правила компонента Блазора [квантование и гиперскорость пространства-времени, эффект континуума, смещение термодинамики c l aws физики ... все в этих скобках - коми c рельеф]

У меня уже был полностью взорванный javascript файл, в котором были все необходимые операции, но как заставить Blazor работать, когда в официальном FAQ по Microsoft Blazor сказано

"Не используйте JS для всего этого ... потому что это хромает. " -Microsoft

После того, как я прочитал эту цитату, которую Microsoft поместил в официальный FAQ ... Я подумал ... что ж, пришло время попробовать А в любом случае ... так что я затем реализовал некоторые классы, которые создавать объекты аналогично 

```
# Heroes in a half 'Shell #
[PSCustomObject]@{ 
width = "window.innerWidth"
height = "window.innerHeight"
}
```

... только это намного больше.

Я сделал несколько звонков JSInterop на основе видео Ника Чапаса об этом, и я почти уверен, что написал все это правильно ...? Не уверен.

Затем я создал сервис, который после изменения размера окна мог установить все соответствующие элементы CSS и теоретически изменить стиль CSS всего на странице, учитывая условия, которые я демонстрирую. в приведенной выше ссылке на видео.

Я уверен, что, возможно, я переобъяснил, что я пытаюсь сделать ...? Но я сжигаю много времени, теоретизируя, а не «на самом деле выполняю работу». И вот наступает момент, когда вы действительно можете много узнать о новых способах ни к чему не привести ... но можно также привести аргумент в пользу того, что "есть лучшие способы использовать свое время ..."

Помогите плз. Thx bros.

(Правка: по просьбе Ираклиса, вот два бита кода, которые я сделал)

. \ - представляет базовую папку репо.

. \ Data \ Controller.cs 

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

namespace ShellBlaze.Data
{
    public class Controller
    {
        public static readonly IJSRuntime JSR;
        public class Window
        {
            public async Task<int> Height()
            {
                return await JSR.InvokeAsync<int>( "getHeight" );
            }
            public async Task<int> Width()
            {
                return await JSR.InvokeAsync<int>( "getWidth" );
            }
            public async Task<object> QuerySelect( string Tag )
            {
                return await JSR.InvokeAsync<object>( "querySelect" , Tag );
            }

            public async Task SetProperty( object ID , string Property , string Value )
            {
                await JSR.InvokeVoidAsync( "setProperty" , ID , Property , Value );
            }
        }

        public class Stage
        {
            Controller.Window Windex = new Controller.Window();
                 Model.Window Win    = new      Model.Window();
                 Model.Layout Lay    = new      Model.Layout();
            public async Task<Model.Layout> Action()
            {
                Win.Height           = await Windex.Height();
                Win.Width            = await Windex.Width();
                Win.Side             = Win.Width * 0.15f;
                Win.Main             = Win.Width * 0.85f;
                Win.Pixel            = Win.Width / 1920;

                   var   Root        = Windex.QuerySelect( ":root" );
                   int[] Ct          = { 0, 1, 2, 3 };

                string[] Element     = { "root" , "side" , "main" , "pixel" };
                double[] Unit        = { Win.Width , Win.Side , Win.Main , Win.Pixel };
                string[] Name        = { "#top", "#side", "body" , "#main" };
                string[] Property    = { "display", "display", "flex-direction", "--content" };

                string[] Value       = new string[3];
                string[] Value1      = { "flex", "none", "column", Win.Width + "px" };
                string[] Value2      = { "none", "flex", "row", Win.Main + "px" };


                if (Win.Width < 720)
                {
                    Value = Value1;
                }

                else
                {
                    Value = Value2;
                }

                foreach (int i in Ct)
                {
                    await Windex.SetProperty( Root, "--" + Element[i], Unit[i] + "px" );
                    await Windex.SetProperty( Windex.QuerySelect( Name[i] ), Property[i], Value[i] );
                }

                if (Win.Width > 720)
                {
                    Lay.Type    = "top";
                    Lay.Logo    = "toplogo";
                    Lay.ID      = "ti";
                    Lay.Class0  = "t0";
                    Lay.Class1  = "t1";
                    Lay.Class2  = "t2";
                    Lay.Class3  = "t3";
                    Lay.Class4  = "t4";
                    Lay.Class5  = "t5"; 
                    Lay.Class6  = "t6";
                    Lay.String0 = "Home";
                    Lay.String1 = "App Development";
                    Lay.String2 = "Network Security";
                    Lay.String3 = "Enterprise";
                    Lay.String4 = "OS Management";
                    Lay.String5 = "Hardware";
                    Lay.String6 = "Data Management";

                    return Lay;
                }

                else
                {
                    Lay.Type   = "side";
                    Lay.Logo   = "sidelogo";
                    Lay.ID     = "si";
                    Lay.Class0 = "t0";
                    Lay.Class1 = "t1";
                    Lay.Class2 = "t2";
                    Lay.Class3 = "t3";
                    Lay.Class4 = "t4";
                    Lay.Class5 = "t5";
                    Lay.Class6 = "t6";
                    Lay.String0 = "Home";
                    Lay.String1 = "App<br/>Development";
                    Lay.String2 = "Network<br/>Security";
                    Lay.String3 = "Enterprise";
                    Lay.String4 = "OS<br/>Management";
                    Lay.String5 = "Hardware";
                    Lay.String6 = "Data<br/>Management";

                    return Lay;
                }
            }
        }
        public class State
        {
            public static event Func<Task> Trip;

            [JSInvokable]
            public static async Task Set()
            {
                Controller.Stage Stage = new Controller.Stage();

                await Stage.Action();

                await JSR.InvokeAsync<object>( "setEvent" );

                await Trip?.Invoke();
            }
        }
    }
}

. \ Data \ Model.cs 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace ShellBlaze.Data
{
    public class Model
    {
        public class Layout
        {
            public string Type    { get; set; }
            public string Logo    { get; set; }
            public string ID      { get; set; }
            public string Class0  { get; set; }
            public string Class1  { get; set; }
            public string Class2  { get; set; }
            public string Class3  { get; set; }
            public string Class4  { get; set; }
            public string Class5  { get; set; }
            public string Class6  { get; set; }
            public string String0 { get; set; }
            public string String1 { get; set; }
            public string String2 { get; set; }
            public string String3 { get; set; }
            public string String4 { get; set; }
            public string String5 { get; set; }
            public string String6 { get; set; }

            public Layout()
            {
                Type      = null;
                Logo      = null;
                ID        = null;
                Class0    = null;
                Class1    = null;
                Class2    = null;
                Class3    = null;
                Class4    = null;
                Class5    = null;
                Class6    = null;
                String0   = null;
                String1   = null;
                String2   = null;
                String3   = null;
                String4   = null;
                String5   = null;
                String6   = null;
            }

            public Layout( 

                string _Type, 
                string _Logo, 
                string _ID,
                string _Class0,
                string _Class1,
                string _Class2,
                string _Class3,
                string _Class4,
                string _Class5,
                string _Class6,
                string _String0,
                string _String1,
                string _String2,
                string _String3,
                string _String4,
                string _String5,
                string _String6
            )
            {
                Type      = _Type;
                Logo      = _Logo;
                ID        = _ID;
                Class0    = _Class0;
                Class1    = _Class1;
                Class2    = _Class2;
                Class3    = _Class3;
                Class4    = _Class4;
                Class5    = _Class5;
                Class6    = _Class6;
                String0   = _String0;
                String1   = _String1;
                String2   = _String2;
                String3   = _String3;
                String4   = _String4;
                String5   = _String5;
                String6   = _String6;
            }
        }

        public class Sheet
        {
            public object ID         { get; set; }
            public string Tag        { get; set; } 
            public string Property   { get; set; }
            public string Value      { get; set; }

            public Sheet()
            {
                ID       = null;
                Tag      = null;
                Property = null;
                Value    = null;
            }

            public Sheet( object _ID , string _Tag , string _Property , string _Value )
            {
                ID       = _ID;
                Tag      = _Tag;
                Property = _Property;
                Value    = _Value;
            }
        }

        public class Window
        {
            public int Height               { get; set; }
            public int Width                { get; set; }
            public double Side              { get; set; }
            public double Main              { get; set; }
            public double Pixel             { get; set; }

            public Window()
            {
                Height      = 0;
                Width       = 0;
                Side        = 0.00f;
                Main        = 0.00f;
                Pixel       = 0.00f;
            }

            public Window( int _Height , int _Width , double _Side , double _Main , double _Pixel )
            {
                Height      = _Height;
                Width       = _Width;
                Side        = _Side;
                Main        = _Main;
                Pixel       = _Pixel;
            }
        }
    }
}

. \ Scripts \ script. js


function querySelect(Tag)
{
    return document.querySelector( '"' + Tag + '"' );
}

function setProperty(ID, Property, Value )
{
    ID.style.setProperty( "'" + Property + "'" , "'" + Value + Unit + "'" );
}

function getHeight()
{
    return window.innerHeight;
}

function getWidth()
{
    return window.innerWidth;
}

function setEvent()
{
    DotNet.invokeMethodAsync( "Resize" , "Set" ).then(data => data);
    window.addEventListener(  "resize" , setEvent() );
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...