Javscript

Blazor için Smart.Grid ile SQL Server tarafı CRUD

Blazor Uygulamasını Kurun

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

SQL’e bağla

takip edin SQL’e bağlanmaveritabanınız ve Akıllı Kullanıcı Arayüzü arasındaki bağlantıyı kurma kılavuzu.
Eğitimin sonunda Smart.Grid bir SQL Veritabanına bağlanacaktır:

Yöntem Oluştur

Grid’e yeni satırlar eklenmesini sağlamak için, öncelikle CRUD işlemleri için fonksiyonlar oluşturmalıyız.
Kişi Verisi sınıf.
Şu yöne rotayı ayarla KişiData.cs ve ek yöntemleri uygulayın:


.....
public Task<List<PersonModel>> GetPeople()
  {
      string sql = "select * from dbo.peopleTable";

      return _db.LoadData<PersonModel, dynamic>(sql, new { });
  }
  public Task<List<PersonModel>> InsertPerson(string Name, double Balance, string City, string Country)
  {
      string sql =
          "INSERT INTO [dbo].[peopleTable] ([Name], [Balance], [City], [Country]) OUTPUT INSERTED.Id, INSERTED.name, INSERTED.Balance, INSERTED.City, INSERTED.Country VALUES (@Name, @Balance, @City, @Country)";

      return _db.LoadData<PersonModel, dynamic>(sql, new { Name, Balance, City, Country });
  }
  public Task<List<PersonModel>> DeletePerson(int Id)
  {
      string sql =
          "DELETE FROM [dbo].[peopleTable] WHERE [Id]=@Id";

      return _db.LoadData<PersonModel, dynamic>(sql, new { Id });
  }
  public Task<List<PersonModel>> UpdatePerson(int Id, string Name, double Balance, string City, string Country)
  {
      string sql =
          "UPDATE [dbo].[peopleTable] SET [Name] = @Name, [Balance] = @Balance, [City] = @City, [Country] = @Country WHERE [Id] = @Id";

      return _db.LoadData<PersonModel, dynamic>(sql, new { Name, Balance, City, Country, Id });
  }
.....

Ardından, yeni yöntemleri IPeopleData arayüz:


.....
Task<List<PersonModel>> DeletePerson(int Id);
Task<List<PersonModel>> GetPeople();
Task<List<PersonModel>> InsertPerson(string Name, double Balance, string City, string Country);
Task<List<PersonModel>> UpdatePerson(int Id, string Name, double Balance, string City, string Country);
.....

Ekle Oluştur işlevi

şuraya gidin: Index.razor sayfasına gidin ve bir “Yeni satır ekle” Düğmesi oluşturun. Daha sonra bir AddRow yeni bir kişi oluşturan ve ardından güncellenmiş SQL Tablosunu getiren işlev:


<Button OnClick="AddRow">Add new row</Button>
.....
@code{
  .....
  private async Task AddRow()
  {
      PersonModel newPerson = (await _db.InsertPerson("John", 1000, "Paris", "France"))[0];
      people = await _db.GetPeople();
  }
}

Yeni satırlı ızgara

Yeni Kişi, SQL Tablosunda oluşturulur:

SQL ile yeni satır

Sil işlevi ekle

Bir “Son satırı sil” Düğmesi ekleyin. Daha sonra bir DeleteLastRow son SQL Kaydı’nı kaldıran ve ardından güncellenmiş SQL Tablosunu getiren işlev:


<Button OnClick="DeleteLastRow">Delete row</Button>
.....
@code{
  .....
  private async Task DeleteLastRow()
  {
    int lastId = people[people.Count - 1].Id;
    await _db.DeletePerson(lastId);
    people = await _db.GetPeople();
  }
}

Kaldırılan satıra sahip ızgara

Son Kişi SQL Tablosundan kaldırılır:

Kaldırılan satırla SQL

Güncelleme işlevi ekle

Güncelleme işlevi eklemek için, önce Grid Düzenlemeyi şuradan etkinleştirin: Editing Emlak.
kullanacağız OnEndEdit Her değişiklikten sonra SQL Tablosunu güncelleme olayı:


<Grid @ref="@grid" DataSource="@people" DataSourceSettings="@dataSourceSettings" OnEndEdit="OnEndEdit" Editing="@editing">
  <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{
  GridEditing editing = new GridEditing()
  {
      Enabled = true,
      Mode = GridEditingMode.Cell
  };
}

Yeni bir tane oluştur OnEndDüzenle işlev. Event.detail’i kullanarak, düzenlenen satırın değerlerini alın ve UpdatePerson SQL Tablosunda değişiklik yapma yöntemi:


        private async Task OnEndEdit(Event ev)
        {
            GridEndEditEventDetail EventDetail = ev["Detail"];
            dynamic Editedrow = JObject.Parse((await grid.GetRowData(EventDetail.Row)).ToString());
    
            int EditedId = (Editedrow.Id).ToObject<int>();
            string EditedName = (Editedrow.Name).ToObject<string>();
            double EditedBalance = (Editedrow.Balance).ToObject<double>();
            string EditedCity = (Editedrow.City).ToObject<string>();
            string EditedCountry = (Editedrow.Country).ToObject<string>();
            await _db.UpdatePerson( EditedId, EditedName, EditedBalance,  EditedCity, EditedCountry);
        }
      

ızgara düzenleme

Düzenlemeden sonra değişiklikler SQL Tablosuna uygulanır:

Kaldırılan satırla SQL

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu