Aracılığıyla paylaş


Bölüm 1: Dosya-> Yeni Proje

tarafından Joe Stagner

Tailspin Spyworks, .NET platformu için güçlü, ölçeklenebilir uygulamalar oluşturmanın ne kadar basit olduğunu gösterir. Alışveriş, ödeme ve yönetim gibi çevrimiçi bir mağaza oluşturmak için ASP.NET 4'teki harika yeni özelliklerin nasıl kullanılacağını gösterir.

Bu öğretici serisi, Tailspin Spyworks örnek uygulamasını derlemek için atılan tüm adımların ayrıntılarını içerir. Bölüm 1'de Genel Bakış ve Dosya/Yeni Proje yer alır.

Genel Bakış

Bu öğretici, ASP.NET WebForms'a giriş niteliğindedir. Yavaş başlayacağız, bu nedenle başlangıç düzeyinde web geliştirme deneyimi tamam.

Oluşturacağımız uygulama basit bir yerinde mağazadır.

Basit bir çevrimiçi mağazayı gösteren ekran görüntüsü.

Ziyaretçiler Kategoriye Göre Ürünlere göz atabilir:

Ziyaretçilerin ürünlere kategoriye göre göz atabildiğini gösteren ekran görüntüsü.

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

Ziyaretçilerin tek bir ürünü görüntüleyip sepetlerine ekleyebileceğini gösteren ekran görüntüsü.

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

Ziyaretçilerin sepetlerini gözden geçirebileceklerini ve artık istemedikleri öğeleri kaldırabileceklerini gösteren ekran görüntüsü.

Kullanıma Alma işlemine devam etmek,

Ödeme sırasında oturum açma istemini gösteren ekran görüntüsü.

Ödeme sırasında yeni hesap oluşturma istemini gösteren ekran görüntüsü.

Sipariş sonrasında basit bir onay ekranı görürler:

Onay ekranını gösteren ekran görüntüsü.

Visual Studio 2010'da yeni bir ASP.NET WebForms projesi oluşturarak başlayacağız ve eksiksiz bir işlev uygulaması oluşturmak için artımlı olarak özellikler ekleyeceğiz. Bu arada veritabanı erişimi, liste ve kılavuz görünümleri, veri güncelleştirme sayfaları, veri doğrulama, tutarlı sayfa düzeni için ana sayfaları kullanma, AJAX, doğrulama, kullanıcı üyeliği ve daha fazlasını ele alacağız.

Visual Studio 2010'u veya uygulamasından ücretsiz Visual Web Developer 2010'u https://www.microsoft.com/express/Web/kullanabilirsiniz. Uygulamayı oluşturmak için veritabanını barındırmak için SQL Server veya ücretsiz SQL Server Express kullanabilirsiniz.

Dosya / Yeni Proje

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

Yeni Proje ekranını gösteren ekran görüntüsü.

Soldaki Visual C# / Web Şablonları grubunu ve ardından orta sütundaki "web uygulaması ASP.NET" şablonunu seçeceğiz. Projenize TailspinSpyworks adını verin ve Tamam düğmesine basın.

Projenizi adlandırabileceğiniz yeri gösteren ekran görüntüsü.

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

Proje oluşturduğunuzda görüntülenen klasörleri gösteren ekran görüntüsü.

Boş Çözüm tamamen boş değildir; temel bir klasör yapısı ekler:

Temel klasör yapısını gösteren ekran görüntüsü.

ASP.NET 4 varsayılan proje şablonu tarafından uygulanan kuralları not edin.

  • "Account" klasörü ASP için temel bir kullanıcı arabirimi uygular. NET'in üyelik alt sistemi.
  • "Betikler" klasörü, istemci tarafı JavaScript dosyaları için depo görevi görür ve temel jQuery .js dosyaları varsayılan olarak kullanılabilir hale getirilir.
  • "Stiller" klasörü, web sitesi görsellerimizi (CSS Stil Sayfaları) düzenlemek için kullanılır

Uygulamamızı çalıştırmak ve default.aspx sayfasını işlemek için F5'e bastığımızda aşağıdakini görürüz.

F 5'e bastığınızda uygulamayı gösteren ekran görüntüsü.

İlk uygulama geliştirmemiz varsayılan WebForms şablonundaki Style.css dosyasını, Tailspin Spyworks uygulamamız için istediğimiz görsel astetikleri işleyecek CSS sınıfları ve ilişkili görüntü dosyalarıyla değiştirmek olacak.

Bunu yaptıktan sonra default.aspx sayfamız bu şekilde işlenir.

Varsayılan sayfanın nasıl işlendiğini gösteren ekran görüntüsü.

Sayfanın sağ üst kısmındaki resim bağlantılarına ve ana sayfaya eklenmiş menü öğelerine dikkat edin. Yalnızca "Oturum Aç" ve "Hesap" bağlantıları var olan (varsayılan şablon tarafından oluşturulan) sayfalara ve uygulamamızı oluştururken uygulayacağımız sayfaların geri kalanına işaret eder.

Ayrıca Ana Sayfayı Stiller dizinine de yeniden yer değiştireceğiz. Bu yalnızca bir tercih olsa da, gelecekte uygulamamızı "ciltlenebilir" yapmaya karar verirsek işleri biraz daha kolaylaştırabilir.

Bunu yaptıktan sonra, varsayılan ASP.NET WebForms sayfaları tarafından oluşturulan tüm .aspx dosyalarındaki ana sayfa başvurularını değiştirmemiz gerekir.