asp.net-core-razor-pages-oyrenirik--1-ci-hisse

Asp.net core Razor Pages öyrənirik -1-ci hissə

Asp.NET CORE Razor Pages adəti üzrə MVC-yə nisbətən kiçik həcmli, səhifə əsaslı(page based) veb səhifələrin yazılması zamanı istifadə olunur.

Razor Pages .NET Core 2.0 versiyasından sonra MVC-yə alternativ olaraq, bir mənada web forms-u əvəzləmək üçün relizə buraxılıb.

           Bu məqaləmizdən başlayaraq ASP.NET CORE 3.1-də Sqlite baza əsaslı CRUD əməliyyatlar yerinə yetirən Razor Pages veb tətbiqi hazırlamağa başlayacağıq.

PS: Mənbə kodlarını buradan endirə bilərsiniz.

           İstifadə olunan texnologiya və alətlər:

1)Visual Studio Code

2)Sqlite (Valentino studio etc.)

3)Razor Pages

4) .NET CORE 3.1

5)EF Core 3.1

           Başlayaq...

1)İlk öncə Visual Studio Code-u(bundan sonra VSC) açaraq yeni bir  qovluq(folder) yaradırıq. (burada aspnetcorelab qovluğu) .


2)VSC-də Terminal menyusundan new terminal seçirik.

3)Açılan pəncərədə dotnet new webapp –o CustomerSalesApp əmrini veririk.

           -VSC vasitəsilə Razor Pages template generasiya etmək üçün new webapp əmri istifadə olunur. Generasiya olunan şablonu yeni bir qovluqda yerləşdirmək üçün –o qovluğun_adı əmri verilir.

4) cd CustomerSalesApp yazaraq terminalı generasiya olunmuş qovluqdan işə salmaq üçün tənzimləyirik

Sqlite-i yükləmək üçün dotnet add package Microsoft.entityframeworkcore.sqlite yazırıq.

5)Models qovluğu yaradaraq içərisində aşağıdakı modelləri yazırıq

    public class Customer
    {
        public int Id{get;set;}
        public string CompanyName{get;set;}
        public string ContractName{get;set;}
        public string ContractTitle{get;set;}


    }

public class Order
    {
        public int Id{get;set;}
        public int CustomerId{get;set;}
        public Customer Customer{get;set;}


        [DataType(DataType.DateTime)]
        [Column(TypeName="smalldatetime")]
        [Required]
        public DateTime OrderDate{get;set;}
         
         [Column(TypeName="decimal(6,2)")]
          [Required]
         public decimal Freight{get;set;}


          [DataType(DataType.DateTime)]
           [Required]
         [Column(TypeName="smalldatetime")]
         public DateTime ShipDate{get;set;}


    }

6)DbContext klasımızı yaradırıq

 public class CustomerSalesDbContext : DbContext
    {


        public CustomerSalesDbContext(DbContextOptions options):base(options)
        {
            
        }
        public DbSet Customers{get;set;}
        public DbSet Orders{get;set;}
        
    }

7)EF Code first generasiya etmək üçün bizə aşağıdakılar lazım olaraq

 -- VSC üzərindən generasiya üçün dotnet-ef tool. Bununçün dotnet-ef tool-unu qlobal kontekstə install edirik ki, hər proyektdə onu bir daha yükləməyək.

dotnet tool install --global dotnet-ef

 Code First generasiya üçün isə əlavə olaraq Microsoft.EntityFrameworkCore.Design kitabxanasını yükləmək lazımdır

(dotnet add package Microsoft.EntityFrameworkCore.Design)

Əks halda belə bir errorla rastlaşacağıq.

8)Miqrasiya şablonunu yaratmaq üçün

dotnet ef migrations add Initial əmri yazırıq

Miqrasiya aparmamışdan öncə DbContext-in proyektdə iştirak etdiyini göstərmək lazımdır. Əks halda daha bir errorla rastlaşarıq.

DbContext-in proyektdə iştirakı üçün ilk öncə appsettings.json faylını açırıq və belə bir şey yazırıq.

{
    "Logging": {
        "LogLevel": {
            "Default""Information",
            "Microsoft""Warning",
            "Microsoft.Hosting.Lifetime""Information"
        }
    },
    "AllowedHosts""*",
    "ConnectionString""Data Source=myapp.db"
}

Data Sonra Startup.cs faylında ConfigureServices metodunda belə bir kod hissəsi yazırıq.

 public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddDbContext
                         (x => x.UseSqlite(Configuration.GetSection("ConnectionString").Value));
        }

9)Miqrasiya şablonu üçün: dotnet ef migrations add Initial əmrini yazırıq

10)Miqrasiyadan baza yaratmaq üçün:  dotnet ef database update

 

           Razor Pages-də bütün vizualizasiya faylları Pages qovluğunda yerləşir. Hər bir səhifə üçün həm .cshtml həm də cshtml.cs formatlı fayllar yaranır. Burada cshtml faylı vizualizasiya frontunu saxlayır( html,css, js +razor fraqmentlər). Digər tərəfdən hər bir cshtml faylının .cshtml.cs faylı var. Bu fayl işə backend kodlarını saxlayır. Məhz burada biz backend based əməliyyatlar yerinə yetiririk(bazayla,servislə, fayllarla əlaqə, biznes qoydalar vəs.) Bu fayl bir növ MVC-dəki Controller rolunu oynayır.

           VSC-də yeni bir Page yaratmaq üçün aşağıdakı əmri veririk:

dotnet new Page -n Create -na CustomerSalesApp.Pages.Customers -o Pages/Customers

Burada new Page vasitəsilə yeni razor page faylının yaradılmasını istəyirik.(burada Create fayli)

-n əmri yeni yaranacaq faylın adını göstərir.

-o hansı qovluqda yaradılacağını göstərir

-na Yaranan faylın hansı adsahəsinə(namespace) aid olacağını göstərir.

Beləliklə qeyd etdiyimiz kimi, 2 ədəd fayl yarandı. Amma VS-da siz bunu tək bir fayl kimi görəcəksiniz. VSC-da isə 2 fayl kimi görünür.

Məlumatlar düzgün daxil edildikdən sonra səhifənin yönləndirilməsi üçün List faylını da yaradaq.

dotnet new Page -n List -na CustomerSalesApp.Pages.Customers -o Pages/Customers

           Ilk oncə Pages/Customers qovluğuna generasiya olunmuş Create.cshtml faylını düzəldək.

asp-for="Customer.XXXXX" ilə dinamik bağlama vaxtı(binding) inputdan göndərilən məlumatın serverdə BindProperty ilə göstərilən Customer klasının hansı property-sinə yazılacağını bildiririk.

İndi isə backenddə Create.cshtml.cs faylına kodlarımızı yazaq.

           using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using CustomerSalesApp.Models;


namespace CustomerSalesApp.Pages.Customers
{
    public class CreateModel : PageModel
    {
        private CustomerSalesDbContext _context;
        public CreateModel(CustomerSalesDbContext context)
        {
            _context  = context;
        }
        public IActionResult OnGet()
        {
            return Page();
        }



       [BindProperty]
       public Customer Customer{get;set;}
        public async Task OnPostAsync()
        {
           if(!ModelState.IsValid)
              return Page();
            _context.Customers.Add(Customer);
           await _context.SaveChangesAsync();
           return RedirectToPage("List");
        }
    }
}

Göründüyü kimi, asılılığın yeridilməsi (dependency injection) vasitəsilə DbContext faylımızı modelimizə yeridirik. Hər bir model PageModel adlanan klasdan əmələ gəlir.

Metodların adları, verilən http metod sorğuları ilə bağlıdır. Beləki, əgər səhifəmiz GET sorğusu qəbul edəcəksə OnGET() , post sorğusu qəbul edəcəksə OnPost() metodları yaradırıq. (Metodların asinxron variantları da keçərlidir: OnGetAsync() və OnPostAsync())

           Viewdan göndəriləcək modeli metoda arqument kimi yox, sadəcə property kimi koda əlavə edirik. Sadəcə property-ni BindProperty atributu ilə işarələmək lazımdır.

Proyekti işə salmaq üçün ilk öncə proyekt olan qovluğa (burada CustomerSalesApp qovluğu) keçərək dotnet run əmri vermək lazımdır.

 Url üzərindən  localhost:5001/Customers/Create yazan zaman OnGET() metoduna yönləndirilirik. Çünki səhifəmizə http GET əmri göndərilir. Create.cshtml.cs faylında aşağıdakı kodu yazmışıq

  public IActionResult OnGet()
        {
            return Page();
        }

Koddan göründüyü kimi, OnGET() metodu işə düşəndə sadəcə html səhifəmiz yüklənəcək. Return Page() əmri bunu bildirir.Yəni eyniadlı səhifənin html variantını (burada Create.cshtml) yüklə.

           Səhifədə məlumatları doldurduqdan sonra post sorğusu ilə həmin məlumatları OnPOST() metoduna göndəririk. Sadəcə arqumentdə modeli vermirik, bunun əvəzinə həmin modeli BindProperty ilə göstəririk.

 [BindProperty]
       public Customer Customer{get;set;}

        public async Task OnPostAsync()
        {
           if(!ModelState.IsValid)
              return Page();
            _context.Customers.Add(Customer);
           await _context.SaveChangesAsync();
           return RedirectToPage("List");
        }

           Add əməliyyatı uğurlu yerinə yetirildikdən sonra səhifəmiz /Customers/List bölməsinə keçir.

Gələn məqaləmizdə bütün CRUD əməliyyatları yerinə yetirəcəyik.



Tural

Tural Süleymani

Süleymani Tural Microsoft-un MCSD statuslu mütəxəssisidir, 2008-ci ildən bu yana proqramlaşdırma üzrə tədris aparır

Müəllifin bu dildə ən son postları

Bu yazıları da bəyənə bilərsiniz