#9.5.5 Dodanie nowego widoku sendForm.

Dodanie nowego widoku sendForm.

Teraz musimy stworzyć nowy widok o nazwie „sendForm” który będzie generował się po kliknięciu w przycisk „wyślij” na formularzu kontaktowym. Na początek stworzymy nowy widok „sendForm”. Podczas wywołania tego widoku wyślemy maila do właściciela strony i wygenerujemy odpowiedni komunikat. W przypadku wysłana maila będzie to komunikat „Twoja wiadomość została wysłana!. Odpowiemy na nią w możliwie najkrótszym terminie.” a w przypadku jakiegoś błędu wygenerujemy komunikat „Przykro nam z jakiegoś powodu Twoja wiadomość nie została wysłana. Spróbuj ponownie później.”.

Stworzyć nowy widok możemy klikając PPM w dowolnym miejscu w jakiejkolwiek metodzie i wybieramy opcję „Add view”

Rysunek 9.5.5.1 Tworzymy nowy widok sendForm.
Rysunek 9.5.5.1 Tworzymy nowy widok sendForm.

Pola w oknie „Add View” wypełniamy według rysunku 9.5.5.2 poniżej.

Rysunek 9.5.5.2 Okno Add View.
Rysunek 9.5.5.2 Okno Add View.

Pamiętajmy żeby w polu „Model class” wybrać model „MFormContact” bo taki obiekt otrzymamy z naszego formularza i na takim obiekcie będziemy dalej „pracować”. Wprowadzone dane zatwierdzamy przyciskiem „Add”. Nasz nowo utworzony widok możemy zobaczyć w Solution Explorerze w gałęzi Views -> Home -> sendForm.cshtml.

Rysunek 9.5.5.3 Nowy widok sendForm w Solution Explorer.
Rysunek 9.5.5.3 Nowy widok sendForm w Solution Explorer.

Kod naszego nowo utworzonego widoku przedstawia listing poniżej.

Zobacz listing 9.5.5.1 Kod widoku sendForm.

Już na samym początku widzimy, że do naszego widoku został dołączony model „MFormContact” (@model PierwszaAplikacja.Models.MFormContact), dzięki czemu będziemy mogli operować na właściwościach tego modelu. W momencie przesłania danych z formularza kontaktowego wywołujemy widok sendForm i poprzez atrybut daneFormularza przesyłany jest także do niego obiekt typu MFormContact, który zawiera dane z formularza kontaktowego. Teraz w prosty sposób możemy odwołać się tych danych. W tym celu wykorzystamy polecenie @Model. Spróbujmy teraz wyświetlić w widoku sendForm dane, które użytkownik wprowadził do pól formularza kontaktowego. Żeby wyświetlić dane w widoku sendForm otwieramy plik sendForm.cshtml (w Solution Explorerze) i sekcji <body> wpisujemy @Model.Author, w ten sposób odwołujemy się do pola autor w formularzu.  Analogicznie, jeżeli chcielibyśmy odwołać się np. do wartości w polu tytuł wpiszemy @Model.Title. Poniższy listing pokazuje jak należy zmodyfikować kod widoku sendForm.

Listing 9.5.5.2 Modyfikacja widoku sendForm w celu prezentacji danych z formularza kontaktowego.

   @Model.Category 
   @Model.Title 
   @Model.Author 
   @Model.Description

Zobacz pełny listing 9.5.5.2

Poniższy rysunek przedstawia cały proces od wprowadzania danych w formularzu kontaktowych poprzez widok zmodyfikowanego kodu widoku sendForm do efektu jaki otrzymujemy po zatwierdzeniu danych na formularzu kontaktowym.

Rysunek 9.5.5.4 Prezentacja w widoku sendForm danych z formularza kontaktowego.
Rysunek 9.5.5.4 Prezentacja w widoku sendForm danych z formularza kontaktowego.

Nam zależy na wysłaniu do nas danych z formularza. W tym celu wykorzystamy klasę WebMail która za pomocą której stworzymy i wyślemy wiadomość e-mail przy użyciu protokołu SMTP. Poniże w poszczególnych krokach przedstawię proces tworzenia i wysyłana takiej wiadomości.

Na samym początku powinniśmy określić adres e-mail osoby wysyłającej wiadomość. Adresu e-mail osoby wysyłającej wiadomość nie będziemy mieć, gdyż nie mamy takiego pola w naszym formularzu. Gdybyśmy jednak takie mieli moglibyśmy dynamicznie podstawiać go właśnie w tym miejscu. Dla przykładu określimy go jednak statycznie.

 WebMail.From = “nazwa@domena.pl”;

Określamy adres serwera SMTP.

 WebMail.SmtpServer = „smtp.jakasdomena.pl”;

W kolejnym kroku określamy port dla naszego serwera np. 587.

 WebMail.SmtpPort = 587;

Po ustawieniu powyższych parametrów, możemy określić czy podczas wysyłania wiadomości e-mail połączenie jest szyfrowane przy użyciu protokołu SSL.

 WebMail.EnableSsl = true;

Żeby wysłać wiadomość musimy podać także użytkownika i hasło dla smtp.

 WebMail.UserName = „NazwaUzytkownika”;
 WebMail.Password = „HasloUzytkownika”

Ostatnim poleceniem będzie wysłanie wiadomości za pomocą WebMail.Send, która standardowo zawiera informacje WebMail.Send = (do_kogo_wysyłamy _wiadomość , tytuł_wiadomości , treść_wiadomości );

 WebMail.Send = (“nasz_mail@jakasdomena.pl “, @Model.Title , @Model.Description);

W miejsce parametru tytuł_wiadomości możemy wstawić dynamicznie wartość pola Tytuł z formularza a w miejsce parametru treść_wiadomości wartość pola Opis z formularza.

Funkcja Send ma także opcjonalne parametry ale odsyłam Was w tej sprawie na strony Microsoftu. Polecam stronę https://msdn.microsoft.com.

Wysyłkę wiadomości e-mail mamy już skończona pozostaje nam jeszcze jedna kwestia. Czasami z powodów błędów wiadomość e-mail nie zostaje wysłana, skąd będziemy wiedzieć czy nasza wiadomość została wysłana czy nie? Rozwiązaniem tego problemy jest zastosowanie w naszym kodzie instrukcji try {} catch{}. Ta instrukcja służy do wykonania kodu gdzie może nastąpić jakiś nieoczekiwany błąd, w naszym przypadku np. nie wysłanie wiadomości e-mail. Działa to w taki sposób że w części try (spróbuj) program próbuje wykonać nasz kod, jeśli nie da rady np. wystąpi jakiś błąd automatycznie przerywa wykonywanie tego kodu i skacze do części catch i wykonuje kod w nim zawarty. Poniżej przykładowy kod z wykorzystaniem try {} catch {}

try
      {
         … blok instrukcji do wykonania…
         // w przypadku błędu program przerywa wykonywanie kodu w części try
         // i przeskakuje do części catch
      }
   catch
      {
         … blok instrukcji do wykonania…
         // w przypadku wystąpienia błędu w części try wykonywane są
         // instrukcje z tego bloku
      }

Składając wszystko w całość nasz kod powinien wyglądać jak na rysunku 9.5.5.5

Rysunek 9.5.5.5 Kod widoku sendForm po modyfikacjach.
Rysunek 9.5.5.5 Kod widoku sendForm po modyfikacjach.

Spróbujmy teraz uruchomić nasz projekt, wprowadzić do naszego formularza jakieś przykładowe dane i potwierdzić przyciskiem „wyślij” (rysunek 9.5.5.6).

Rysunek 9.5.5.6 Wynik przesłania danych z formularza kontaktowego do widoku sendForm.
Rysunek 9.5.5.6 Wynik przesłania danych z formularza kontaktowego do widoku sendForm.

Z uwagi na to, że w danych w sekcji try wprowadziliśmy fikcyjne dane np. adres serwera, nazwa użytkownika, hasło użytkownika itd., co nie pozwoliło wysłać poprawnie wiadomości e-mail, prawidłowo zostaliśmy przekierowani do sekcji catch  i na ekranie został wyświetlony odpowiedni komunikat.

Na tym zakończymy opis pierwszej aplikacji. Następne wpisy będą dotyczyły wybranych zagadnień z zakresu programowania w ASP.NET MVC. Serdecznie zapraszam do dalszej lektury mojego bloga.

Kolejny o modyfikacji tego widoku dodaniu kodu dotyczącego wysyłanie wiadomości i koniec.