Blazor

Blazor

Blazor is a free and open-source web framework that enables developers to create web apps using C# and HTML. It is being developed by Microsoft

Blazorの動的CSS値

なぜ動的CSS値が必要なのですか?

画面上に高さや幅などが異なる複数のボタンがあるとします。これにより、特定のスタイルごとに異なるCSSをコーディングできます。アプリケーションを100個のボタンにスケーリングします。本当に100個のCSSクラスを作成するのでしょうか。もちろん違います!そして、これがCSS動的変数が助けになるところです。

これを達成するためのステップは2つだけです。C#を使用しているので、「変数」というメカニズムがすでにあります。ハードコードされた値の代わりに変数を使用できます。 

  1. 通常どおりにスタイルを作成しますが、今回はCSS変数を使用します
  2. インラインスタイルを使用して、CSS変数をC#変数にマップします。

これが私たちがやろうとしていることです。 

HTMLボタンを含む例を取り上げましょう。これをButton.razorと呼びます。Button.razorの4つのインスタンスを作成します。それぞれのインスタンスの高さ、幅、前景、背景、フォントサイズが異なります。これらの4つのButton.razorファイルをホストする親画面(ButtonCollection.razor)があり、親画面はボタンごとに異なる高さ、幅などを送信する役割を果たします。

Button.razorがどのように見えるかを直接お見せしましょう。 

@using BlazorCSS_Custom_Properties.Model

<button style="--btn-width:@Attributes.Width;
               --btn-height:@Attributes.Height;
               --btn-fontSize:@Attributes.FontSize;
               --btn-foreground:@Attributes.ForegroundColor;
               --btn-background:@Attributes.BackgroundColor;">@Attributes.Content</button>

<style>
    button {
        width: var(--btn-width);
        height: var(--btn-height);
        font-size: var(--btn-fontSize);
        color: var(--btn-foreground);
        background-color: var(--btn-background);
    }
</style>
@code {
    [Parameter]
    public ButtonStyle Attributes { get; set; }
}

マークアップ

リスト1:Button.razor

ここで何が起こっているのですか?

  1. 要素ボタンに適用される9行目に共通のスタイルタグがあります。このボタンのスタイルクラスでは、ハードコードされた値を使用する代わりに、CSSカスタムプロパティを使用しています。varキーワードを使用し、中括弧内に変数名を渡すだけです。注:各スタイル要素には、独自のcss変数があります。
  2. 3行目のボタンタグでは、インラインスタイルを使用する必要があります。ここでは、CSSスタイル属性を使用する代わりに、スタイルタグで作成したcss変数を使用します。次に、css変数をC#変数にマップします。この例では、クラスButtonStyleに高さ、幅などの定義が含まれています。リスト2を参照してください。したがって、このクラスのインスタンス(属性)を行番号20で使用し、行番号3のボタンのインラインスタイルにマップできます。
  3. 親はButtonStyleのインスタンスを埋める責任があります。そのため、[parameter]で装飾されています。

ButtonStyleクラスがどのように見えるか見てみましょう。

public class ButtonStyle {
    public string Height {
        get;
        set;
    }
    public string Width {
        get;
        set;
    }
    public string FontSize {
        get;
        set;
    }
    public string ForegroundColor {
        get;
        set;
    }
    public string BackgroundColor {
        get;
        set;
    }
    public string Content {
        get;
        set;
    }
}

C#

リスト2:クラスButtonStyle

最後に、親クラスである、Button.razorの複数のインスタンスを作成し、Attributesパラメーターに値を渡す役割を果たします。

PSボタンの4つのインスタンスを作成し、OnInitialized()メソッドにデータを入力しています。9行目には、OnInitialized()に入力されるButtonStylesのリストがあり、リストの各項目は、属性の形式で各Buttonのインスタンスに渡されます。

@page "/buttons"
@using BlazorCSS_Custom_Properties.Model

<Button Attributes=@ListOfButtonStyle[0]></Button>
<Button Attributes=@ListOfButtonStyle[1]></Button>
<Button Attributes=@ListOfButtonStyle[2]></Button>
<Button Attributes=@ListOfButtonStyle[3]></Button>
@code {
    public List<ButtonStyle> ListOfButtonStyle { get; set; }

    protected override void OnInitialized()
    {
        ListOfButtonStyle = new()
        {
            new ButtonStyle()
            {
                Content = "Ok",
                FontSize = "12px",
                Height = "20px",
                Width = "50px",
                BackgroundColor="#4CAF50",
                ForegroundColor="#FFFFFF"
            },
            new ButtonStyle()
            {
                Content = "Submit",
                FontSize = "15px",
                Height = "25px",
                Width = "100px",
                BackgroundColor="#008CBA",
                ForegroundColor="#FFFFFF"
            },
            new ButtonStyle()
            {
                Content = "Cancel",
                FontSize = "18px",
                Height = "30px",
                Width = "150px",
                BackgroundColor="#f44336",
                ForegroundColor="#FFFFFF"
            },
            new ButtonStyle()
            {
                Content = "Click Me",
                FontSize = "21px",
                Height = "35px",
                Width = "200px",
                BackgroundColor="#555555",
                ForegroundColor="#FFFFFF"
            }
        };
    }
}

マークアップ

リスト3:ButtonCollecion.razor

次の画像が最終出力です。


画像1:CSS値が異なる4つのボタン 

結論

これを行う簡単な方法もあるかもしれません。これは非同期呼び出しでうまく機能するため、サーバーからデータが送信されるときに頭を悩ませる必要はありません。また、個人的にはインラインスタイルが好きではなく、カスタムプロパティがそれを使用した唯一の理由です。 

PS参照用に添付のソースコードを検索します。

ソース:https ://www.c-sharpcorner.com/article/dynamic-css-values-in-blazor/

#blazor #css 

Blazorの動的CSS値
Saul  Alaniz

Saul Alaniz

1652548860

Valores CSS Dinámicos en Blazor

¿Por qué necesitamos valores CSS dinámicos?

Digamos que tiene múltiples botones en la pantalla, cada uno con diferente altura, ancho, etc. Esto lo llevará a codificar diferentes CSS para cada estilo específico. Ahora escale su aplicación a 100 botones, ¿realmente vamos a escribir 100 clases de CSS? ¡Por supuesto no! Y aquí es donde CSS dynamic var viene al rescate.

Solo hay 2 pasos para lograr esto. Como estamos usando C#, ya tenemos el mecanismo, "variables". Podemos usar variables en lugar de valores codificados. 

  1. Crea estilo como lo harías normalmente, pero esta vez con variables CSS
  2. Utilice el estilo en línea para asignar variables de CSS con variables de C#.

Esto es lo que vamos a hacer. 

Tomemos un ejemplo que contiene un botón HTML, llamémoslo Button.razor, vamos a crear 4 instancias de Button.razor, cada una tendrá diferente altura, ancho, primer plano, fondo y tamaño de fuente. Habrá una pantalla principal (ButtonCollection.razor) que albergará estos 4 archivos Button.razor y la pantalla principal es responsable de enviar diferentes alturas, anchos, etc. para cada botón.

Déjame mostrarte directamente cómo se ve Button.razor. 

@using BlazorCSS_Custom_Properties.Model

<button style="--btn-width:@Attributes.Width;
               --btn-height:@Attributes.Height;
               --btn-fontSize:@Attributes.FontSize;
               --btn-foreground:@Attributes.ForegroundColor;
               --btn-background:@Attributes.BackgroundColor;">@Attributes.Content</button>

<style>
    button {
        width: var(--btn-width);
        height: var(--btn-height);
        font-size: var(--btn-fontSize);
        color: var(--btn-foreground);
        background-color: var(--btn-background);
    }
</style>
@code {
    [Parameter]
    public ButtonStyle Attributes { get; set; }
}

Margen

Listado 1: Button.razor

¿Qué está pasando aquí?

  1. Tenemos una etiqueta de estilo común en la línea número 9 que se aplica al botón del elemento. Aquí, en esta clase de estilo para el botón, en lugar de usar valores codificados, estamos usando propiedades personalizadas de CSS. Todo lo que tiene que hacer es usar la palabra clave var y pasar el nombre de la variable entre llaves. Nota: cada elemento de estilo tendrá su propia variable css.
  2. En la etiqueta del botón en la línea número 3, necesitamos usar el estilo en línea y aquí, en lugar de usar atributos de estilo CSS, usaremos las variables css que creamos en la etiqueta de estilo. y luego simplemente asigne variables CSS con variables C#. Aquí, en este ejemplo, la clase ButtonStyle contiene definiciones de alto, ancho, etc. Consulte el listado 2. Entonces, podemos usar la instancia de esta clase (Atributos) en la línea número 20 y asignarla al estilo en línea del botón en la línea número 3.
  3. Parent es responsable de llenar la instancia de ButtonStyle, por eso está decorado con [parámetro]

Veamos cómo se ve la clase ButtonStyle.

public class ButtonStyle {
    public string Height {
        get;
        set;
    }
    public string Width {
        get;
        set;
    }
    public string FontSize {
        get;
        set;
    }
    public string ForegroundColor {
        get;
        set;
    }
    public string BackgroundColor {
        get;
        set;
    }
    public string Content {
        get;
        set;
    }
}

C#

Listado 2: clase ButtonStyle

Ahora, por fin, la clase principal, es responsable de crear múltiples instancias de Button.razor y pasar valores al parámetro Attributes.

PD Estamos creando 4 instancias de botones y llenando datos en el método OnInitialized(). En la línea número 9 hay una lista de ButtonStyles que se completa OnInitialized() y cada elemento de la lista se pasa a las instancias de cada botón en forma de atributos.

@page "/buttons"
@using BlazorCSS_Custom_Properties.Model

<Button Attributes=@ListOfButtonStyle[0]></Button>
<Button Attributes=@ListOfButtonStyle[1]></Button>
<Button Attributes=@ListOfButtonStyle[2]></Button>
<Button Attributes=@ListOfButtonStyle[3]></Button>
@code {
    public List<ButtonStyle> ListOfButtonStyle { get; set; }

    protected override void OnInitialized()
    {
        ListOfButtonStyle = new()
        {
            new ButtonStyle()
            {
                Content = "Ok",
                FontSize = "12px",
                Height = "20px",
                Width = "50px",
                BackgroundColor="#4CAF50",
                ForegroundColor="#FFFFFF"
            },
            new ButtonStyle()
            {
                Content = "Submit",
                FontSize = "15px",
                Height = "25px",
                Width = "100px",
                BackgroundColor="#008CBA",
                ForegroundColor="#FFFFFF"
            },
            new ButtonStyle()
            {
                Content = "Cancel",
                FontSize = "18px",
                Height = "30px",
                Width = "150px",
                BackgroundColor="#f44336",
                ForegroundColor="#FFFFFF"
            },
            new ButtonStyle()
            {
                Content = "Click Me",
                FontSize = "21px",
                Height = "35px",
                Width = "200px",
                BackgroundColor="#555555",
                ForegroundColor="#FFFFFF"
            }
        };
    }
}

Margen

Listado 3: ButtonCollecion.razor

La siguiente imagen es la salida final.


Imagen 1: 4 Botones con diferentes valores CSS 

Conclusión

Puede haber una manera fácil de hacer esto también. Esto funciona bien con las llamadas asíncronas, por lo que no tenemos que preocuparnos cuando los datos provienen del servidor. Personalmente, tampoco me gustan los estilos en línea y las propiedades personalizadas son la única razón por la que lo usé. 

PD Encuentre el código fuente adjunto para referencia.

Fuente: https://www.c-sharpcorner.com/article/dynamic-css-values-in-blazor/

#blazor #css 

Valores CSS Dinámicos en Blazor
Sean Wade

Sean Wade

1652338225

How to Build Microsoft Teams Apps with C#, .NET and Blazor

Building apps for Teams in .NET & Blazor

John Miller joins James on this week's On .NET to chat about how .NET developers can build Microsoft Teams apps and bots completely with C#, .NET, and Blazor! John walks us through everything we need to know to get started and how to even publish apps for Teams!

00:00 - Intro with John Miller
01:00 - What are Teams apps? What can you build?
03:00 - Teams Toolkit & SDK for .NET & Blazor
05:30 - Developing Teams Apps with Visual Studio
08:00 - Teams Toolkit & Framework SDK walkthrough
15:30 - Where to go to get started
16:45 - Wrap-up

Links:
Teams Developer Documentation - https://docs.microsoft.com/microsoftteams/platform/mstdd-landing?WT.mc_id=dotnet-29192-cxa 
Teams Toolkit for Visual STudio - https://docs.microsoft.com/microsoftteams/platform/toolkit/visual-studio-overview?WT.mc_id=dotnet-29192-cxa 
.NET Bot Framework - https://github.com/Microsoft/botbuilder-dotnet?WT.mc_id=dotnet-29192-cxa 

#dotnet #teams #blazor #csharp 

How to Build Microsoft Teams Apps with C#, .NET and Blazor
Code  Camp

Code Camp

1651157543

Blazor WebAssembly & Web API on .NET 6 – Full Course (C#)

Blazor WebAssembly & Web API on .NET 6 – Full Course (C#)

Learn Blazor WebAssembly and Web API on .NET 6 by building a shopping cart application using C#. This course also provides a guide on how to integrate a payment gateway into your Blazor WebAssembly component, so that a user is able to pay for products through your application using a debit or credit card or PayPal account.

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:00:51) Create the Database using EF Core Code First Database Migrations
⌨️ (0:26:05) Retrieve Product Data from Database (Web API component)
⌨️ (0:30:17) Create Classes for Data Transfer Objects (DTOs)
⌨️ (0:36:22) Create ProductRepository Class (Repository Design Pattern)
⌨️ (0:43:05) Create ProductController Class
⌨️ (0:51:08) Create DtoConversion Class (DTO Conversion Extension methods)
⌨️ (0:57:45) Display Product Data to User (Blazor WebAssembly Component)
⌨️ (1:39:59) Display Data for Specific Product to User (Web API and Blazor)
⌨️ (2:06:07) Add Product to Shopping Cart (Web API and Blazor)
⌨️ (2:52:40) Remove Product from Shopping Cart (Web API and Blazor)
⌨️ (3:14:03) Update the Quantity of Products in the Shopping Cart (Web API, Blazor, Blazor JavaScript Interoperability)
⌨️ (3:44:01) Update the Header Menu in Response to a Change to the State of the Shopping Cart (Creating Custom Events in Blazor)
⌨️ (4:04:48) Integration of PayPal Payment Gateway into Blazor Component
⌨️ (4:36:03) Dynamically Populate the Side-Bar Menu (Web API and Blazor)
⌨️ (5:05:44) Optimise Code for Performance (Web API and Blazor)
⌨️ (5:08:26) Use Include Extension Method in LINQ Query (Web API)
⌨️ (5:14:00) User Local Storage Functionality (Blazor)
⌨️ (5:35:42) Outro

💻 Code: https://github.com/GavinLonDigital/ShopOnlineSolution 

⭐️ Resources ⭐️
🔗 Copy Seed Data from GitHub: https://github.com/GavinLonDigital/ShopOnlineSolution/blob/main/ShopOnline.Api/CodeSnippets/OnModelCreating.txt 
🔗 Download Visual Studio 2022 for Widows (Community Edition): https://visualstudio.microsoft.com/vs/ 
🔗 Download SQL Server 2019: https://www.microsoft.com/en-us/sql-server/sql-server-downloads

#blazor #webassembly #webapi #dotnet #csharp 

Blazor WebAssembly & Web API on .NET 6 – Full Course (C#)

Creación De Una Función De Búsqueda En Blazor Server Grid

Veremos cómo agregar funciones de filtro/búsqueda en una cuadrícula de servidor blazor. Se puede mejorar la facilidad de uso de las cuadrículas agregando campos que pueden recibir valores que se usarán para filtrar los registros en una vista de cuadrícula. Esto puede reducir la cantidad de páginas necesarias para diseñar una aplicación porque una sola página se puede usar para manejar la entrada de datos, la visualización de datos e incluso los informes. En este artículo, solo se analizará la creación de filtros.

Lenguaje de programación

Se utilizará C# y HTML.

Requisito previo

Se necesita un conocimiento básico de los patrones de diseño de blazor y la jerarquía de páginas para comprender este artículo.

Información de contexto

Estamos utilizando una base de datos SQL de Postgres, por lo que se instalaron los siguientes paquetes nugget

  • npgsql
  • Npgsql.EntityFrameworkCore.PostgreSql(5.0.0)

En el código a continuación, mi aplicación se llama "payarenauser", así que tome nota de la referencia en los distintos archivos de clase. Tienes que reemplazarlo con tu propio nombre de proyecto. Para hacer referencia a los datos en una aplicación, debe importar el espacio de nombres de la carpeta de datos, en mi caso, está usando payarenauser.Data;

Paso 1 - (Creación de clase de datos: este será un archivo .cs)

Esto se puede colocar en la carpeta de datos

using System;
using System.Collections.Generic;
// needed for validations
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
//needed for the schema
using System.ComponentModel.DataAnnotations.Schema;
namespace Payarenauser.Data { // i am using a database in postgres sql
    [Table("bank", Schema = "public")]
    public class BankClass {
        [Key]
        public int bankid {
            get;
            set;
        }
        public string bankcode {
            get;
            set;
        }
        public string bankabbr {
            get;
            set;
        }
        public string bankfullname {
            get;
            set;
        }
    }
}

C#

Paso 2: (Creación de un archivo de contexto db: este también es un archivo .cs)

DbContext es una clase importante en Entity Framework API. Es un puente entre su dominio o clases de entidad y la base de datos. DbContext es la clase principal responsable de interactuar con la base de datos.

using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore;
using Payarenauser.Data;
using System;
using System.Collections.Generic;
using System.Text;
namespace payarenauser.Data {
    public class ApplicationDbContext1: DbContext {
        public ApplicationDbContext1(DbContextOptions < ApplicationDbContext1 > options): base(options) {}
        public DbSet < BankClass > Bank {
            get;
            set;
        }
    }
}

C#

Paso 3: (Creación de un servicio: este también es un archivo .cs)

Un servicio está destinado a definir la lógica para las operaciones CRUD, crear una carpeta llamada Servicio y colocar el archivo dentro.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using payarenauser.Data;
using Payarenauser.Data;
namespace Payarenauser.Services {
    public class BankService {
        protected readonly ApplicationDbContext1 _dbcontext1;
        public BankService(ApplicationDbContext1 _db) {
            _dbcontext1 = _db;
        }
        public List < BankClass > GetAllBanks() {
            return _dbcontext1.Bank.ToList();
        }
        public List < BankClass > GetuniqueBank(string bankname) {
            return _dbcontext1.Bank.Where(x => x.bankfullname == bankname).ToList();
        }
        public List < BankClass > GetexceptBank(string bankname) {
            return _dbcontext1.Bank.Where(x => x.bankfullname != bankname).ToList();
        }
    }
}

C#

Ahora veamos el código anterior en detalle.

Primero, importamos los espacios de nombres necesarios.

A continuación, traemos el contexto DB

A continuación, convertimos al usuario en el alcance del Servicio como público e iniciamos el contexto de la base de datos en una base de datos.

Ahora podemos entrar en el código principal, el motivo principal de este artículo.

Tenemos que crear una lista como método y pasarle parámetros, esto maneja la lógica para el filtrado.

En el código anterior se crearon dos opciones de filtrado.

public List < BankClass > GetuniqueBank(string bankname) {
    return _dbcontext1.Bank.Where(x => x.bankfullname == bankname).ToList();
}

C#

Creamos una lista de la clase de banco, luego le dimos un nombre significativo, en este caso, GetuniqueBank, luego pasamos un parámetro de un tipo de datos de cadena con el nombre nombrebanco.

Esto significa que la aplicación buscará un valor de un marcador de posición y comparará ese valor con el nombre del banco en la tabla del banco, después de lo cual los registros de la lista se actualizarán/volverán a cargar.

public List <BankClass> GetexceptBank(string bankname) {
    return _dbcontext1.Bank.Where(x => x.bankfullname != bankname).ToList();
}

C#

Creamos una lista de la clase de banco, luego le dimos un nombre significativo, en este caso, GetexceptBank, luego pasamos un parámetro de un tipo de datos de cadena con el nombre nombrebanco.

Esto significa que la aplicación buscará un valor de un marcador de posición y se eliminarán los registros en los que el nombre del banco en la tabla sea el mismo que la variable en el marcador de posición, después de lo cual los registros de la Lista se actualizarán/recargarán.

C# TIENE VARIOS OPERADORES QUE SE PUEDEN UTILIZAR PARA CREAR OTROS ESCENARIOS.

Paso 4: (Creación del componente razor: este también es un archivo .razor)

Similar a un archivo .cs, un componente de razor tiene algunas cosas que se deben hacer primero, esto incluye importar las cosas necesarias, esto se puede hacer usando una sintaxis como @using, @inject, @inherits, no cubriremos los escenarios en Este artículo.

@page "/Viewbankreport"
@using Payarenauser.Data
@using Payarenauser.Services
@inherits OwningComponentBase<BankService>
@inject IJSRuntime jsRunTime
@inject AuthenticationStateProvider GetAuthenticationStateAsync
@using Microsoft.AspNetCore.Http
@inject IHttpContextAccessor httpContextAccessor
<div style="text-align:center,">
    <h1>Bank List  </h1>
    <hr />
    <button class="btn-primary hidewhenprint" @onclick="Showpopup">
        Add Record
    </button>
    <div class="col-md-4" hidewhenprint></div>
    <button class="btn-primary hidewhenprint" @onclick="Print">
        Print
    </button>
    <td><input type="text" placeholder="Enter Bank full name" @bind="ucobject.bankfullname" /></td>
    <button class="btn-primary hidewhenprint" @onclick="showspecificbank">
        Perform Search
    </button>
    <button class="btn-primary hidewhenprint" @onclick="excludepecificbank">
        Perform Exclusion Search
    </button>
     }
    <table class="table">
        <tr>
            <th>Bank Id</th>
            <th>Bank Code</th>
            <th>Abbrev</th>
            <th>Full Name</th>
        </tr>

        @foreach (var item in uclist)
        {
            <tr>
                <td>@item.bankid</td>
                <td>@item.bankcode</td>
                <td>@item.bankabbr</td>
                <td>@item.bankfullname</td>
            </tr>
        }
    </table>
    <h4>Total number of records is @uclist.Count</h4>
    @code{
        IList<BankClass> uclist;
        BankClass ucobject = new BankClass();
        public string bankname { get; set; }
        private BankClass selectedbank;

        void showspecificbank()
        {
            bankname = ucobject.bankfullname;
            uclist = Service.GetuniqueBank(bankname);
        }
        void excludepecificbank()
        {
            bankname = ucobject.bankfullname;
            uclist = Service.GetexceptBank(bankname);
        }
        protected override void OnInitialized()
        {
            uclist = Service.GetAllBanks();
        }
        private void Print()
        {
            jsRunTime.InvokeVoidAsync("Print");
        }
    }
</div>

ASP.NET (C#)

Entonces, lo que hemos hecho anteriormente es crear una interfaz que puede mostrar una cuadrícula que tiene tres botones (imprimir, mostrar específico y excluir específico, un cuadro de texto (para filtrar el marcador de posición) y una tabla HTML para mostrar los resultados.

Paso 5 - (Resultado final)

Creación de funciones de búsqueda en el servidor Blazor Grid

Creación de funciones de búsqueda en el servidor Blazor Grid

Creación de funciones de búsqueda en el servidor Blazor Grid

No analizaremos el código para la acción de impresión en este artículo porque incluye jquery.

Recuerde agregar el servicio creado a su archivo startup.cs. por ejemplo, services.AddScoped<BankService>();

Gracias

Fuente: https://www.c-sharpcorner.com/article/creating-search-feature-in-blazor-server-grid/

#blazor #jquery 

Creación De Una Función De Búsqueda En Blazor Server Grid
藤本  結衣

藤本 結衣

1651069280

Blazorサーバーグリッドでの検索機能の作成

フィルタ/検索機能をBlazorサーバーグリッドに追加する方法を見ていきます。グリッドビューでレコードをフィルタリングするために使用される値を受け取ることができるフィールドを追加することにより、グリッドの使いやすさを向上させることができます。これにより、1つのページを使用してデータ入力、データビュー、さらにはレポートを処理できるため、アプリケーションで設計する必要のあるページ数を減らすことができます。この記事では、フィルターの作成についてのみ説明します。

プログラミング言語

C#とHTMLが使用されます。

前提条件

この記事を理解するには、Blazorのデザインパターンとページ階層の基本的な知識が必要です。

背景情報

Postgres SQLデータベースを使用しているため、次のナゲットパッケージがインストールされました

  • Npgsql
  • Npgsql.EntityFrameworkCore.PostgreSql(5.0.0)

以下のコードでは、私のアプリケーションは「payarenauser」と呼ばれているので、さまざまなクラスファイルの参照に注意してください。独自のプロジェクト名に置き換える必要があります。アプリケーションでデータを参照するには、データフォルダーの名前空間をインポートする必要があります。私の場合は、payarenauser.Dataを使用しています。

ステップ1-(データクラスの作成-これは.csファイルになります)

これはデータフォルダに置くことができます

using System;
using System.Collections.Generic;
// needed for validations
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
//needed for the schema
using System.ComponentModel.DataAnnotations.Schema;
namespace Payarenauser.Data { // i am using a database in postgres sql
    [Table("bank", Schema = "public")]
    public class BankClass {
        [Key]
        public int bankid {
            get;
            set;
        }
        public string bankcode {
            get;
            set;
        }
        public string bankabbr {
            get;
            set;
        }
        public string bankfullname {
            get;
            set;
        }
    }
}

C#

ステップ2-(dbコンテキストファイルの作成-これも.csファイルです)

DbContextは、EntityFrameworkAPIの重要なクラスです。これは、ドメインまたはエンティティクラスとデータベースの間のブリッジです。DbContextは、データベースとの対話を担当するプライマリクラスです。

using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore;
using Payarenauser.Data;
using System;
using System.Collections.Generic;
using System.Text;
namespace payarenauser.Data {
    public class ApplicationDbContext1: DbContext {
        public ApplicationDbContext1(DbContextOptions < ApplicationDbContext1 > options): base(options) {}
        public DbSet < BankClass > Bank {
            get;
            set;
        }
    }
}

C#

ステップ3-(サービスの作成-これも.csファイルです)

サービスは、CRUD操作のロジックを定義し、Serviceというフォルダーを作成して、その中にファイルを配置することを目的としています。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using payarenauser.Data;
using Payarenauser.Data;
namespace Payarenauser.Services {
    public class BankService {
        protected readonly ApplicationDbContext1 _dbcontext1;
        public BankService(ApplicationDbContext1 _db) {
            _dbcontext1 = _db;
        }
        public List < BankClass > GetAllBanks() {
            return _dbcontext1.Bank.ToList();
        }
        public List < BankClass > GetuniqueBank(string bankname) {
            return _dbcontext1.Bank.Where(x => x.bankfullname == bankname).ToList();
        }
        public List < BankClass > GetexceptBank(string bankname) {
            return _dbcontext1.Bank.Where(x => x.bankfullname != bankname).ToList();
        }
    }
}

C#

次に、上記のコードを詳しく見てみましょう。

まず、必要な名前空間をインポートします。

次に、DBコンテキストを取り込みます

次に、ユーザーをサービススコープとしてパブリックにし、DBへのDBコンテキストを開始します

これで、この記事の主な理由であるメインコードに入ることができます。

メソッドとしてリストを作成し、それにパラメーターを渡す必要があります。これにより、フィルタリングのロジックが処理されます。

上記のコードでは、2つのフィルタリングオプションが作成されました。

public List < BankClass > GetuniqueBank(string bankname) {
    return _dbcontext1.Bank.Where(x => x.bankfullname == bankname).ToList();
}

C#

銀行クラスからリストを作成し、それに意味のある名前(この場合はGetuniqueBank)を付けてから、banknameという名前の文字列データ型のパラメーターを渡しました。

つまり、アプリケーションはプレースホルダーから値を探し、その値を銀行テーブルの銀行名と比較します。その後、リストレコードが更新/再読み込みされます。

public List <BankClass> GetexceptBank(string bankname) {
    return _dbcontext1.Bank.Where(x => x.bankfullname != bankname).ToList();
}

C#

銀行クラスからリストを作成し、それに意味のある名前(この場合はGetexceptBank)を付けてから、banknameという名前の文字列データ型のパラメーターを渡しました。

つまり、アプリケーションはプレースホルダーから値を検索し、テーブル内の銀行名がプレースホルダー内の変数と同じであるレコードが削除され、その後、リストレコードが更新/再ロードされます。

C#には、他のシナリオを作成するために使用できるいくつかの演算子があります。

ステップ4-(かみそりコンポーネントの作成-これも.razorファイルです)

.csファイルと同様に、かみそりコンポーネントには最初に実行する必要のあることがいくつかあります。これには、必要なもののインポートが含まれます。これは、@ using、@ inject、@inheritsなどの構文を使用して実行できます。この記事。

@page "/Viewbankreport"
@using Payarenauser.Data
@using Payarenauser.Services
@inherits OwningComponentBase<BankService>
@inject IJSRuntime jsRunTime
@inject AuthenticationStateProvider GetAuthenticationStateAsync
@using Microsoft.AspNetCore.Http
@inject IHttpContextAccessor httpContextAccessor
<div style="text-align:center,">
    <h1>Bank List  </h1>
    <hr />
    <button class="btn-primary hidewhenprint" @onclick="Showpopup">
        Add Record
    </button>
    <div class="col-md-4" hidewhenprint></div>
    <button class="btn-primary hidewhenprint" @onclick="Print">
        Print
    </button>
    <td><input type="text" placeholder="Enter Bank full name" @bind="ucobject.bankfullname" /></td>
    <button class="btn-primary hidewhenprint" @onclick="showspecificbank">
        Perform Search
    </button>
    <button class="btn-primary hidewhenprint" @onclick="excludepecificbank">
        Perform Exclusion Search
    </button>
     }
    <table class="table">
        <tr>
            <th>Bank Id</th>
            <th>Bank Code</th>
            <th>Abbrev</th>
            <th>Full Name</th>
        </tr>

        @foreach (var item in uclist)
        {
            <tr>
                <td>@item.bankid</td>
                <td>@item.bankcode</td>
                <td>@item.bankabbr</td>
                <td>@item.bankfullname</td>
            </tr>
        }
    </table>
    <h4>Total number of records is @uclist.Count</h4>
    @code{
        IList<BankClass> uclist;
        BankClass ucobject = new BankClass();
        public string bankname { get; set; }
        private BankClass selectedbank;

        void showspecificbank()
        {
            bankname = ucobject.bankfullname;
            uclist = Service.GetuniqueBank(bankname);
        }
        void excludepecificbank()
        {
            bankname = ucobject.bankfullname;
            uclist = Service.GetexceptBank(bankname);
        }
        protected override void OnInitialized()
        {
            uclist = Service.GetAllBanks();
        }
        private void Print()
        {
            jsRunTime.InvokeVoidAsync("Print");
        }
    }
</div>

ASP.NET(C#)

したがって、上記で行ったことは、3つのボタン(印刷、特定の表示、特定の除外、1つのテキストボックス(プレースホルダーのフィルタリング用)と結果を表示するHTMLテーブル)を持つグリッドを表示できるフロントエンドを作成することです。

ステップ5-(最終結果)

Blazorサーバーグリッドでの検索機能の作成

Blazorサーバーグリッドでの検索機能の作成

Blazorサーバーグリッドでの検索機能の作成

jqueryが含まれているため、この記事では印刷アクションのコードについては説明しません。

作成したサービスをstartup.csファイルに追加することを忘れないでください。例:services.AddScoped <BankService>();

ありがとうございました

ソース:https ://www.c-sharpcorner.com/article/creating-search-feature-in-blazor-server-grid/ 

#blazor #jquery 

Blazorサーバーグリッドでの検索機能の作成
Rowena  Cox

Rowena Cox

1649180400

.NET MAUI Blazor Switch Language In-App

You implemented localization on your .NET MAUI app, but are now wondering: how do I switch the language dynamically in app? This video got you covered! We will learn how to show a list of the supported languages, how to switch between the languages and how to persist the configured language with .NET MAUI Essentials.

🔗 Links
Sample App Repository: https://github.com/jfversluis/MauiBlazorDynamicLocalizationSample
Localization Video: https://www.youtube.com/watch?v=EHoO9hG-Uzo&list=PLfbOp004UaYWu-meDkRN6_Y1verl96npI&index=3

⏱ Timestamps
00:00 - Switch Language in .NET MAUI Blazor
00:19 - Revisit Existing Code
02:14 - Implement Dynamic Switching of Languages
02:50 - Add Language Selection UI
03:59 - Implement Switching the Language
07:19 - Language Switching Demo
08:15 - Persisting Selected Language Setting
12:07 - Persistance Demo
13:24 - Does This Work on Regular Blazor?

#dotnetmaui #localization #blazor #dotnet #resx

.NET MAUI Blazor Switch Language In-App
Rowena  Cox

Rowena Cox

1649169540

Multi-Language Apps with .NET MAUI Blazor Localization

Localization is a great way to let your app reach a broader audience and be more inclusive! In this video we will learn how to add localization to your .NET MAUI Blazor app with Microsoft.Extensions.Localization. With the help of the IStringLocalizer and resx files we will see how to add translations for different languages to our app in minutes!

🔗 Links
Sample App Repository: https://github.com/jfversluis/MauiBlazorLocalizationSample
Show Dialogs Video: https://www.youtube.com/watch?v=gTLEIe0SWpI
Automatic Localizer: https://github.com/IEvangelist/resource-translator

⏱ Timestamps
00:00 - Add Localization to .NET MAUI Blazor
00:22 - Why Localization?
01:27 - .NET MAUI Blazor Dialog Sample Explained
02:08 - Install Microsoft.Extensions.Localization
03:53 - Adding Localizable Resources (resx)
04:40 - Pro-Tip: ResxManager!
05:37 - Localization in Razor Files
07:34 - Add Localized Resources resx File
10:29 - Add Localization Through Code
11:37 - Localize Strings with Parameters In It
14:28 - Use AI to Implement All Your Localization

#dotnetmaui #localization #blazor #dotnet #resx

Multi-Language Apps with .NET MAUI Blazor Localization
Rubalema  Sonia

Rubalema Sonia

1649163912

How State Management in Blazor Web Assembly with ASP.NET 6.0 Works?

In this video tutorial, We'll show you How State Management in Blazor Web Assembly with ASP.NET 6.0 Works? Let's discover it together

Github- https://github.com/krchome

#dotnet #aspdotnet #blazor 

How State Management in Blazor Web Assembly with ASP.NET 6.0 Works?
Rowena  Cox

Rowena Cox

1649137020

Easily Show Platform-Specific Dialogs with .NET MAUI Blazor

Need to show prompts or dialogs from your Blazor application? With .NET MAUI it almost couldn't be easier! Write a little wrapper leveraging dependency injection and you can access all the power of .NET MAUI and the underlaying platforms straight from your Blazor application.

🔗 Links
Sample App Repository: https://github.com/jfversluis/MauiBlazorDialogSample
.NET MAUI Dialogs Discussion: https://github.com/dotnet/maui/discussions/4986

⏱ Timestamps
00:00 - .NET MAUI Blazor Showing Dialogs
00:16 - The Real Power of .NET MAUI Blazor
01:11 - Implement DialogService with Dependency Injection
05:39 - Implement Other Types of Dialogs
07:07 - Display Alert from Blazor
09:19 - The Future of Dialogs?
10:38 - .NET MAUI Blazor Course?!

#dotnetmaui #dialogs #blazor #dotnet 

Easily Show Platform-Specific Dialogs with .NET MAUI Blazor
Rupert  Beatty

Rupert Beatty

1648679520

Port Of FluentUI/Office Fabric React Components and Style to Blazor

Anouncement

Although we have created a quite complete port of the React Fluent UI library, it has become clear that it is impossible for us to keep up with the changes that Microsoft and the community are making there. That, combined with the fact that we have only a few people working on the code (in their spare time mostly), has made us decide that as of now we will be switching to maintenace mode for the BlazorFluentUI library.

What does this mean?

We will not be adding any new functionality and bug fixing will be minimal.

Does this mean I should not use BlazorFluentUI anymore?

That is up to you. The functionality and features that are available will stay available. We have released a V6 version, running on .NET 6. This means you can still use the library in it's current form until at least November 2022 (when .NET 7 will be released). Maybe we will even release a verion compiled on that .NET version, but no promises.

What is my alternative?

Microsoft has released V1.0 of a Blazor wrapper (https://github.com/microsoft/fast-blazor) for their Fluent UI Web Components library based on standard Web Components technology (https://github.com/microsoft/fluentui/blob/master/packages/web-components/README.md) which is an implementation of their FAST framework (https://www.fast.design/). We are in close contact with the Microsoft team, leveraging our knowledge gained with building BlazorFluentUI and are already actively contributing to the repository. Their not aiming to match what you get with React Fluent UI today. Rather, they are building to the latest version of Fluent as seen in Windows 11. An implementation of all the current Fluent Web Components can be found at https://aka.ms/fluentwebcomponents. An official Blazor demo environment is in the works too. For now you can visit https://fluentui-blazor.baaijte.net/

BlazorFluentUI

Port of Fluent UI React components and style (formerly Office Fabric) to Blazor

Blazor Webassembly Demo

https://www.blazorfluentui.net/

Blazor Server Demo

https://blazorfluentui.azurewebsites.net/ (Older version!)

How to use the library

Installation 
How To Use: Blazor Webassembly 
How To Use: Blazor Server 
Theming

Revision history

V6.0

Using the .NET 6 released packages now.

V5.7

Breaking Changes!

Icons are now sourced from the MIT licensed FluentUI Icons repo (https://github.com/microsoft/fluentui-system-icons). These are embedded within the CoreComponents project. Icon names are now all "snakecase" (lowercase with underscores). Some of the icon names are completely different. You can either visit the repo linked or see this demo's Icons page. FontSize is an additional option for Icon which is largely irrelevant unless you modify the size using css. However, Filled is a unique option that chooses the filled version of the icon, if it exists. You no longer need to reference the fabric.min.css file in your index.html page.

V5.6

IDropdownOption (and therefore DropdownOption) is extended to implement IComparable. This makes it possible to sort on selected dropdown values in a details list.

V5.5

V5.4

  • DetailsList and DetailsListAuto speed vastly improved
  • Callout no longer tracking references in script. No more double clicking needed for opening Dropdown, etc.

V5.3

V5.2

V5.1

  • Add editable column for DetailsList, DetailsListAuto
  • Add new component TextFieldNumber (will be renamed to NumberTextField soon), based on TextField. Supports int, long, short, float, double and decimal. See https://www.blazorfluentui.net/TextFieldNumberPage for examples

Breaking Changes for major releases

V5.0: Renaming and demo revamp

We dropped the BFU prefix from all the component- and project names. Also, all components are now bundled in only two packages (to make a distinction between components dependant on DynamicData package an those who are not).

In cases where renaming would lead to collisions with already existing Blazor components or .NET classes, we placed those components in seperate namespace (which you need to include explicitly) and/or you need to use the full name of the component (so including the namespace) in your .razor files.

Both changes were made to align the library closer to the Fluent UI React environment. Also the codebase is not so cluttered with 'BFU' anymore.

The demo sites have been given a lot of attention and look a lot better now (more in line with Fluent UI Rect docs).

Breaking Changes for v4.0

Library is now running on .NET 5

List, DetailsList, GroupedList

You will now have to define your list's container separately from the list component. Pick a <div> or other container element and apply the data-is-scrollable to it. You'll also have to style it appropriately for your page. (For example, add overflow-y:auto;height:100%; or something similar.) You do not have to place your list component as a direct descendant of this container. If you fail to place the data-is-scrollable tag, then the component will traverse the nodetree to find the first container element that has overflow-y:auto; set.

You also have to define GetKey for your list component. This is a selector for your items to tell the component how to uniquely identify each item.

A big change is that OnItemInvoked will only work when SelectionMode is set to None. If you need Selection active and the invoke item function to work at the same time, you can attach an event handler to the Selection.OnSelelectionChanged event or subscribe to the SelectionChanged observable.

Removed BFUGlobalCS, BFUStylePreloader, IHasPreloadableGlobalStyle

These components and interfaces must be removed as they no longer function within this library. Switch to using CSS isolation with your razor components instead. BFULocalCS is still present and encouraged for dynamic styling that requires flexibility. (Using the style attribute on an element makes it difficult for users to override the style.)

If you need to reference the theme from a css file, you can reference the global css variable instead. For example, where before you would get a white color in C# as Theme.Palette.White, now you will write in css, var(--palette-White). Css global variables always start with two dashes and a lowercase name. Instead of a dot, use a dash followed by capitalized names.

Info

There are no MergeStyles in this port. It's just each control packaged into its own project so you can limit what gets added to your Blazor project.

Dev Nuget Packages

On each commit new dev NuGet packages will be created automatically. To access those, add a new Package Source to Visual Studio or your project with the following URL:

https://pkgs.dev.azure.com/blazor-fluentui/5355f597-190a-4424-83da-cd89cd362a24/_packaging/DevChannelV5/nuget/v3/index.json

For a more detailed tutorial, head over to our Public Feed, click on "Connect To Feed" and select the platform.

Telegram dev channel

https://t.me/joinchat/TuHGR8AZmYe1SKlH

Author: BlazorFluentUI
Source Code: https://github.com/BlazorFluentUI/BlazorFluentUI 
License: MIT License

#blazor #webassembly #csharp 

Port Of FluentUI/Office Fabric React Components and Style to Blazor
Rupert  Beatty

Rupert Beatty

1648671960

A Lightweight Wrapper Around Microsoft's Official FluentUI Web

Microsoft.Fast

Introduction

The Microsoft.Fast.Components.FluentUI package provides a lightweight set of Blazor component wrappers around Microsoft's official FluentUI Web Components. The FluentUI Web Components are built on FAST and work in every major browser. To get up and running with Microsoft.Fast.Components.FluentUI see the Getting Started section below.

The source for @fluentui/web-components is hosted in the Fluent UI mono-repository. Documentation on the components is available on docs.microsoft.com.

Getting Started

To get started using the Fluent UI Web Components for Blazor, you will first need to install the official Nuget package for Fluent UI. You can use the following command:

dotnet add package Microsoft.Fast.Components.FluentUI

Next, you need to add the web components script. You can either add the script from CDN directly, or you can install it with NPM, whichever you prefer.

To add the script from CDN use the following markup:

<script type="module" src="https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js"></script>

The markup above always references the latest release of the components. When deploying to production, you will want to ship with a specific version. Here's an example of the markup for that:


<script type="module" src="https://cdn.jsdelivr.net/npm/@fluentui/web-components@2.0.2/dist/web-components.min.js"></script>

The best place to put the script tag is typically in your index.html (_Layout.cshtml for blazor server project) file in the script section at the bottom of the <body>.

If you wish to leverage NPM instead, run the following command:

npm install --save @fluentui/web-components

You can locate the single file script build in the following location:

node_modules/@fluentui/web-components/dist/web-components.min.js

Copy this to your wwwroot/script folder and reference it with a script tag as described above.

:notebook: Note

If you are setting up Fluent UI Web Components on a Blazor Server project, you will need to escape the @ character by repeating it in the source link. For more information check out the Razor Pages syntax documentation.

Using the FluentUI Web Components

With the package installed and the script configured, you can begin using the Fluent UI Web Components in the same way as any other Blazor component. Just be sure to add the following using statement to your views:

@using Microsoft.Fast.Components.FluentUI

Here's a small example of a FluentCard with a FluentButton that uses the Fluent "Accent" appearance:

@using Microsoft.Fast.Components.FluentUI

<FluentCard>
  <h2>Hello World!</h2>
  <FluentButton Appearance="@Appearance.Accent">Click Me</FluentButton>
</FluentCard>

:bulb: Tip

You can add @using Microsoft.Fast.Components.FluentUI to namespace collection in _Imports.razor, so that you can avoid repeating it in every single razor page.

Configuring the Design System

The Fluent UI Web Components are built on FAST's Adaptive UI technology, which enables design customization and personalization, while automatically maintaining accessibility. This is accomplished through setting various "design tokens". The easiest way to accomplish this in Blazor is to wrap the entire UI in a FluentDesignSystemProvider. This special element has a number of properties you can set to configure the tokens to your desired settings. Here's an example of changing the "accent base color" and switching the system into dark mode (in the file app.razor):

<FluentDesignSystemProvider AccentBaseColor="#464EB8" BaseLayerLuminance="0">
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</FluentDesignSystemProvider>

:notebook: Note

Provider token attributes can be changed on-th-fly like any other Blazor component attribute.

If you are attempting to configure the components for integration into a specific Microsoft product, the following table provides AccentBaseColor values you can use:

ProductAccentBaseColor
Office#D83B01
Word#185ABD
Excel#107C41
PowerPoint#C43E1C
Teams#6264A7
OneNote#7719AA
SharePoint#03787C
Stream#BC1948

For a list of all available token attributes, see here. More examples for other components can be found in the examples folder of this repository.

⭐ We appreciate your star, it helps!

Joining the Community

Looking to get answers to questions or engage with us in realtime? Our community is most active on Discord. Submit requests and issues on GitHub, or join us by contributing on some good first issues via GitHub.

If you don't find a component you're looking for, it's best to create the issue in our FAST repo here and limit issues on this repo to bugs in the Blazor component wrappers or Blazor-specific features.

We look forward to building an amazing open source community with you!

Contact

  • Join the community and chat with us in real-time on Discord.
  • Submit requests and issues on GitHub.
  • Contribute by helping out on some of our recommended first issues on GitHub.

Author: Microsoft
Source Code: https://github.com/microsoft/fast-blazor 
License: MIT License

#blazor #webassembly #component #Microsoft 

A Lightweight Wrapper Around Microsoft's Official FluentUI Web
Rupert  Beatty

Rupert Beatty

1648664400

BlazorStrap: Bootstrap 4 Components for Blazor Framework

BlazorStrap

Bootstrap 4 and Bootstrap 5 Components for Blazor Framework

Bootstrap 5

Important: Target V5 for bootstrap 5

<PackageReference Include="BlazorStrap" Version="5.*.*" />

Bootstrap 5 Components for Blazor Framework

Install

Blazor WebAssembly

  1. Download the V5.0 package from nuget: nuget
  2. Modify your index.html with the following.
    1. Inside the <head> add
      1. <link href="YourAssemblyName.styles.css" rel="stylesheet"> )
    2. At the end of the <body> add
      1. <script src="_content/BlazorStrap/popper.min.js"></script>
      2. <script src="_content/BlazorStrap/blazorstrap.js"></script>
  3. In Program.cs add
    1. builder.Services.AddBlazorStrap();
  4. In _Imports.razor add
    1. @using BlazorStrap

Blazor Server (Server-side Blazor)

  1. Download the V5.0 package from nuget:nuget
  2. Modify your _host.cshtml with the following.
    1. Inside the <head> add
      1. <link href="YourAssemblyName.styles.css" rel="stylesheet">
    2. At the end of the <body> add
      1. <script src="_content/BlazorStrap/popper.min.js"></script>
      2. <script src="_content/BlazorStrap/blazorstrap.js"></script>
  3. In Program.cs or Startup.cs add
    1. Services.AddBlazorStrap(); to your build pipeline
  4. In _Imports.razor add
    1. @using BlazorStrap

Bootstrap 4

Important: Target V1 for bootstrap 4

<PackageReference Include="BlazorStrap" Version="1.*.*" />

Blazor WebAssembly (Client-side Blazor)

  1. Inside the <head> element of your wwwroot/index.html, add <script src="_content/BlazorStrap/blazorStrap.js"></script><script src="_content/BlazorStrap/popper.min.js"></script>.
  2. In Program, add builder.Services.AddBootstrapCss();.

Blazor Server (Server-side Blazor)

  1. Inside the <head> element of your Pages/_Host.cshtml, add <script src="_content/BlazorStrap/blazorStrap.js"></script><script src="_content/BlazorStrap/popper.min.js"></script>.
  2. In Startup, add Services.AddBootstrapCss();.

Install

NuGet Pre Release Nuget (with prereleases) Nuget GitHub stars Gitter chat

Docs

https://blazorstrap.io

BlazorStyled

If you want to manage your styles in code and use dynamic styles you can check out my other project: BlazorStyled

Change Log

https://github.com/chanan/BlazorStrap/releases

Components:

  • Alerts
  • Badges
  • Breadcrumbs
  • Buttons
  • ButtonGroups
  • Cards
  • Carousals
  • Collapse
  • Dropdowns
  • OffCanvas V5
  • Images
  • Jumbotrons
  • Figures
  • Forms
  • Layout (Container, Row, Col)
  • Listgroups
  • Navs
  • Navbars
  • Media
  • Modals
  • Pagination
  • Popover
  • Progress
  • Tables
  • Tabs
  • Tooltip

V1 Extensions:

  • NuGet Pre Release BlazorStrap.Extensions.BSDataTable
  • NuGet Pre Release BlazorStrap.Extensions.FluentValidation
  • NuGet Pre Release BlazorStrap.Extensions.TreeView

Author: Chanan
Source Code: https://github.com/chanan/BlazorStrap 
License: Unlicense License

#blazor #webassembly #bootstrap 

BlazorStrap: Bootstrap 4 Components for Blazor Framework
Rupert  Beatty

Rupert Beatty

1648656840

BootstrapBlazor: Reusable bootstrap components for Blazor

Bootstrap Blazor Component

A set of enterprise-class UI components based on Bootstrap and Blazor. 

Features

  • Enterprise-class UI designed for web applications.
  • A set of high-quality Blazor components out of the box.
  • Supports WebAssembly-based client-side and SignalR-based server-side UI event interaction.
  • Supports Progressive Web Applications (PWA).
  • Build with C#, a multi-paradigm static language for an efficient development experience.
  • .NET Standard 2.1 based, with direct reference to the rich .NET ecosystem.
  • Supports NET5. (Server-Side, WASM)
  • Seamless integration with existing ASP.NET Core MVC and Razor Pages projects.

Installation Guide

Create a new project from the dotnet new template

  1. Install the template

dotnet new -i Bootstrap.Blazor.Templates::*

  1. Create the Boilerplate project with the template

dotnet new bbapp

Install Bootstrap Blazor Project Template

  1. Download Project Template

Microsoft Market link

  1. Double Click BootstrapBlazor.UITemplate.vsix

Import Bootstrap Blazor into an existing project

  1. Go to the project folder of the application and install the Nuget package reference

dotnet add package BootstrapBlazor

  1. Add the stylesheet javascripts file to your main index file - Pages/_Host.cshtml (Server) or wwwroot/index.html (WebAssembly)

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    . . .
    <link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css">
</head>
<body>
    . . .
    <script src="_framework/blazor.server.js"></script>
    <script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
</body>
</html>
  1. Open the ~/Startup.cs file in the and register the Bootstrap Blazor service:

C#

namespace BootstrapBlazorAppName
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            //more code may be present here
            services.AddBootstrapBlazor();
        }

        //more code may be present here
    }
}

Visual Studio Integration

To create a new Bootstrap Blazor UI for Blazor application, use the Create New Project Wizard. The wizard detects all installed versions of Bootstrap Blazor for Blazor and lists them in the Version combobox—this enables you to start your project with the desired version. You can also get the latest version to make sure you are up to date.

  1. Get the Wizard

To use the Create New Project Wizard, install the Bootstrap Blazor UI for Blazor Visual Studio Extensions. You can get it from the:

  • Visual Studio Marketplace (for Windows)
  1. Start the Wizard

To start the wizard, use either of the following approaches

Using the Project menu:

  • Click File > New > Project.
  • Find and click the C# Blazor Application option (you can use the search, or filter by Blazor templates).
  • Follow the wizard.

Mobile devices

 ChromeFirefoxSafariAndroid Browser & WebViewMicrosoft Edge
iOSSupportedSupportedSupportedN/ASupported
AndroidSupportedSupportedN/AAndroid v5.0+ supportedSupported
Windows 10 MobileN/AN/AN/AN/ASupported

Desktop browsers  

 ChromeFirefoxInternet ExplorerMicrosoft EdgeOperaSafari
MacSupportedSupportedN/AN/ASupportedSupported
LinuxSupportedSupportedN/AN/AN/AN/A
WindowsSupportedSupportedSupported, IE11+SupportedSupportedNot supported

Screenshots

Toggle Toast Upload Upload2 Bar Pei Doughnut

 

Online Examples

website website

English | 中文

Contribution

  1. Fork
  2. Create Feat_xxx branch
  3. Commit
  4. Create Pull Request

Donate

If this project is helpful to you, please scan the QR code below for a cup of coffee.

Author: Dotnetcore
Source Code: https://github.com/dotnetcore/BootstrapBlazor 
License: Apache-2.0 License

#blazor #webassembly #bootstrap 

BootstrapBlazor: Reusable bootstrap components for Blazor
Rupert  Beatty

Rupert Beatty

1648652160

Radzen.Blazor: The Home Of The Radzen Blazor Components

Radzen Blazor Components

The home of the Radzen Blazor components

Commercial support

Paid support for the Radzen Blazor Components is available as part of the Radzen Professional subscription.

Our flagship product Radzen provides tons of productivity features for Blazor developers:

  • The first in the industry WYSIWYG Blazor design time canvas
  • Scaffolding a complete CRUD applications from a database
  • Built-in security - authentication and authorization
  • Visual Studio Code and Professional support
  • Deployment to IIS and Azure
  • Dedicated support with 24 hour guaranteed response time
  • Active community forum

Get started with the Radzen Blazor Components

Install

Radzen Blazor Components are distributed as the Radzen.Blazor nuget package. You can add them to your project in one of the following ways

  • Install the package from command line by running dotnet add package Radzen.Blazor
  • Add the project from the Visual Nuget Package Manager
  • Manually edit the .csproj file and add a project reference

Import the namespace

Open the _Imports.razor file of your Blazor application and add this line @using Radzen.Blazor.

Include a theme

Open the _Host.cshtml file (server-side Blazor) or wwwroot/index.html (client-side Blazor) and include a theme CSS file by adding this snippet <link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css"> or <link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css"> if you either include Bootstrap manually or don't use it at all.

Include Radzen.Blazor.js

Open the _Host.cshtml file (server-side Blazor) or wwwroot/index.html (client-side Blazor) and include this snippet <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>

Use a component

Use any Radzen Blazor component by typing its tag name in a Blazor page e.g.

<RadzenButton Text="Hi"></RadzenButton>

Data-binding a property

<RadzenButton Text=@text />
<RadzenTextBox @bind-Value=@text />
@code {
  string text = "Hi";
}

Handing events

<RadzenButton Click="@ButtonClicked" Text="Hi"></RadzenButton>
@code {
  void ButtonClicked()
  {

  }
}

Author: Radzenhq
Source Code: https://github.com/radzenhq/radzen-blazor 
License: MIT License

#blazor #webassembly #csharp 

Radzen.Blazor: The Home Of The Radzen Blazor Components