Archiwa tagu: mvc

#9.5 Tworzenie formularza kontaktowego i wszystkich komponentów potrzebnych do jego obsługi.

Mamy już stworzoną stronę główną (widok Index). Teraz przyszedł czas na stworzenie formularza kontaktowego, do którego będziemy przechodzić poprzez link ze strony głównej. W tym celu musimy wykonać następujące czynności:

  • stworzyć model danych dla naszego formularza,
  • zmodyfikować stronę główną (widok Index) poprzez umieszczenia na niej odpowiedniej treści oraz linku do widoku formularza,
  • utworzyć nową metodę akcji, która będzie zarządzała nowym widokiem formularza (kontroler Home),
  • stworzyć nowy widok formularza, który będzie oparty na stworzonym wcześniej modelu danych.

W tym rozdziale będę korzystał czasami z gotowego kodu bez szczegółowego wyjaśnienia, ponieważ pewne zagadnienia będę opisywał szczegółowo w dalszej części kursu.

#9.4 Dodajemy dynamiczną treść do widoku.

Dodawania do naszego widoku statycznej i dynamicznej treści.

Teraz chcielibyśmy dodać do naszego widoku jakąś treść. I o ile ze statyczną treścią nie ma większego problemu to dynamiczną musimy jakoś wygenerować i przesłać do widoku. Generowanie dynamicznej treści wykonuje się w kontrolerze, ale jeszcze później musimy w jakiś sposób przekazać ją do widoku?

Żeby zobaczyć jakikolwiek efekt zmodyfikujemy troszeczkę nasz nowo utworzony widok, ale także nasz kontroler Home. Wstawimy na naszą stronę główną (widok: Index) jakąś treść. Dodamy treść „Witaj! Znajdujesz się na stronie głównej.” i w następnym wierszu dodamy aktualną datę i godzinę.

Tekst statyczny, który będzie się pokazywał na stronie Index możemy wpisać bezpośrednio w pliku widoku Index. Natomiast dynamiczną część, czyli aktualna datę i godzinę, musimy wygenerować w kontrolerze i później przekazać ją do widoku. I tym się zajmiemy w pierwszej kolejności. Nasz kontroler Home należy zmodyfikować zgodnie z listingiem 9.4.1, pogrubioną czcionką zaznaczona zmodyfikowana treść kontrolera.

Listing 9.4.1 Modyfikacja kontrolera Home.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace PierwszaAplikacja.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ViewResult Index()
        {
            ViewBag.DataGodzina = DateTime.Now;
            return View();
        }
    }
}

Do przechowania i przekazania daty i godziny z kontrolera do widoku użyjemy dynamicznego obiektu ViewBag, do którego możemy stworzyć właściwość DataGodzina (nazwa naszej właściwości jest dowolna) i do tej właściwości przypiszemy wartość aktualnej daty i godziny dzięki poleceniu DateTime.Now. Stworzenie właściwości DataGodzina dla obiektu ViewBag i przypisanie do niej wartości aktualnej daty i godziny wygląda następująco.

 

	ViewBag.DataGodzina = DateTime.Now;

Za pomocą obiektu ViewBag aktualną datę i godzinę możemy przekazać do naszego widoku Index. W tym celu modyfikujemy nasz widok Index. Pogrubioną czcionką zaznaczona jest zmodyfikowana część kodu.

Listing 9.4.2 Modyfikacja widoku Index.

 @{
    Layout = null;
}
<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
    <title>Strona główna</title>
</head>
<body>
    <div> 
            Witam ! <br>
            Aktualna data i godzina: @ViewBag.DataGodzina
    </div>
</body>
</html>

Jak widać kawałek kodu @ViewBag.DataGodzina służy do wywołania właściwości DataGodzina obiektu ViewBag. W tym właśnie miejscu w przeglądarce internetowej pojawi się aktualna data i godzina. Żeby zobaczyć efekt naszych działań uruchamiamy nasz projekt (F5), co prezentuje rysunek 9.4.1.

9.4.1 Widok projektu w przeglądarce internetowej po modyfikacjach kontrolera i widoku._
9.4.1 Widok projektu w przeglądarce internetowej po modyfikacjach kontrolera i widoku._

#9 Pierwsza aplikacja w ASP.NET MVC

Pierwsza aplikacja w ASP.NET MVC

Myślę, że doszliśmy już do takiego momentu kiedy będziemy w stanie napisać naszą pierwszą mini aplikację w ASP.NET MVC. Każda szanująca się firma powinna mieć na swojej stronie formularz zgłoszeniowy. I właśnie coś takiego zrobimy w ramach naszej pierwszej aplikacji. Bez zbędnych wstępów, zaczynamy.

Krótko opiszę co będziemy robić po kolei:

  • stworzymy nowy kontroler, który będzie „zarządzał” naszą aplikacją. W trakcie rozwoju naszego projektu będziemy dodawali do niego odpowiednie metody akcji,
  • stworzymy także kilka widoków do „komunikacji” z użytkownikiem,
  • napiszę także parę słów o kontroli poprawności danych w formularzu, jak dodawać dodatkowe komponenty do naszego projektu a także jak korzystać z zewnętrznych komponentów typu biblioteka Bootstrap.

#1 Co to jest ASP.NET? I z czym to się je?

Co to jest ASP.NET

Niestety kilka suchych faktów należy podać :) Postaram się jednak zrobić to „w pigułce”. Więc do dzieła!

Co to jest w ogóle ASP.NET?

Jest to zbiór technologii zaprojektowanych przez firmę Microsoft służących głównie do budowy aplikacji internetowych. Możemy wyróżnić tutaj generalnie trzy technologie: Web Forms, Web Pages i właśnie MVC, którą to technologią zajmiemy się w przedmiotowym kursie.

Co oznacza skrót MVC?

Skrót ten oznacza Model-Widok-Kontroler (ang. Model-View-Controller). Jest to wzorzec projektowy za pomocą którego organizujemy strukturę naszej aplikacji. Model ten przewiduje podział aplikacji na trzy części:

  • Model – organizuje/zawiera logikę biznesową naszej aplikacji (PAMIĘTAJ: MODEL==LOGIKA BIZNESOWA)
  • Widok – definiuje co i w jaki sposób ma być wyświetlone użytkownikowi, tzw warstwa prezentacji (innymi słowy widok jest odpowiedzialny za prezentację użytkownikowi wyników działania logiki biznesowej)
  • Kontroler – zapewnia komunikację z użytkownikiem (obsługuje żądania użytkowników i przekierowuje/deleguje je do odpowiednich metod modelu), aktualizuje model i odświeża widoki.

W kolejnych częściach kursu będziemy rozwijać naszą wiedzę na ten temat.

Przejdź do kolejnej lekcji kursu
#kurs ASP.NET MVC #2 Visual Studio, narzędzie wspomagające tworzenie projektów w ASP.NET MVC