ASP.NET Core web kullanıcı arabirimi seçin

  • Makale
  • Okumak için 3 dakika

ASP.NET Core, tüm kullanıcı arabirimi çerçevesidir. Uygulamanın Web Kullanıcı arabirimi ihtiyaçlarına uygun olarak birleştirilecek işlevleri seçin.

Sunucu ve istemci tarafından işlenmiş Kullanıcı arabiriminin avantajları ve maliyetleri

ASP.NET Core ile Modern Web Kullanıcı arabirimi oluşturmaya yönelik üç genel yaklaşım vardır:

  • Sunucudan Kullanıcı arabirimini işleyen uygulamalar.
  • Tarayıcıda istemci üzerinde kullanıcı arabirimini işleyen uygulamalar.
  • Hem sunucu hem de istemci kullanıcı arabirimi işleme yaklaşımlarından faydalanan karma uygulamalar. Örneğin, Web Kullanıcı arabiriminin büyük bir çoğunluğu sunucuda işlenir ve istemci tarafından işlenmiş bileşenler gerektiğinde eklenir.

Sunucuda veya istemcide Kullanıcı arabirimini işlerken dikkate alınması gereken avantajlar ve dezavantajlar vardır.

Sunucu tarafından işlenen Kullanıcı arabirimi

Sunucu üzerinde işleyen bir Web Kullanıcı arabirimi uygulaması, sayfanın HTML ve CSS 'sini bir tarayıcı isteğine yanıt olarak sunucu üzerinde dinamik olarak oluşturur. Sayfa, istemciye başlamaya hazırlanıyor.

Avantajlar:

  • Sunucu Logic ve sayfa oluşturma işini yaptığından, istemci gereksinimleri en düşük düzeydedir:
    • Düşük kaliteli cihazlar ve düşük bant genişliğine sahip bağlantılar için harika.
    • İstemcide çok çeşitli tarayıcı sürümleri sağlar.
    • Hızlı Başlangıç sayfası yükleme süreleri.
    • İstemciye çekilecek en düşük JavaScript yok.
  • Korumalı sunucu kaynaklarına erişim esnekliği:
    • Veritabanı erişimi.
    • Azure depolama 'ya yönelik API çağrılarına yönelik değerler gibi gizli anahtarlara erişim.
  • Arama motoru iyileştirmesi gibi statik site Analizi avantajları.

Yaygın sunucu işlenmiş Web UI uygulama senaryolarına örnekler:

  • Kişiselleştirilmiş sayfalar, veriler ve formlar gibi dinamik siteler.
  • İşlem listeleri gibi salt okunurdur verileri görüntüleyin.
  • Statik blog sayfalarını görüntüleyin.
  • Herkese açık bir içerik yönetim sistemi.

Bulunmaktadır

  • İşlem ve bellek kullanımı maliyeti, her istemci yerine sunucusunda yoğunlaştılabilir.
  • Kullanıcı etkileşimleri, UI güncelleştirmelerini oluşturmak için sunucuya gidiş dönüş gerektirir.

İstemci tarafından işlenmiş Kullanıcı arabirimi

İstemci tarafından işlenen bir uygulama, istemci üzerinde dinamik olarak Web Kullanıcı arabirimini işler ve tarayıcı DOM 'ı gereken şekilde doğrudan güncelleştiriyor.

Avantajlar:

  • Sunucuya gidiş dönüş gerektirmeden neredeyse anında olan zengin etkileşim sağlar. UI olay işleme ve Logic, kullanıcının cihazında en az gecikmeyle yerel olarak çalışır.
  • , Kullanıcının form göndermek için bir düğme seçmesini gerektirmeden, kısmen tamamlanmış formları veya belgeleri kaydederek Artımlı güncelleştirmeleri destekler.
  • , Bağlantısı kesik modda çalışacak şekilde tasarlanabilir. İstemci tarafı modeli güncelleştirmeleri, bir bağlantı yeniden kurulduktan sonra sonunda sunucuya geri eşitlenir.
  • Daha az sunucu yükü ve maliyeti, iş istemciye boşaltılır. İstemci tarafından işlenmiş birçok uygulama da statik Web siteleri olarak barındırılabilir.
  • Kullanıcının cihazının yetilerinden yararlanır.

İstemci işlenmiş Web Kullanıcı arabirimi örnekleri:

  • Etkileşimli bir Pano.
  • Sürükle ve bırak işlevlerini sağlayan bir uygulama
  • Yanıt veren ve işbirliğine dayalı bir sosyal uygulama.

Bulunmaktadır

  • Mantığın kodu, ilk yükleme zamanına eklenen istemci üzerinde indirilip yürütülmelidir.
  • İstemci gereksinimleri, düşük kaliteli cihazlara, eski tarayıcı sürümlerine veya düşük bant genişliğine sahip olan kullanıcı olan kullanıcıları dışarıda bırakabilir.

sunucu tarafından işlenmiş ASP.NET Core uı çözümü seçin

aşağıdaki bölümde, kullanılabilir ASP.NET Core web uı sunucusu tarafından oluşturulan modeller açıklanmakta ve kullanmaya başlamak için bağlantılar sağlanmaktadır. ASP.NET Core Razor sayfalar ve ASP.NET Core MVC, .net ile web uygulamaları oluşturmaya yönelik sunucu tabanlı çerçevelerdir.

ASP.NET Core Razor Sayfaları

Razor Sayfalar, sayfa tabanlı bir modeldir. UI ve iş mantığı kaygıları ayrı tutulur, ancak sayfa içinde. RazorSayfalar, ASP.NET Core yeni geliştiriciler için yeni sayfa tabanlı veya form tabanlı uygulamalar oluşturmak için önerilen yoldur. Razorsayfalar ASP.NET Core MVC 'den daha kolay bir başlangıç noktası sağlar.

Razor Sunucu işleme avantajlarına ek olarak sayfaların avantajları:

  • Kullanıcı arabirimini hızlıca oluşturun ve güncelleştirin. Sayfa için kod sayfa ile tutulur, Kullanıcı arabirimi ve iş mantığı ile ilgili sorunları ayrı tutmaya çalışır.
  • Testable ve büyük uygulamalara ölçeklendirin.
  • ASP.NET Core sayfalarınızı ASP.NET MVC 'den daha basit bir şekilde organize edin:
    • Belirli mantık ve görünüm modellerini görüntüleme, kendi ad alanı ve dizininde birlikte tutulabilir.
    • İlgili sayfaların grupları kendi ad alanında ve dizininde tutulabilir.

ilk ASP.NET Core Pages uygulamanızı kullanmaya başlamak için Razor , bkz Öğretici: Kullanmaya başlayın Razor Sayfaları ile ASP.NET Core .. ASP.NET Core Razor sayfalarına, mimarisine ve avantajlarına yönelik kapsamlı bir genel bakış için bkz RazorASP.NET Core'de Sayfalara Giriş .:.

ASP.NET Core MVC

ASP.NET MVC, sunucuda kullanıcı arabirimini işler ve bir model-View-Controller (MVC) mimari modeli kullanır. MVC modeli, bir uygulamayı üç ana bileşen grubuna ayırır: modeller, görünümler ve denetleyiciler. Kullanıcı istekleri bir denetleyiciye yönlendirilir. Denetleyici, Kullanıcı eylemleri gerçekleştirmek veya sorguların sonuçlarını almak için modeliyle çalışmaktan sorumludur. Denetleyici, kullanıcıya görüntülenecek görünümü seçer ve gereken model verilerini sağlar. sayfa desteği Razor ASP.NET Core MVC üzerine kurulmuştur.

Sunucu işleme avantajlarına ek olarak MVC avantajları:

  • Büyük web uygulamaları oluşturmaya yönelik ölçeklenebilir ve yetişkinlere yönelik bir modele dayanır.
  • En yüksek esneklik için kaygıları ayırmayı temizleyin.
  • Sorumlulukların model-görünüm-denetleyici ayrımı, iş modelinin alt düzey uygulama ayrıntılarına sıkı bir şekilde yönlendirilmeden de gelişmesini sağlar.

ASP.NET Core MVC 'yi kullanmaya başlamak için bkz Kullanmaya başlayın MVC ile ASP.NET Core .. ASP.NET Core MVC 'nin mimarisine ve avantajlarına genel bakış için bkz ASP.NET Core MVC’ye Genel Bakış ..

istemci tarafından işlenmiş bir ASP.NET Core çözümü seçin

aşağıdaki bölümde, sunulan ASP.NET Core web kullanıcı arabirimi istemci tarafından oluşturulan modeller kısaca açıklanmaktadır ve kullanmaya başlamak için bağlantılar sağlanmıştır.

Blazor

Blazor uygulamalar Razor bileşenlerden oluşur: yeniden kullanılabilir, C#, HTML ve CSS kullanılarak uygulanan Web Kullanıcı arabirimi kesimleri. Hem istemci hem de sunucu kodu, Paylaşılan koda ve kitaplıklara izin vererek C# dilinde yazılır. Razor bileşenler, görünümler ve sayfalardan işlenebilir veya ön işlenmiş olabilir.

Bileşenlerin avantajları Razor :

  • JavaScript yerine C# kullanarak etkileşimli Web U, oluşturun. Ön uç ve arka uç kodunda aynı dili kullanmak şunları sağlar:
    • Uygulama geliştirmeyi hızlandırma.
    • Derleme işlem hattı karmaşıklığını azaltın.
    • Bakımı basitleştirme.
    • .Net kitaplıklarınınmevcut .NET ekosisteminden yararlanın.
    • Geliştiricilerin hem istemci tarafı hem de sunucu tarafı kodunu anlamasını ve bu kodlar üzerinde çalışmasını sağlama.
  • Yeniden kullanılabilir, paylaşılabilir Kullanıcı arabirimi bileşenleri oluşturun.
  • Blazor En iyi bileşen satıcılarındanyeniden kullanılabilir kullanıcı arabirimi bileşenleriyle hızla üretken olun.
  • Mobil tarayıcılar dahil tüm modern web tarayıcıları ile çalışın. Blazor Eklentiler veya kod transpilation olmadan açık Web standartları kullanır.

Daha fazla bilgi için bkz. ASP.NET Core bileşenlerini önceden ASP.NET Core Razor ve tümleştirin.

Blazor barındırma seçenekleri:

Razor bileşenler, Blazor Server ya da Blazor WebAssembly sunucu veya istemci işlemeden yararlanmak için veya kullanarak barındırılmakta olan esnekliğe sahiptir. Daha fazla bilgi için bkz. Blazor barındırma modelleri: sunucu ve WebAssembly.

ASP.NET Core Angular ve React gibi JavaScript çerçeveleri ile tek sayfalı uygulama (SPA)

Angular veya Reactgibi popüler JavaScript çerçeveleri kullanarak ASP.NET Core uygulamalar için istemci tarafı mantığı oluşturun. ASP.NET Core, Angular ve React için proje şablonları sağlar ve diğer JavaScript çerçeveleri ile de kullanılabilir.

daha önce listelenen istemci işleme avantajlarına ek olarak JavaScript çerçeveleri ile ASP.NET Core SPA 'nın avantajları:

  • JavaScript çalışma zamanı ortamı, tarayıcıyla zaten sağlanmış.
  • Büyük topluluk ve yetişkinlere yönelik ekosistem.
  • Angular ve React gibi popüler JS çerçeveleri kullanarak ASP.NET Core uygulamalar için istemci tarafı mantığı oluşturun.

Aşağı kenarlar:

  • Daha fazla kodlama dili, çerçeve ve araç gerekir.
  • Kodu paylaşmak zordur, bu nedenle bazı mantık yinelenebilir.

Başlamak için bkz.:

karma çözüm seçin: ASP.NET Core MVC plusBlazor

MVC ve Blazor ASP.NET Core çerçevesinin bir parçasıdır ve birlikte kullanılmak üzere tasarlanmıştır. Razor bileşenler, Razor barındırılan veya sunucu çözümünde sayfalar ve MVC uygulamalarıyla tümleştirilebilir Blazor WebAssembly . Sayfa veya görünüm işlendiğinde, bileşenler aynı anda önceden alınabilir.

MVC avantajlarına ek olarak MVC Plus avantajları Blazor :

  • Prerendering:
    • Razor, Bileşenleri sunucuda yürütür ve bunları bir sayfa ya da görünüm halinde işler.
      • Etkileşim kurarken uygulamanın algılanan yükleme süresini iyileştirir.
  • Bileşen etiketi Yardımcısıile varolan görünümlere (sayfalar) etkileşim Adaları ekleyin.

ASP.NET Core MVC plus ile çalışmaya başlamak için Blazor bkz ASP.NET Core bileşenlerini önceden ASP.NET Core Razor ve tümleştirin ..

Sonraki adımlar

Daha fazla bilgi için bkz.