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 podjęte w celu utworzenia przykładowej aplikacji Tailspin Spyworks. Część 1 obejmuje przegląd oraz Plik → Nowy projekt.

Przegląd

Ten samouczek stanowi wprowadzenie do ASP.NET WebForms. Zaczniemy powoli, więc doświadczenie w tworzeniu stron internetowych na poziomie początkującym jest wystarczające.

Aplikacja, która zostanie zbudowana, to prosty sklep online.

Zrzut ekranu przedstawiający prosty sklep online.

Odwiedzający mogą przeglądać produkty według kategorii:

Zrzut ekranu pokazujący, że odwiedzający mogą przeglądać produkty według kategorii.

Mogą wyświetlić pojedynczy produkt i dodać go do koszyka:

Zrzut ekranu pokazujący, że odwiedzający mogą wyświetlić pojedynczy produkt i dodać go do koszyka.

Mogą przejrzeć koszyk, usuwając wszystkie elementy, których już nie chcą:

Zrzut ekranu pokazujący, że odwiedzający mogą przeglądać koszyk i usuwać elementy, których już nie chcą.

Przejście do kasy spowoduje, że użytkownik zobaczy powiadomienie

Zrzut ekranu przedstawiający monit o zalogowanie się podczas finalizacji zakupu.

Zrzut ekranu przedstawiający zapytanie o utworzenie nowego konta podczas finalizacji zakupu.

Po zamówieniu widzą prosty ekran potwierdzenia:

Zrzut ekranu przedstawiający ekran potwierdzenia.

Zaczniemy od utworzenia nowego projektu ASP.NET WebForms w programie Visual Studio 2010 i dodamy przyrostowe funkcje, aby utworzyć pełną działającą aplikację. Po drodze omówimy dostęp do bazy danych, wyświetlanie list 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ć programu SQL Server lub bezpłatnego programu 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.

Zrzut ekranu przedstawiający ekran Nowego projektu.

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.

Zrzut ekranu pokazujący, gdzie nazwać projekt.

Spowoduje to utworzenie naszego projektu. Przyjrzyjmy się folderom dołączonym do naszej aplikacji w Eksploratorze rozwiązań po prawej stronie.

Zrzut ekranu przedstawiający foldery wyświetlane podczas tworzenia projektu.

Puste rozwiązanie nie jest całkowicie puste — dodaje podstawową strukturę folderów:

Zrzut ekranu przedstawiający podstawową strukturę folderów.

Zwróć uwagę na konwencje implementowane przez domyślny szablon projektu ASP.NET 4.

  • Folder "Account" udostępnia podstawowy interfejs użytkownika dla podsystemu członkostwa ASP.NET.
  • Folder "Scripts" służy jako repozytorium dla plików JavaScript po stronie klienta, a podstawowe pliki .js jQuery są domyślnie udostępniane.
  • Folder "Styles" służy do organizowania wizualizacji witryn sieci Web (arkusze stylów CSS)

Po naciśnięciu klawisza F5 w celu uruchomienia aplikacji i renderowaniu strony default.aspx zobaczymy następujące informacje.

Zrzut ekranu przedstawiający aplikację po naciśnięciu klawisza F 5.

Naszym pierwszym ulepszeniem aplikacji będzie zastąpienie pliku Style.css z domyślnego szablonu WebForms klasami CSS i powiązanymi plikami obrazów, które nadadzą wizualną estetykę, jaką chcemy uzyskać w naszej aplikacji Tailspin Spyworks.

Po wykonaniu tej czynności strona default.aspx jest renderowana w następujący sposób.

Zrzut ekranu przedstawiający sposób renderowania strony domyślnej.

Zwróć uwagę na linki do obrazów w prawym górnym rogu strony i elementy menu, które zostały dodane do strony głównej. Tylko linki "Zaloguj się" i "Konto" wskazują strony, które istnieją (wygenerowane przez domyślny szablon) i pozostałe strony, które będziemy implementować podczas tworzenia aplikacji.

Przeniesiemy również stronę wzorcową do katalogu Styles. Chociaż jest to tylko preferencja, może to trochę ułatwić, jeśli zdecydujemy się na to, aby nasza aplikacja była skórowalna w przyszłości.

Po wykonaniu tej czynności należy zmienić odwołania do strony wzorcowej we wszystkich plikach .aspx wygenerowanych domyślnie na stronach ASP.NET WebForms.

Dalej

  • Last updated on