Öğretici: Kullanmaya başlayın Razor Sayfaları ile ASP.NET Core

  • Makale
  • Okumak için 7 dakika

Gönderen Rick Anderson

Bu, ASP.NET Core Pages web uygulaması uygulamanın temellerini öğreten bir serinin Razor ilk öğreticisidir.

Denetleyiciler ve görünümler hakkında bilgi sahibi olan geliştiricilere yönelik daha gelişmiş bir giriş için bkz. Sayfalara Razor Giriş.

Geliştirme konusunda yeniyseniz ASP.NET Core web kullanıcı arabirimi ASP.NET Core en uygun çözümlerden emin değilseniz bkz. ASP.NET Core kullanıcı arabirimi seçme .

Serinin sonunda film veritabanını yöneten bir uygulamanız olacak.

Bu öğreticide şunları yaptınız:

  • Sayfalar Razor web uygulaması oluşturun.
  • Uygulamayı çalıştırın.
  • Proje dosyalarını inceleme.

Bu öğreticinin sonunda, sonraki öğreticilerde geliştireceğimiz çalışan bir Sayfalar Razor web uygulamasına sahip oluruz.

Home veya Index page

Önkoşullar

Sayfalar Razor web uygulaması oluşturma

  1. Yeni Visual Studio ve Yeni proje oluştur'a seçin. Daha fazla bilgi için, bkz. Create a new project in Visual Studio.

    Başlangıç penceresinden yeni proje oluşturma

  2. Yeni proje oluştur iletişim kutusunda Web Uygulaması'ASP.NET Core ve ardından Sonraki'yi seçin.

    ASP.NET Core Web Uygulaması Oluşturma

  3. Yeni projenizi yapılandır iletişim kutusunda, yeni RazorPagesMovie projenizin Project girin. Büyük/büyük harfle eşleştirme de dahil olmak üzere projeye Razor PagesMovie adını vermek önemlidir. Bu nedenle örnek kodu kopyalayıp yapıştırarak ad alanları eşleşmez.

  4. Oluştur’u seçin.

    Projeyi yapılandırma

  5. Yeni bir web uygulaması ASP.NET Core iletişim kutusunda şunları seçin:

    1. Açılan listelerde .NET Core ASP.NET Core 5.0'a sahip olur.
    2. Web Uygulaması.
    3. Create.

    Web ASP.NET Core'ı seçin

    Aşağıdaki başlangıç projesi oluşturulur:

    Çözüm Gezgini

Uygulamayı çalıştırma

  • Hata ayıklayıcı olmadan çalıştırmak için Ctrl+F5 tuşlarına basın.

    Visual Studio bir proje SSL kullanmak için henüz yapılandırılmadığında aşağıdaki iletişim kutusunu görüntüler:

    Bu proje SSL kullanmak üzere yapılandırılmış. tarayıcıdaki SSL uyarılarını önlemek için IIS Express oluşturduğu otomatik olarak imzalanan sertifikaya güvenmeyi tercih edebilirsiniz. IIS Express SSL sertifikasına güvenmek istiyor musunuz?

    IIS Express SSL sertifikasına güveniyorsanız evet ' i seçin.

    Aşağıdaki iletişim kutusu görüntülenir:

    Güvenlik Uyarısı iletişim kutusu

    Geliştirme sertifikasına güvenmeyi kabul ediyorsanız Evet ' i seçin.

    Firefox tarayıcısına güvenme hakkında bilgi için bkz. Firefox SEC_ERROR_INADEQUATE_KEY_USAGE hatası.

    Visual Studio uygulamayı IIS Express ve çalıştırır. Adres çubuğu gibi localhost:port# bir şey değil, example.com gösterir. Bunun nedeni yerel localhost bilgisayarın standart ana bilgisayar adıdır. Localhost yalnızca yerel bilgisayardan gelen web isteklerine hizmet verir. Visual Studio bir web projesi oluşturduğunda, web sunucusu için rastgele bir bağlantı noktası kullanılır.

Proje dosyalarını inceleme

Sonraki öğreticilerde üzerinde çalışacağız ana proje klasörlerine ve dosyalarına genel bir bakış burada veserdir.

Sayfalar klasörü

Sayfaları Razor ve destek dosyalarını içerir. Her Razor sayfa bir dosya çiftidir:

  • Söz dizimi kullanan C# koduyla HTML işaretlemesi olan bir .cshtml Razor dosyası.
  • Sayfa olaylarını gerçekleştiren C# koduna sahip bir .cshtml.cs dosyası.

Destekleyen dosyaların adları alt çizgiyle başlar. Örneğin, _Layout.cshtml dosyası tüm sayfalarda ortak olan kullanıcı arabirimi öğelerini yapılandırır. Bu dosya, sayfanın üst kısmında gezinti menüsünü ve sayfanın en altındaki telif hakkı bildirimini ayarlar. Daha fazla bilgi için bkz. ASP.NET Core'de düzen.

wwwroot klasörü

HTML dosyaları, JavaScript dosyaları ve CSS dosyaları gibi statik varlıkları içerir. Daha fazla bilgi için bkz. ASP.NET Core'daki statik dosyalar.

appsettings.json

Bağlantı dizeleri gibi yapılandırma verilerini içerir. Daha fazla bilgi için bkz. ASP.NET Core'de yapılandırma.

Program.cs

Uygulamanın giriş noktasını içerir. Daha fazla bilgi için bkz. ASP.NET Core .NET genel ana bilgisayarı.

Startup.cs

Uygulama davranışını yapılandıran kodu içerir. Daha fazla bilgi için bkz. ASP.NET Core 'de uygulama başlatma.

Tamamlanan örnekle ilgili sorunları giderme

Çözümleye olmadığınız bir sorunla karşılaştırıldığında kodunuzu tamamlanan projeyle karşılaştırın. Tamamlanan projeyi görüntüleme veya indirme (indirme).

Sonraki adımlar

Sonraki: Model ekleme

Bu, ASP.NET Core Pages web uygulaması uygulamanın temellerini öğreten bir serinin Razor ilk öğreticisidir.

Denetleyiciler ve görünümler hakkında bilgi sahibi olan geliştiricilere yönelik daha gelişmiş bir giriş için bkz. Sayfalara Razor Giriş.

Serinin sonunda film veritabanını yöneten bir uygulamanız olacak.

Örnek kodu görüntüleme veya indirme (indirme).

Bu öğreticide şunları yaptınız:

  • Sayfalar Razor web uygulaması oluşturun.
  • Uygulamayı çalıştırın.
  • Proje dosyalarını inceleme.

Bu öğreticinin sonunda, sonraki öğreticilerde üzerinde derlemeniz gereken çalışan bir Sayfalar Razor web uygulamasına sahip oluruz.

Home veya ::no-loc(Index)::: sayfası

Önkoşullar

Sayfalar Razor web uygulaması oluşturma

  • Dosya Visual Studio Yeni dosya'Project. >

  • Web Uygulaması'ASP.NET Core yeni bir uygulama oluşturun ve Sonraki'yi seçin. Başlangıç penceresinden yeni projeyi oluşturma

  • Projeyi Razor pagesfilmi olarak adlandırın. Kodu kopyaladığınızda ve yapıştırdığınızda ad alanlarının eşleşmesi için Project Razor pagesfilmi olarak adlandırmak önemlidir. Projeyi adlandırın

  • açılan Web uygulamasındaki ASP.NET Core 3,1 ' i seçin ve ardından oluştur' u seçin.

ASP.NET Core Web uygulaması seç

Aşağıdaki Başlatıcı proje oluşturulur:

Çözüm Gezgini

Uygulamayı çalıştırma

  • Hata ayıklayıcı olmadan çalıştırmak için Ctrl+F5 tuşlarına basın.

    Visual Studio bir proje SSL kullanmak için henüz yapılandırılmadığında aşağıdaki iletişim kutusunu görüntüler:

    Bu proje SSL kullanmak üzere yapılandırılmış. tarayıcıdaki SSL uyarılarını önlemek için IIS Express oluşturduğu otomatik olarak imzalanan sertifikaya güvenmeyi tercih edebilirsiniz. IIS Express SSL sertifikasına güvenmek istiyor musunuz?

    IIS Express SSL sertifikasına güveniyorsanız evet ' i seçin.

    Aşağıdaki iletişim kutusu görüntülenir:

    Güvenlik Uyarısı iletişim kutusu

    Geliştirme sertifikasına güvenmeyi kabul ediyorsanız Evet ' i seçin.

    Firefox tarayıcısına güvenme hakkında bilgi için bkz. Firefox SEC_ERROR_INADEQUATE_KEY_USAGE hatası.

    Visual Studio uygulamayı IIS Express ve çalıştırır. Adres çubuğu gibi localhost:port# bir şey değil, example.com gösterir. Bunun nedeni yerel localhost bilgisayarın standart ana bilgisayar adıdır. Localhost yalnızca yerel bilgisayardan gelen web isteklerine hizmet verir. Visual Studio bir web projesi oluşturduğunda, web sunucusu için rastgele bir bağlantı noktası kullanılır.

Proje dosyalarını inceleyin

Aşağıda, daha sonraki öğreticilerde birlikte çalışacağımız ana proje klasörlerine ve dosyalarına genel bir bakış sunulmaktadır.

Sayfalar klasörü

RazorSayfaları ve destekleyici dosyaları içerir. Her Razor sayfa bir dosya çiftidir:

  • Sözdizimi kullanılarak C# kodu ile HTML biçimlendirmesine sahip bir . cshtml dosyası Razor .
  • Sayfa olaylarını işleyen C# koduna sahip bir . cshtml. cs dosyası.

Destekleyici dosyalar bir alt çizgiyle başlayan adlara sahiptir. Örneğin, _Layout. cshtml dosyası tüm sayfalarda ortak kullanıcı arabirimi öğelerini yapılandırır. Bu dosya sayfanın en üstündeki gezinti menüsünü ve sayfanın alt kısmındaki telif hakkı bildirimini ayarlar. Daha fazla bilgi için bkz. ASP.NET Core'de düzen.

Wwwroot klasörü

HTML dosyaları, JavaScript dosyaları ve CSS dosyaları gibi statik dosyaları içerir. Daha fazla bilgi için bkz. ASP.NET Core'daki statik dosyalar.

appSettings. JSON

Bağlantı dizeleri gibi yapılandırma verilerini içerir. Daha fazla bilgi için bkz. ASP.NET Core'de yapılandırma.

Program.cs

Programın giriş noktasını içerir. Daha fazla bilgi için bkz. ASP.NET Core .NET genel ana bilgisayarı.

Startup.cs

Uygulama davranışını yapılandıran kodu içerir. Daha fazla bilgi için bkz. ASP.NET Core 'de uygulama başlatma.

Sonraki adımlar

Sonraki: model ekleme

bu, bir serinin ASP.NET Core bir web uygulaması oluşturma hakkında temel bilgileri öğretir Razor .

Denetleyiciler ve görünümler hakkında bilgi sahibi olan geliştiricilere daha gelişmiş bir giriş için bkz. Razor sayfalara giriş.

Geliştirme konusunda yeniyseniz ASP.NET Core web kullanıcı arabirimi ASP.NET Core en uygun çözümlerden emin değilseniz bkz. ASP.NET Core kullanıcı arabirimi seçme .

Serinin sonunda, bir film veritabanını yöneten bir uygulamanız olacaktır.

Bu öğreticide şunları yaptınız:

  • Bir Razor Sayfalar Web uygulaması oluşturun.
  • Uygulamayı çalıştırın.
  • Proje dosyalarını inceleyin.

Bu öğreticinin sonunda, Razor sonraki öğreticilerde geliştireceğim bir çalışma sayfaları Web uygulamanız olacaktır.

::: No-Loc (Home)::: or::: No-Loc (Dizin)::: sayfa

Önkoşullar

RazorSayfalar Web uygulaması oluşturma

  1. Visual Studio 2022 ' u başlatın ve yeni proje oluştur' u seçin.

    Başlangıç penceresinden yeni bir proje oluştur

  2. yeni proje oluştur iletişim kutusunda ASP.NET Core Web uygulaması' nı seçin ve ardından ileri' yi seçin.

    ASP.NET Core Web uygulaması oluşturma

  3. yeni projenizi yapılandırın iletişim kutusunda RazorPagesMovie Project adı girin. Büyük/küçük harf eşleştirme da dahil olmak üzere Project Razor pagesmovie'in adı, örnek kodu kopyalayıp yapıştırdığınızda ad alanlarının eşleşmesi önemlidir.

    Yeni projenizi yapılandırın

  4. İleri’yi seçin.

  5. Ek bilgi iletişim kutusunda .net 6,0 (uzun süreli destek) öğesini seçin ve ardından Oluştur' u seçin.

    Ek bilgiler

    Aşağıdaki Başlatıcı proje oluşturulur:

    Çözüm Gezgini

Uygulamayı çalıştırma

Çözüm Gezgini'de Razor PagesMovie'yu seçin ve ardından Ctrl+F5 tuşlarına basarak hata ayıklayıcı olmadan çalıştırın.

Visual Studio henüz SSL kullanmak üzere yapılandırılmamışsa aşağıdaki iletişim kutusunu görüntüler:

Bu proje SSL kullanmak üzere yapılandırılmıştır. Tarayıcıda SSL uyarılarından kaçınmak için, sertifikanın kendi kendine IIS Express seçebilirsiniz. Sertifika ssl sertifikasına IIS Express misiniz?

Ssl sertifikasına güveniyorsanız Evet'IIS Express seçin.

Aşağıdaki iletişim kutusu görüntülenir:

Güvenlik uyarısı iletişim kutusu

Geliştirme sertifikasına güvenmeyi kabul ediyorsanız Evet'i seçin.

Firefox tarayıcısına güvenme hakkında bilgi için bkz. Firefox SEC_ERROR_INADEQUATE_KEY_USAGE hatası.

Visual Studio:

  • Kestrel sunucusunu başlatan uygulamayı çalıştırır.
  • uygulama kullanıcı arabirimini görüntüleyen https://localhost:5001 varsayılan tarayıcıyı 'de başlatıyor.

Proje dosyalarını inceleme

Aşağıdaki bölümlerde, sonraki öğreticilerde üzerinde çalışacak ana proje klasörlerine ve dosyalarına genel bir bakış yer almaktadır.

Sayfalar klasörü

Sayfaları Razor ve destek dosyalarını içerir. Her Razor sayfa bir dosya çiftidir:

  • Söz dizimi kullanan C# koduyla HTML işaretlemesi olan bir .cshtml Razor dosyası.
  • Sayfa olaylarını gerçekleştiren C# koduna sahip bir .cshtml.cs dosyası.

Destekleyen dosyaların adları alt çizgiyle başlar. Örneğin, _Layout.cshtml dosyası tüm sayfalarda ortak olan kullanıcı arabirimi öğelerini yapılandırır. Bu dosya, sayfanın üst kısmında gezinti menüsünü ve sayfanın en altındaki telif hakkı bildirimini ayarlar. Daha fazla bilgi için bkz. ASP.NET Core'de düzen.

wwwroot klasörü

HTML dosyaları, JavaScript dosyaları ve CSS dosyaları gibi statik varlıkları içerir. Daha fazla bilgi için bkz. ASP.NET Core'daki statik dosyalar.

appsettings.json

Bağlantı dizeleri gibi yapılandırma verilerini içerir. Daha fazla bilgi için bkz. ASP.NET Core'de yapılandırma.

Program.cs

Aşağıdaki kodu içerir:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
}
else
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production
    // scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

Bu dosyada aşağıdaki kod satırları önceden yapılandırılmış varsayılanlarla bir oluşturun, Bağımlılık Ekleme WebApplicationBuilder Razor (DI)kapsayıcısı için Sayfalar desteği ekleyin ve uygulamayı oluşturun:

using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;
using RazorPagesMovie.Data;
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

builder.Services.AddDbContext<RazorPagesMovieContext>(options => 
       options.UseSqlServer(builder.Configuration.GetConnectionString("RazorPagesMovieContext")));

var app = builder.Build();

Aşağıdaki vurgulanmış kod, uygulama geliştirme modunda çalıştırıldıklarında geliştirici özel durum sayfasını sağlar:

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
}
else
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production
    // scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

Geliştirici özel durum sayfası, özel durumlar hakkında yararlı bilgiler sağlar. Geliştirici özel durum sayfası hassas bilgileri sızdırana kadar üretim uygulamaları geliştirme modunda çalıştırılamaz.

Aşağıdaki vurgulanmış kod, özel durum uç noktasını olarak ayarlar ve uygulama geliştirme modunda çalışmazken HTTP Katı Aktarım Güvenlik /Error Protokolü'ne (HSTS) olanak sağlar:

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
}
else
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production
    // scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

Örneğin, önceki kod uygulama üretim veya test modundayken çalışır. Daha fazla bilgi için bkz. Birden çok ortam kullanma ASP.NET Core.

Aşağıdaki kod çeşitli Ara Yazılımları sağlar:

  • app.UseHttpsRedirection(); : HTTP isteklerini HTTPS'ye yeniden yönlendirer.
  • app.UseStaticFiles(); : HTML, CSS, görüntüler ve JavaScript gibi statik dosyaların servise alınarak kullanılabilir. Daha fazla bilgi için bkz. ASP.NET Core'daki statik dosyalar.
  • app.UseRouting(); : Ara yazılım işlem hattına yol eşleştirme ekler. Daha fazla bilgi için bkz. ASP.NET Core'de yönlendirme.
  • app.MapRazorPages();: Sayfalar için uç nokta yönlendirmeyi Razor yapılandırıyor.
  • app.UseAuthorization(); : Bir kullanıcıya güvenli kaynaklara erişme yetkisi sağlar. Bu uygulama yetkilendirme kullanmaz, bu nedenle bu satır kaldırılabilir.
  • app.Run(); : Uygulamayı çalıştırır.

Tamamlanan örnekle ilgili sorunları giderme

Çözümleye olmadığınız bir sorunla karşılaştırıldığında kodunuzu tamamlanan projeyle karşılaştırın. Tamamlanan projeyi görüntüleme veya indirme (indirme).

Sonraki adımlar

Sonraki: Model ekleme