Część 1. Plik —> nowy projekt
Autor : Joe Stagner
Tailspin Spyworks pokazuje, jak niezwykle proste jest tworzenie zaawansowanych, skalowalnych aplikacji dla platformy .NET. Pokazuje, jak używać wspaniałych nowych funkcji w ASP.NET 4 do tworzenia sklepu internetowego, w tym zakupów, wyewidencjonowania i administracji.
W tej serii samouczków szczegółowo opisano wszystkie kroki wykonywane w celu utworzenia przykładowej aplikacji Tailspin Spyworks. Część 1 obejmuje omówienie i plik/nowy projekt.
Omówienie
Ten samouczek stanowi wprowadzenie do ASP.NET WebForms. Zaczniemy powoli, więc środowisko tworzenia aplikacji internetowych na poziomie początkującym jest w porządku.
Aplikacja, która zostanie zbudowana, jest prostym magazynem online.
Odwiedzający mogą przeglądać produkty według kategorii:
Mogą wyświetlać pojedynczy produkt i dodawać go do koszyka:
Mogą przejrzeć koszyk, usuwając wszystkie elementy, których już nie chcą:
Przejście do wyewidencjonowania spowoduje wyświetlenie monitu
Po zamówieniu widzą prosty ekran potwierdzenia:
Zaczniemy od utworzenia nowego projektu ASP.NET WebForms w programie Visual Studio 2010 i dodamy stopniowo funkcje, aby utworzyć pełną działającą aplikację. W ten sposób omówimy dostęp do bazy danych, wyświetlanie listy i widoków siatki, strony aktualizacji danych, walidację danych, używanie stron wzorcowych do spójnego układu strony, AJAX, walidacji, członkostwa użytkowników i nie tylko.
Możesz użyć programu Visual Studio 2010 lub bezpłatnego programu Visual Web Developer 2010 z witryny https://www.microsoft.com/express/Web/. Aby skompilować aplikację, możesz użyć SQL Server lub bezpłatnej SQL Server Express do hostowania bazy danych.
Plik/nowy projekt
Zaczniemy od wybrania pozycji Nowy projekt z menu Plik w programie Visual Studio. Spowoduje to wyświetlenie okna dialogowego Nowy projekt.
Wybierzemy grupę Visual C# /Web Templates po lewej stronie, a następnie wybierzemy szablon "ASP.NET Aplikacja internetowa" w kolumnie środkowej. Nadaj projektowi nazwę TailspinSpyworks i naciśnij przycisk OK.
Spowoduje to utworzenie naszego projektu. Przyjrzyjmy się folderom zawartym w naszej aplikacji w Eksplorator rozwiązań po prawej stronie.
Puste rozwiązanie nie jest całkowicie puste — dodaje podstawową strukturę folderów:
Zwróć uwagę na konwencje implementowane przez domyślny szablon projektu ASP.NET 4.
- Folder "Account" implementuje podstawowy interfejs użytkownika dla platformy ASP. Podsystem członkostwa platformy NET.
- Folder "Scripts" służy jako repozytorium dla plików JavaScript po stronie klienta, a podstawowe pliki jQuery .js są domyślnie dostępne.
- Folder "Styles" służy do organizowania wizualizacji witryn sieci Web (arkusze stylów CSS)
Gdy naciskamy klawisz F5, aby uruchomić aplikację i renderujemy stronę default.aspx, zobaczymy następujące informacje.
Naszym pierwszym ulepszeniem aplikacji będzie zastąpienie pliku Style.css domyślnym szablonem WebForms klasami CSS i skojarzonymi plikami obrazów, które będą renderować astetyka wizualizacji, której potrzebujemy dla naszej aplikacji Tailspin Spyworks.
Po wykonaniu tej czynności strona default.aspx będzie renderowana w następujący sposób.
Zwróć uwagę na linki do obrazów w prawym górnym rogu strony i elementy menu, które zostały dodane do strony wzorcowej. Tylko linki "Zaloguj się" i "Konto" wskazują strony, które istnieją (generowane przez domyślny szablon), a pozostałe strony będziemy implementować podczas kompilowania aplikacji.
Przeniesiemy również stronę wzorcową do katalogu Styles. Chociaż jest to tylko preferencja, może to trochę ułatwić, jeśli zdecydujemy się, aby nasza aplikacja "skinable" w przyszłości.
Po wykonaniu tej czynności należy zmienić odwołania do strony wzorcowej we wszystkich plikach aspx wygenerowanych domyślnie ASP.NET stron WebForms.