Blazor: Изменить изображение sr c с помощью @Onclick без js - PullRequest
0 голосов
/ 30 января 2020

Я начинаю учиться c# после многих лет Delphi. Я решил узнать о блазоре. Я пытаюсь запрограммировать основную карточную игру. На странице должны быть случайные изображения, а на начальной странице все изображения с черным рисунком (0.jpg). Я создаю свойство id случайного изображения с помощью для l oop в верхней части xxx.razor

Например

<image src=0.jpg id=1>
<image src=0.jpg id=3>
<image src=0.jpg id=1>
<image src=0.jpg id=2>
<image src=0.jpg id=2>
<image src=0.jpg id=3>

Когда пользователь нажимает на id = 3, свойство изображения image должно быть таким, чтобы было показано img 3.jpg.

Я сделал этот сценарий с помощью jsInterop, его основа c. Но я хочу знать, могу ли я сделать это только с кодом c#? Tnks. Среда программирования: Linux mint & Visual Studio Code &. Net Core 3.1

Ответы [ 2 ]

5 голосов
/ 30 января 2020

Проблема здесь в том, что вам нужно думать о компонентах, а не писать напрямую для каждого элемента. Что вы должны сделать, это создать объект, который представляет состояние компонента, в вашем случае карту с состоянием Hidden / Shown, FileName и значением Sr c.

Ниже я позвоню это состояние Image и представьте его классом.

    public class Image
    {
        public int FileName {get;set;}
        public bool Shown {get;set;}
        public string Src => Shown ? $"{FileName}.jpg" : "0.jpg";
    }

Далее нам нужно создать коллекцию предметов. Это может быть stati c, полученное из источника данных, такого как база данных, et c. В этом примере я буду использовать функцию Enumerable.Range для генерации списка значений в диапазоне от 1 до 10. Метод Select назначит эти значения новому изображению, задав значение FileName. Значения хранятся в списке.

List<Image> items = Enumerable.Range(1, 10).Select(i => new Image { FileName = i}).ToList();

В части пользовательского интерфейса нам нужно визуализировать некоторую разметку. Изображение будет работать нормально, но кнопка была проще для примера. В событии onclick мы просто устанавливаем значение Shown в true. Установка этого значения обновляет свойство Sr c, отображающее «показанное» изображение, 1-10.jpg.

@foreach (var item in items) {
    <button @onclick="@(()=> item.Shown = true)">@item.Src</button>
}

Собрав все вместе, вы получите:

@foreach (var item in items) {
    <button @onclick="@(()=> item.Shown = true)">@item.Src</button>
}

@code {
    List<Image> items = Enumerable.Range(1, 10).Select(i => new Image { FileName = i}).ToList();

    public class Image
    {
        public int FileName {get;set;}
        public bool Shown {get;set;}
        public string Src => Shown ? $"{FileName}.jpg" : "0.jpg";
    }
}

Вы можете замените кнопку изображением для вашей задачи.

image

См. решение, работающее в режиме реального времени здесь https://blazorfiddle.com/s/m01smajj

Если вы хотите переключить Показано на / выкл

@foreach (var item in items) {
    <button @onclick="@(()=> item.Shown = !item.Shown)">@item.Src</button>
}
0 голосов
/ 30 января 2020

Я могу рассказать вам, как я это сделал, используя пакет Nuget, который не является моим и называется BlazorStyled.

BlazorStyled от Chanan позволяет вам изменять CSS свойства в Blazor

https://github.com/chanan/BlazorStyled

Я только что сделал пример проекта и пакет Nuget за несколько дней go, который имеет компонент Sprite

DataJuggler.Blazor.Components

Компонент Sprite позволяет установить такие свойства, как ImageUrl:

Sprite razor properties

Полный исходный код для компонента Sprite находится здесь:

Код кода Sprite.cs находится здесь

Файл Sprite.razor здесь (не пытайтесь запустить Snippet):

@using BlazorStyled

<Styled @bind-Classname="@SpriteStyle">
    background-image: url('@ImageUrl');
    width: @WidthPixels;
    height: @HeightPixels;
    position: @Position;
    top: @YPositionPixels;
    left: @XPositionPixels;
    transform: scale(@Scale);
    transform-origin: left;
    display: @Display;
</Styled>

<div class="@SpriteStyle">
    
</div>

И если вы хотите посмотреть видео, которое я только что сделал, показывающее простую анимацию

Как использовать BlazorStyled для динамического изменения CSS

...