Aracılığıyla paylaş

Bölüm 1: Genel Bakış ve Yeni Dosya> Projesi

  • Makale

tarafından Jon Galloway

MVC Müzik Deposu, web geliştirme için ASP.NET MVC ve Visual Studio'yu kullanmayı adım adım tanıtır ve açıklayan bir öğretici uygulamasıdır.

MVC Music Store, müzik albümlerini çevrimiçi olarak satan ve temel site yönetimi, kullanıcı oturum açma ve alışveriş sepeti işlevlerini uygulayan basit bir örnek mağaza uygulamasıdır.

Bu öğretici serisi, ASP.NET MVC Müzik Deposu örnek uygulamasını derlemek için atılan tüm adımların ayrıntılarını içerir. 1. Bölüm, Genel Bakış ve Yeni Dosya> Projelerini kapsar.

Genel Bakış

MVC Müzik Deposu, web geliştirme için MVC ve Visual Web Developer ASP.NET nasıl kullanılacağını adım adım tanıtır ve açıklar. Yavaş başlayacağız, dolayısıyla başlangıç düzeyinde web geliştirme deneyimi sorun değil.

Oluşturacağımız uygulama basit bir müzik mağazasıdır. Uygulamanın üç ana bölümü vardır: alışveriş, ödeme ve yönetim.

A S P nokta Net Music Store genel bakış menüsünün ekran görüntüsü. Bir türü seçme veya en üstteki seçimlerden seçim seçenekleri.

Ziyaretçiler Tarza Göre Albümlere Göz Atabilir:

Belirli bir türdeki albüm koleksiyonunu gösteren A S P nokta Net müzik mağazası tarz albümleri seçim menüsünün ekran görüntüsü.

Tek bir albümü görüntüleyebilir ve sepetlerine ekleyebilirler:

Albüm adını, türünü, sanatçısını ve fiyatını gösteren ve sepete ekleme seçeneği bulunan albüm seçim penceresinin ekran görüntüsü.

Artık istemedikleri ürünleri kaldırarak sepetlerini gözden geçirebilirler:

Toplam fiyat bilgilerini ve sepetinizi düzenleme veya ödeme seçeneklerini içeren

Kullanıma Alma işlemine devam etmek, kullanıcı hesabında oturum açmalarını veya kaydolmalarını ister.

Oturum Aç menü çubuğunun ekran görüntüsü, kullanıcıdan 'beni hatırla' düğmesine tıklama seçeneğine ek olarak bir kullanıcı adı ve parola girmesini isteyin.

Kullanıcı adı, e-posta adresi ve altı veya daha fazla karakter içeren bir parola isteyen Yeni Hesap Oluştur menü çubuğunun ekran görüntüsü. Kaydet düğmesi ekranın en altındadır...

Hesap oluşturduktan sonra gönderim ve ödeme bilgilerini doldurarak siparişi tamamlayabilirler. İşleri basit tutmak için harika bir promosyon çalıştırıyoruz: promosyon kodu "ÜCRETSİz" girerlerse her şey ücretsizdir!

Satın alan kullanıcının sevkiyat ve ödeme bilgileri için giriş seçeneklerini gösteren ve promosyon kodlarını girmek için bir yer tutucu içeren ekran görüntüsü.

Sipariş ettikten sonra basit bir onay ekranı görürler:

Müşteriye siparişi için teşekkür eden ve sipariş numarasını sağlayan onay ekranının ekran görüntüsü.

Müşteriye yönelik sayfalara ek olarak, Yöneticilerin albüm oluşturabileceği, düzenleyebileceği ve silebileceği albümlerin listesini gösteren bir yönetici bölümü de oluşturacağız:

Sahip olunan albümlerin başlığının, sanatçının ve türün listesini gösteren yönetici bölüm menüsünün ekran görüntüsü; her birini düzenleme veya silme seçenekleriyle birlikte.

1. Dosya -> Yeni Proje

Yazılımı yükleme

Bu öğretici, ücretsiz Visual Web Developer 2010 Express (ücretsiz) kullanarak yeni bir ASP.NET MVC 3 projesi oluşturarak başlayacak ve ardından eksiksiz bir işlev uygulaması oluşturmak için artımlı olarak özellikler ekleyeceğiz. Bu arada veritabanı erişimini, form gönderme senaryolarını, veri doğrulamayı, tutarlı sayfa düzeni için ana sayfaları kullanma, sayfa güncelleştirmeleri ve doğrulama için AJAX kullanma, kullanıcı oturum açma ve daha fazlasını ele alacağız.

Adım adım takip edebilir veya tamamlanmış uygulamayı MVC-Music-Store'dan indirebilirsiniz.

Uygulamayı derlemek için Visual Studio 2010 SP1 veya Visual Web Developer 2010 Express SP1 (Visual Studio 2010'un ücretsiz sürümü) kullanabilirsiniz. Veritabanını barındırmak için SQL Server Compact (ayrıca ücretsiz) kullanacağız. Başlamadan önce, aşağıda listelenen önkoşulları yüklediğinizden emin olun.

  • [Visual Studio Web Developer Express SP1 önkoşulları]
  • [ASP.NET MVC 3 Araç Güncelleştirmesi]
  • [SQL Server Compact 4.0] - hem çalışma zamanı hem de araç desteği dahil

Yeni ASP.NET MVC 3 projesi oluşturma

Visual Web Developer'daki Dosya menüsünden "Yeni Proje"yi seçerek başlayacağız. Bu, Yeni Proje iletişim kutusunu açar.

Yeni proje oluşturmaya yönelik seçim ve kısa kesme klavye komutlarını gösteren Visual Web Developer dosya menüsünün ekran görüntüsü.

Sol taraftaki Visual C# -> Web Şablonları grubunu ve ardından orta sütundaki "MVC 3 Web Uygulaması ASP.NET" şablonunu seçeceğiz. Projenize MvcMusicStore adını verin ve Tamam düğmesine basın.

Farklı uygulama seçeneği şablonları sağlayan Yeni Proje İletişim Kutusu penceresinin ekran görüntüsü.

Bu, projemiz için bazı MVC'ye özgü ayarlar yapmamıza olanak tanıyan ikincil bir iletişim kutusu görüntüler. Aşağıdakileri seçin:

Proje Şablonu - Boş'a tıklayın

Görünüm Altyapısı - Razor'ı seçin

HTML5 semantik işaretleme kullan - işaretli

Ayarlarınızın aşağıda gösterildiği gibi olduğunu doğrulayın ve Tamam düğmesine basın.

Kullanıcının projesi için farklı ayarlar seçmesine olanak sağlayan ikincil iletişim kutusunun ekran görüntüsü.

Bu, projemizi oluşturur. Şimdi sağ taraftaki Çözüm Gezgini uygulamamıza eklenen klasörlere göz atalım.

Projeye oluşturulduktan sonra uygulamaya eklenen klasörlerin listesini gösteren Çözüm Gezgini penceresinin ekran görüntüsü.

Boş MVC 3 şablonu tamamen boş değildir; temel bir klasör yapısı ekler:

Yukarıda bahsedilen klasör listesinin, oluşturulan projenin adını vurgulayan yakınlaştırılmış ekran görüntüsü görünümü.

ASP.NET MVC, klasör adları için bazı temel adlandırma kurallarını kullanır:

Klasör Amaç
/Denetleyici Denetleyiciler tarayıcıdan gelen girişlere yanıt verir, bununla ne yapacağına karar verir ve kullanıcıya yanıt döndürür.
/Görünümler Görünümler kullanıcı arabirimi şablonlarımızı barındır
/Model Modeller verileri tutar ve işler
/Içerik Bu klasör görüntülerimizi, CSS'mizi ve diğer statik içeriği barındırır
/Komut dosyaları Bu klasör JavaScript dosyalarımızı barındırıyor

ASP.NET MVC çerçevesi varsayılan olarak bir "yapılandırma üzerinde kural" yaklaşımı kullandığından ve klasör adlandırma kurallarına göre bazı varsayılan varsayımlar yaptığından, bu klasörler Boş ASP.NET MVC uygulamasına dahil edilir. Örneğin denetleyiciler, bunu kodunuzda açıkça belirtmenize gerek kalmadan görünümler klasöründe varsayılan olarak görünümleri arar. Varsayılan kurallarla devam etmek, yazmanız gereken kod miktarını azaltır ve diğer geliştiricilerin projenizi anlamasını da kolaylaştırabilir. Uygulamamızı oluştururken bu kuralları daha fazla açıklayacağız.

Sonraki