Blazor Grid – SQL’e bağla

Blazor Uygulamasını Kurun

Takip et BaşlarkenBlazor Uygulamanızı Smart UI ile kurma kılavuzu.

SQL Verileri Oluşturun

Aşağıdaki adımlar, Visual Studio 2019’da bir SQL Veritabanının nasıl oluşturulacağını ve bunun verilerle nasıl doldurulacağını detaylandırmaktadır. Zaten SQL Veriniz varsa, devam edin Blazor’u SQL Verilerine Bağlayın.

1. Tablo oluşturmak için önce uygulamanız için bir veritabanı oluşturmanız gerekir. Şu yöne rotayı ayarla Görünüm -> SQL Server Nesne Gezgini
2. İçinde localdb -> Veritabanları dizini, Veritabanları klasörüne sağ tıklayarak yeni bir SQL veritabanı oluşturun. Demo amacıyla, oluşturacağız insanlar.db
3. Bir tablo oluşturmak için veritabanına sağ tıklayın ve Yeni Sorgu…. Ardından, müşterilerimizin bir tablosunu oluşturmak için aşağıdaki SQL kodunu yapıştırın:

   CREATE TABLE [dbo].[peopleTable] (
     [Id]      INT        NOT NULL,
     [Name]    NCHAR (50) NULL,
     [Balance] FLOAT (50) NULL,
     [City]    NCHAR (50) NULL,
     [Country] NCHAR (50) NULL,
     PRIMARY KEY CLUSTERED ([Id] ASC)
   );
   
   INSERT INTO [dbo].[peopleTable] ([Id], [Name], [Balance], [City], [Country]) VALUES (1, N'Maria Anders', 130.0000, N'Berlin', N'Germany')
   INSERT INTO [dbo].[peopleTable] ([Id], [Name], [Balance], [City], [Country]) VALUES (2, N'Ana Trujillo', 230.0000, N'Mxico D.F.', N'Mexico')
   INSERT INTO [dbo].[peopleTable] ([Id], [Name], [Balance], [City], [Country]) VALUES (3, N'Antonio Moreno', 3500.0000, N'Mxico D.F.', N'Mexico')
   INSERT INTO [dbo].[peopleTable] ([Id], [Name], [Balance], [City], [Country]) VALUES (4, N'Thomas Hardy', 55.0000, N'London', N'UK')
   INSERT INTO [dbo].[peopleTable] ([Id], [Name], [Balance], [City], [Country]) VALUES (5, N'Christina Berglund', 1500.0000, N'Lule', N'Sweden')
   INSERT INTO [dbo].[peopleTable] ([Id], [Name], [Balance], [City], [Country]) VALUES (6, N'Hanna Moos', 650.0000, N'Mannheim', N'Germany')
   INSERT INTO [dbo].[peopleTable] ([Id], [Name], [Balance], [City], [Country]) VALUES (7, N'Frdrique Citeaux', 50.0000, N'Strasbourg', N'France')
   INSERT INTO [dbo].[peopleTable] ([Id], [Name], [Balance], [City], [Country]) VALUES (8, N'Martn Sommer', 0.0000, N'Madrid', N'Spain')

   
   

Blazor’u SQL Verilerine Bağlayın

Aşağıdaki adımlar, SQL Verilerinizi Blazor Uygulamasına nasıl bağlayacağınızı detaylandırmaktadır. Verileriniz zaten bağlıysa, devam edin Izgarayı SQL Verilerine Bağlama

1. Çözüm Gezgini içinde, Çözümünüze sağ tıklayın ve yeni bir tür proje ekleyin Sınıf Kitaplığı ve ara Veri Erişim Kitaplığı
   
   
2. Visual Studio NuGet Paket Yöneticisini kullanarak aşağıdaki bağımlılıkları ekleyin: Veri Erişim Kitaplığı:

   • Microsoft.Extensions.Configuration.Abstractions
   • System.Data.SqlClient
   • Dapper

   
   

3. İçeri DataAcessLibraryyeni bir klasör oluştur “Modeller”ardından yeni bir tür öğesi oluşturun Class aranan KişiModel.cs
   SQL tablomuzdan her bir Kişinin özelliklerini burada tanımlayacağız:

   using System;
   using System.Collections.Generic;
   using System.Text;
   
   namespace DataAccessLibrary.Models
   {
       public class PersonModel
       {
           public int Id { get; set; }
           public string Name { get; set; }
           public decimal Balance { get; set; }
           public string City { get; set; }
           public string Country { get; set; }
       }
   }

   
   

4. İçeri DataAcessLibraryyeni bir tür öğesi oluştur Class aranan SqlDataAccess.cs
   Burası oluşturacağımız yer Veri yükle işlev:

   using Dapper;
   using Microsoft.Extensions.Configuration;
   using System;
   using System.Collections.Generic;
   using System.Data;
   using System.Data.SqlClient;
   using System.Linq;
   using System.Text;
   using System.Threading.Tasks;
   
   namespace DataAccessLibrary
   {
       public class SqlDataAccess
       {
           private readonly IConfiguration _config;
   
           public string ConnectionStringName { get; set; } = "Default";
   
           public SqlDataAccess(IConfiguration config)
           {
               _config = config;
           }
   
           public async Task<List<T>> LoadData<T, U>(string sql, U parameters)
           {
               string connectionString = _config.GetConnectionString(ConnectionStringName);
   
               using (IDbConnection connection = new SqlConnection(connectionString))
               {
                   var data = await connection.QueryAsync<T>(sql, parameters);
   
                   return data.ToList();
               }
           }
       }
   }

   seçin SqlVeri Erişimi sınıfına gidin ve bir Arayüz oluşturun Hızlı Eylemler ve Yeniden Düzenleme -> Arabirimi Çıkart -> Tamam
   
   

5. İçeri DataAcessLibraryyeni bir tür öğesi oluştur Class aranan PeopleData.cs
   Burada oluşturacağımız GetPeople bir sql sorgusu yürüten ve her öğenin bir Person nesnesi olduğu bir dizi döndüren yöntem:

   using DataAccessLibrary.Models;
   using System;
   using System.Collections.Generic;
   using System.Text;
   using System.Threading.Tasks;
   
   namespace DataAccessLibrary
   {
       public class PeopleData
       {
           private readonly ISqlDataAccess _db;
   
           public PeopleData(ISqlDataAccess db)
           {
               _db = db;
           }
   
           public Task<List<PersonModel>> GetPeople()
           {
               string sql = "select * from dbo.peopleTable";
   
               return _db.LoadData<PersonModel, dynamic>(sql, new { });
           }
       }
   }

   Daha sonra için yeni bir arayüz oluşturun. İnsanlarVerileri ile aynı adımları izleyerek SqlVeri Erişimi

   
   

6. Son olarak, şuraya gidin: insanlar.db kullanmak SQL Server Nesne Gezgini, sağ tıklayın ve özellikleri seçin. Sonra değerini kopyalayın “Bağlantı dizisi” Emlak

   
   

   Blazor Uygulamanızın içinde, şuraya gidin: appsettings.json ve ayarla Bağlantı Dizeleri.Varsayılan kopyalanan değere:

   
   

Izgarayı SQL Verilerine Bağlama

1. Grid bileşenini Blazor Uygulamanızın Pages/Index.razor dosyasına ekleyin ve görüntülemek istediğiniz Sütunu ayarlayın:

   <Grid DataSource="@people" DataSourceSettings="@dataSourceSettings">
     <Columns>
       <Column DataField="Name" Label="Client Name"></Column>
       <Column DataField="Balance" Label="Acccount Balance"></Column>
       <Column DataField="City" Label="City"></Column>
       <Column DataField="Country" Label="Country"></Column>
     </Columns>
   </Grid>

2. SQl veritabanını ve Modelleri sayfanın en üstüne enjekte edin:

   @page "https://www.jqwidgets.com/"
   @using Smart.Blazor
   @using DataAccessLibrary
   @using DataAccessLibrary.Models
   
   @inject IPeopleData _db
             

3. @code bloğunun içinde, çağırın GetPeople() sayfa yüklendiğinde ve ayarlandığında insanlar Kılavuza Veri Kaynağı Olarak Dizi. Daha sonra belirtin VeriKaynakTürü bir GridDataSourceSettings nesnesinin içinde ve onu Grid’in bir özelliği olarak ayarlayın.
   
   Sütunların DataType ayarının zorunlu olmadığını unutmayın, ancak Smart.Grid’in Filtreleme ve Sıralama işlevlerini kullanmayı planlıyorsanız önerilir.

   @page "https://www.jqwidgets.com/"
   @using Smart.Blazor
   @using DataAccessLibrary
   @using DataAccessLibrary.Models
   
   @inject IPeopleData _db
   
   <h2>Clients Table</h2>
   @if (people == null)
   {
     <p><em>Loading...</em></p>
   }
   else
   {
     <Grid DataSource="@people" DataSourceSettings="@dataSourceSettings">
       <Columns>
         <Column DataField="Name" Label="Client Name"></Column>
         <Column DataField="Balance" Label="Acccount Balance"></Column>
         <Column DataField="City" Label="City"></Column>
         <Column DataField="Country" Label="Country"></Column>
       </Columns>
     </Grid>
   }
   @code {
       GridDataSourceSettings dataSourceSettings = new GridDataSourceSettings()
       {
           DataFields = new List<IGridDataSourceSettingsDataField>()
   {
               new GridDataSourceSettingsDataField() { Name = "Name", DataType = GridDataSourceSettingsDataFieldDataType.String },
               new GridDataSourceSettingsDataField() { Name = "Balance", DataType = GridDataSourceSettingsDataFieldDataType.Number },
               new GridDataSourceSettingsDataField() { Name = "City", DataType = GridDataSourceSettingsDataFieldDataType.String },
               new GridDataSourceSettingsDataField() { Name = "Country", DataType = GridDataSourceSettingsDataFieldDataType.String }
           },
           DataSourceType = GridDataSourceSettingsDataSourceType.Array
       };
   
       private List<PersonModel> people;
   
       protected override async Task OnInitializedAsync()
       {
           people = await _db.GetPeople();
       }
   }
             

Buradan devam et

Takip et Grid’i Kullanmaya Başlayıntarafından sunulan birçok özellik hakkında daha fazla bilgi edinmek için kılavuz Blazor Smart.Grid bileşen.