Blog Dla Młodszych Programistów C#/.NET

W ostatnich tygodniach pokazywałem Ci jak pisać aplikację konsolowe i desktopowe. Jednak obecnie najczęściej pisze się właśnie aplikacje webowe, które chciałem Ci przybliżyć w tym artykule. Napiszemy kompletną aplikację webową w ASP.NET Core, stosując wzorzec MVC. Będzie to podobnie jak wcześniej prosty kalkulator, ale tym razem napisany właśnie jako aplikacja webowa. Również implementację podzielimy na dwa etapy. W pierwszym z nich napiszemy widok, czyli interfejs użytkownika, a w kolejnej całą logikę. Widok stworzymy w Razor'ze, a jest to po prostu połączenie HTML z C#. Aby aplikacja ładnie wyglądała i była responsywna, użyjemy również Bootstrap'a.

Pierwsza Aplikacja Webowa ASP.NET Core w C# – UI w Razor (1/2)


Tworzenie nowego projektu


Jeżeli ostatnio programowałeś razem ze mną, to przejdź proszę do solucji, którą wtedy stworzyliśmy (jeżeli jej nie masz, to stwórz nową solucję w visual studio). Od razu na początek dodajmy sobie nowy projekt do tej solucji, tym razem będzie to projekt ASP.NET Core.

Pierwsza Aplikacja Webowa ASP.NET Core w C# UI  – Nowy Projekt

Także wybieramy tutaj ASP.NET Core Web App (Model-View-Controller). Kliknij przycisk Next, wybierz odpowiednią nazwę. Zgodnie z naszą wcześniej ustaloną konwencją będzie to: Calculator.AspNetCoreApp.

Pierwsza Aplikacja Webowa ASP.NET Core w C# UI  – Nazwa Projektu

Kliknij Next. Następnie wybierz framework, najlepiej wybrać obecnie najnowszą wersję, czyli .NET 5.0. Autoryzacji, na razie nie potrzebujemy.

Pierwsza Aplikacja Webowa ASP.NET Core w C# UI  – Wybranie Frameworka

Kliknij Create, po czym zostanie dodany nowy projekt do naszej solucji.


Uruchomienie projektu


Na początek ustawmy ten projekt, jako nasz projekt startowy i możemy spróbować go uruchomić w przeglądarce (polecam Chrome).

Pierwsza Aplikacja Webowa ASP.NET Core w C# UI  – Projekt Startowy

Uruchom poprzez: CTRL+F5.

Pierwsza Aplikacja Webowa ASP.NET Core w C# UI  – Widok Startowy Aplikacji

Tak wygląda w tym momencie nasza aplikacja. Nie dodaliśmy żadnej linijki kodu, a tutaj już mamy jakiś szablon gotowy. Także, myślę że nasz kalkulator po prostu będzie na tym oknie głównym, także zaraz sobie go zmodyfikujemy.


Implementacja widoku głównego


Przejdź proszę w Visual Studio do okna Solution Explorer, a następnie do folderów Views → Home → Index.

Pierwsza Aplikacja Webowa ASP.NET Core w C# UI  – Index w Solution Explorer

Tak wygląda kod tego pliku:

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

To jest właśnie nasze okno główne. Będziemy ten kod zmieniać, także możemy usunąć obecny kod. Ustawimy sobie tylko tytuł kalkulator.

@{
    ViewData["Title"] = "Kalkulator";
}

Dodatkowo możemy jeszcze w layoucie też wpisać, że to jest kalkulator, tak żeby tam nie było jakichś wyświetlanych dziwnych nazw.

Pierwsza Aplikacja Webowa ASP.NET Core w C# UI  – Layout w Solution Explorer

<title>@ViewData["Title"] – Kalkulator</title>

Tak samo w layoucie poprawmy oznaczeniu linka do naszej strony głównej:

<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Kalkulator</a>

Także, jeżeli to teraz przebuduję (CTRL+SHIFT+B) i przejdę z powrotem do przeglądarki. Odświeżę (SHIFT+F5), to w tym momencie tak wygląda nasza aplikacja.

Pierwsza Aplikacja Webowa ASP.NET Core w C# UI  – Widok Pusty Aplikacji

Będziemy tutaj chcieli na środku wyświetlić w przeglądarce kalkulator. Także przejdźmy ponownie do widoku Index.cshtml. Tutaj w Razor'ze za pomocą HTML'a, CSS'a i przede wszystkim też Bootstrap'a stworzymy nowy widok. Dodajmy sobie najpierw div'a, w którym będzie cały ten nasz kalkulator. Skorzystamy tutaj z Bootstrap'owej klasy card. Dodamy sobie też margines z góry, żeby to lepiej troszkę wyglądało.

@{
    ViewData["Title"] = "Kalkulator";
}

<div class="card mt-5">

</div>

Na początek wyświetlimy TextBox'a i skorzystamy z helpera Html.TextBox.

<div class="card mt-5">

    @Html.TextBox("ScreenInput", null, new { @class = "calculator-screen", disabled = "disabled" })

</div>

Jako parametry przekażemy nazwę, czyli ScreenInput, a także nową klasę calculator-screen, którą chcemy przypisać do tego TextBox'a. Także tę klasę sobie za chwilę utworzymy w CSS. Ustawmy też właściwość disabled, tak żeby był on tylko read-only. Tak może wyglądać ten TextBox. Za chwilę w CSS'ie będziemy ustawiać style dla klasy, którą tutaj użyliśmy. Może przejść sobie od razu do głównego pliku CSS site.css.

Pierwsza Aplikacja Webowa ASP.NET Core w C# UI  – Site.css Solution Explorer

Na dole dodajmy sobie już naszą klasę i za chwilę uzupełnimy w tym miejscu style.

.calculator-screen {

}

Zobaczmy jak w tym momencie, wygląda nasza aplikacji. Uruchom aplikację i przejdź do przeglądarki. Odśwież i zauważ, że na ekranie pojawił się input.

Pierwsza Aplikacja Webowa ASP.NET Core w C# UI  – Widok Input

Wróćmy do widoku Index. Możemy też tutaj wpisać jakieś testowe dane do TextBox'a (inputa), które nam później pomogą przy wprowadzaniu styli. Będziemy od razu mogli zweryfikować czy te liczby wyświetlają się prawidłowo.

<div class="card mt-5">

    @Html.TextBox("ScreenInput", "31321312312314", new { @class = "calculator-screen", disabled = "disabled" })

</div>

Co dalej? Oczywiście potrzebujemy przyciski, także dodamy sobie poniżej TextBox'a kolejnego diva'a. A wewnątrz będziemy dodawać przyciski.

<div class="card mt-5">

    @Html.TextBox("ScreenInput", "31321312312314", new { @class = "calculator-screen", disabled = "disabled" })

    <div>

    </div>

</div>

Także potrzebujemy znowu tak jak poprzednio 17 przycisków. Na górze będzie cyfra 7.

<button type="button">7</button>

Tak, żeby to od razu ładnie wyglądało dodajmy kilka klas Bootstrap'owych. Czyli btn i bg-success.

<button type="button" class="btn bg-success">7</button>

Zobaczymy jak ten przycisk wygląda.

Pierwsza Aplikacja Webowa ASP.NET Core w C# UI  – Widok Pierwszy Przycisk

Super, o takie przyciski nam chodziło, później jeszcze dopasujemy tylko rozmiar i będzie to bardzo dobrze wyglądało. Także dodajmy najpierw wszystkie przyciski, a następnie uzupełnimy style. Także potrzebujemy 17 takich przycisków.

@{
    ViewData["Title"] = "Kalkulator";
}

<div class="card mt-5">

    @Html.TextBox("ScreenInput", "31321312312314", new { @class = "calculator-screen", disabled = "disabled" })

    <div>

        <button type="button" class="btn bg-success">7</button>
        
        <button type="button" class="btn bg-success">8</button>            
        
        <button type="button" class="btn bg-success">9</button>

        <button type="button" class="btn bg-success">/</button>

        <button type="button" class="btn bg-success">+</button>



        <button type="button" class="btn bg-success">4</button>

        <button type="button" class="btn bg-success">5</button>

        <button type="button" class="btn bg-success">6</button>

        <button type="button" class="btn bg-success">-</button>



        <button type="button" class="btn bg-success">1</button>

        <button type="button" class="btn bg-success">2</button>

        <button type="button" class="btn bg-success">3</button>

        <button type="button" class="btn bg-success">*</button>

        <button type="button" class="btn bg-success">=</button>



        <button type="button" class="btn bg-success">0</button>

        <button type="button" class="btn bg-success">,</button>

        <button type="button" class="btn bg-success">C</button>

    </div>

</div>

Podobnie jak to robiliśmy w poprzedniej aplikacji, najpierw w pierwszym wierszu mamy: "7", "8", "9", "/" i "+". W drugim "4", "5", "6" i "-". W trzecim "1", "2", "3", "*" i "=" oraz w ostatnim "0", "," i "C". Żeby to było lepiej widoczne, to jeszcze dodałem odpowiednie formatowanie. Dobrze byłoby jeszcze dopasować przyciski kolorystycznie. To znaczy, nasze liczby będą koloru zielonego, ale operacje możemy już zrobić innego koloru. Mogą być takie może lekko szarawe, także tam, gdzie mam operację, to zamiast klasy bg-success użyjemy klasy bg-secondary dla wszystkich operacji. Tak samo zmienimy kolor dla przycisku clear, może to być przycisk czerwony, użyjemy klasy bg-danger. Tak samo, jak wcześniejsze, jest również klasa Bootstap'owa. Na koniec dla wyniku może możemy ustawić kolor niebieski, czyli klasę bg-primary.

<div class="card mt-5">

    @Html.TextBox("ScreenInput", "31321312312314", new { @class = "calculator-screen", disabled = "disabled" })

    <div>

        <button type="button" class="btn bg-success">7</button>
        
        <button type="button" class="btn bg-success">8</button>            
        
        <button type="button" class="btn bg-success">9</button>

        <button type="button" class="btn bg-secondary">/</button>

        <button type="button" class="btn bg-secondary">+</button>



        <button type="button" class="btn bg-success">4</button>

        <button type="button" class="btn bg-success">5</button>

        <button type="button" class="btn bg-success">6</button>

        <button type="button" class="btn bg-secondary">-</button>



        <button type="button" class="btn bg-success">1</button>

        <button type="button" class="btn bg-success">2</button>

        <button type="button" class="btn bg-success">3</button>

        <button type="button" class="btn bg-secondary">*</button>

        <button type="button" class="btn bg-primary">=</button>



        <button type="button" class="btn bg-success">0</button>

        <button type="button" class="btn bg-success">,</button>

        <button type="button" class="btn bg-danger">C</button>

    </div>

</div>

Także zobaczymy jak te nasze przyciski teraz wyglądają po uruchomieniu aplikacji.

Pierwsza Aplikacja Webowa ASP.NET Core w C# UI  – Widok Przyciski z Kolorami

Ok, czyli mamy tutaj liczby koloru zielonego. Operację są szare, przycisk clear jest czerwony i znak równości jest niebieski. Wygląda na to, że mamy wszystkie przyciski, które potrzebujemy. Kolejnym krokiem będzie odpowiednie ustawienie tych przycisków, aby faktycznie wyglądało to, jak kalkulator. Przede wszystkim potrzebujemy ustawić klasę dla tego div'a ,w którym mamy wszystkie przyciski.

<div class="calculator-btns">

Skopiujmy ją do site.css.

.calculator-btns {

}

Spróbujmy dostosować te style. Zacznijmy od TextBoxa. Ustawimy mu kilka właściwości.

.calculator-screen {
    height: 100px;
    text-align: right;
    padding: 0 20px 0 20px;
    margin: 20px 20px 0 20px;
    font-size: 5rem;
    color: #000;
    border: 2px solid black;
}

Wysokość ustawiłem na 100 pikseli. Tekst będzie wyrównany do prawej strony, tak jak to często jest w kalkulatorach. Ustawiłem też padding, tak żeby sam tekstt był trochę dalej od krawędzi. Będzie to 0, 20 pikseli, 0 i 20 pikseli. Czyli padding z prawej i z lewej 20 pikseli, z góry i z dołu będzie 0. Ustawiłem również margin, tylko tym razem z góry 20 pikseli, tak samo z lewej oraz z prawej strony, a z dołu będzie 0. Fontsize na 5 rem, tak żeby tekstt był dobrze widoczny na każdym ekranie. Kolor czcionki czarny i obramowanie 2 piksele solid i również czarnego koloru. Zobaczmy, jak ten TextBox teraz wygląda. Uruchom aplikację SHIFT+F5.

Pierwsza Aplikacja Webowa ASP.NET Core w C# UI  – Widok Style TextBox

TextBox wygląda już całkiem dobrze. Teraz tylko jeszcze dopasujmy przyciski. Wróć do pliku ze stylami site.css i dodamy również odpowiednie właściwości dla wszystkich przycisków:

button {
    height: 70px;
    font-size: 2rem !important;
    color: #fff !important;
}

Czyli ustawiłem dla każdego przycisku odpowiednią wysokość, rozmiar i kolor czcionki. Wysokość to będzie 70 pikseli, rozmiar czcionki 2 rem i kolor czcionki biały. Przy okazji użyłem tutaj słowa important, tak aby nadpisać te style Bootstrap'owe. Zobaczmy, jak teraz to wygląda.

Pierwsza Aplikacja Webowa ASP.NET Core w C# UI  – Widok Style Dla Przycisków

Jest już lepiej, ale to jeszcze nie jest efekt, którego oczekujemy. Za chwilę jeszcze dopasujemy szerokość dla wszystkich przycisków. Wróćmy do pliku ze stylami. Potrzebujemy właśnie w głównym div'ie, czyli w klasie calculator-btns ustawić kilka właściwości.

.calculator-btns {
    display: grid;
    grid-gap: 20px;
    padding: 20px;
}

Przede wszystkim potrzebujemy wyświetlić te przyciski jako siatka, czyli dla właściwości display ustawiamy grid. Ustawimy sobie również grid-gap żeby zrobić przerwy między przyciskami na 20 pikseli i padding również na 20 pikseli i teraz to już powinno całkiem dobrze wyglądać. Zobaczmy.

Pierwsza Aplikacja Webowa ASP.NET Core w C# UI  – Widok Przyciski Ustawiania Styli Siatka

Tak wygląda teraz ten kalkulator, nie jest to jeszcze dalej widok, którego oczekujemy, także musimy dodać jeszcze kilka zmian, żeby to wyglądało faktycznie jak siatka. Po pierwsze dodajmy dla przycisku dodawania odpowiednią klasę. Niech to będzie klasa add-button.

<button type="button" class="btn bg-secondary add-button">+</button>

Następnie dodajmy kilka właściwości dla tej klasy w pliku site.css

.add-button {
    height: 100%;
    grid-area: 1 / 5 / 3 / 5;
}

Chcemy, żeby ten przycisk zajmował dwa miejsca w tej siatce. Możemy to zrobić dzięki właściwości grid-area. To znaczy, chcemy żeby był w 1 wierszu i w kolumnie 5, dzięki czemu ta siatka już będzie lepiej ustawiona i chcemy także, żeby kończył się w 3 wierszu i w 5 kolumnie. Czyli przypisujemy do tej właściwości 1 / 5 / 3 / 5. Ponadto ustawmy wysokość tego przycisku na 100%. Przebudujmy projekt i przejdźmy jeszcze raz do przeglądarki. Teraz już powinno to dużo lepiej wyglądać.

Pierwsza Aplikacja Webowa ASP.NET Core w C# UI  – Widok Style Dla Przycisku Plus

Jak widzisz, teraz już ten plus wygląda całkiem dobrze. Przy okazji pozostałe przyciski dopasowały się do komórek w naszej siatce. Podobny zabieg musimy zrobić dla znaku równości i dla zera. Także dodajmy do tych przycisków znowu odpowiednie klasy i za chwile ustawimy dla nich odpowiednie właściwości w pliku css.

<button type="button" class="btn bg-primary result-button">=</button>

<button type="button" class="btn bg-success zero-button">0</button>

Następnie dodajmy takie klasy w pliku site.css

.result-button {
    height: 100%;
    grid-area: 3 / 5 / 5 / 5;
}

.zero-button {
    grid-area: 4 / 1 / 4 / 3;
}

Czyli przycisk wyświetlający wynik będzie w wierszu 3, kolumnie 5, rozciągniemy go do wiersza 5 i kolumny 5. Dzięki temu będzie wyświetlany na 2 wiersze i 1 kolumnie. Zostanie ładnie dopasowany do pustej komórki. Również tutaj ustawiamy wysokość na 100%. Natomiast dla zera, to będzie wiersz 4 kolumna 1, wierszu nie rozciągamy, zostaje 4, ale kolumnę poszerzamy tym razem do kolumny 3, Dzięki temu będzie przycisk 0 na 2 kolumny. Przebudujmy ten projekt i przejdźmy do przeglądarki do naszej aplikacji.

Pierwsza Aplikacja Webowa ASP.NET Core w C# UI  – Widok Kompletna Aplikacja Duza

Zauważ, że teraz to już bardzo dobrze wygląda. Mamy wszystkie przyciski, tutaj już jest ładnie siatka ustawiona, wszystkie przyciski są idealnie dopasowane. Co więcej, nasza aplikacja jest responsywna, jeżeli teraz sobie zmniejszę ten ekran, to zauważ, że ciągle to wygląda bardzo dobrze.

Pierwsza Aplikacja Webowa ASP.NET Core w C# UI  – Widok Kompletna Aplikacja Mała

Także na każdym ekranie, zarówno na dużym telewizorze, czy monitorze, jak i na telefonie, nasza aplikacja będzie dobrze wyglądała. Na koniec możemy sobie usunąć testowe dane z TextBox'a tak, żeby nie przeszkadzały nam w kolejnej lekcji.

@Html.TextBox("ScreenInput", null, new { @class = "calculator-screen", disabled = "disabled" })

Myślę, że to będzie wszystko, jeżeli chodzi o widok naszej aplikacji.


Cały kod aplikacji


Index.cshtml

@{
    ViewData["Title"] = "Kalkulator";
}

<div class="card mt-5">

    @Html.TextBox("ScreenInput", null, new { @class = "calculator-screen", disabled = "disabled" })

    <div class="calculator-btns">

        <button type="button" class="btn bg-success">7</button>
        
        <button type="button" class="btn bg-success">8</button>            
        
        <button type="button" class="btn bg-success">9</button>

        <button type="button" class="btn bg-secondary">/</button>

        <button type="button" class="btn bg-secondary add-button">+</button>



        <button type="button" class="btn bg-success">4</button>

        <button type="button" class="btn bg-success">5</button>

        <button type="button" class="btn bg-success">6</button>

        <button type="button" class="btn bg-secondary">-</button>



        <button type="button" class="btn bg-success">1</button>

        <button type="button" class="btn bg-success">2</button>

        <button type="button" class="btn bg-success">3</button>

        <button type="button" class="btn bg-secondary">*</button>

        <button type="button" class="btn bg-primary result-button">=</button>



        <button type="button" class="btn bg-success zero-button">0</button>

        <button type="button" class="btn bg-success">,</button>

        <button type="button" class="btn bg-danger">C</button>

    </div>

</div>

Nowe klasy w site.css

.calculator-screen {
    height: 100px;
    text-align: right;
    padding: 0 20px 0 20px;
    margin: 20px 20px 0 20px;
    font-size: 5rem;
    color: #000;
    border: 2px solid black;
}

button {
    height: 70px;
    font-size: 2rem !important;
    color: #fff !important;
}

.calculator-btns {
    display: grid;
    grid-gap: 20px;
    padding: 20px;
}

.add-button {
    height: 100%;
    grid-area: 1 / 5 / 3 / 5;
}

.result-button {
    height: 100%;
    grid-area: 3 / 5 / 5 / 5;
}

.zero-button {
    grid-area: 4 / 1 / 4 / 3;
}


PODSUMOWANIE


Tak może wyglądać widok naszej aplikacji. Dzięki podstawowej znajomości HTML'a CSS'a i Bootstrap'a możesz tworzyć już całkiem dobrze wyglądające aplikacje. Na tę chwilę aplikacja nie ma jeszcze żadnych funkcjonalności, ale tym zajmiemy się w kolejnym artykule. Pokażę Ci wtedy jak za pomocą JavaScript oraz C# zaimplementować logikę kalkulatora.

Jeżeli taki artykuł Ci się spodobał, to koniecznie dołącz do mojej społeczności. Zapisz się na darmowy newsletter, gdzie co tydzień dzielę się wartościowymi materiałami w szczególności dotyczącymi C# i platformy .NET (darmowy zapis – newsletter).

Poprzedni artykuł - Pierwsza Aplikacja Desktopowa WPF w C# – Logika MVVM (2/2).
Następny artykuł - Pierwsza Aplikacja Webowa ASP.NET Core w C# – Logika MVC (2/2)
Autor artykułu:
Kazimierz Szpin
Kazimierz Szpin
Programista C#/.NET. Specjalizuje się w ASP.NET Core, ASP.NET MVC, ASP.NET Web API, WPF oraz Windows Forms.
Autor bloga ModestProgrammer.pl
Dodaj komentarz

Wyszukiwarka

© Copyright 2021 modestprogrammer.pl. Wszelkie prawa zastrzeżone. Polityka prywatności. Design by Kazimierz Szpin