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”
Pola w oknie „Add View” wypełniamy według rysunku 9.5.5.2 poniżej.
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.
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
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.
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
Spróbujmy teraz uruchomić nasz projekt, wprowadzić do naszego formularza jakieś przykładowe dane i potwierdzić przyciskiem „wyślij” (rysunek 9.5.5.6).
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.