Archiwa tagu: asp.net mvc

#9.5.4 Dopisujemy obsługę stworzonego formularza kontaktowego.

9.5.4 Dopisujemy obsługę stworzonego formularza kontaktowego.

W poprzedniej części stworzyliśmy formularz kontaktowy. Sprawdźmy więc czy możemy wpisać do niego jakieś dane i co się stanie jeśli klikniemy w przycisk „wyślij”? Przy otwartym pliku formcontact.cshtml wciskamy F5, wprowadzamy jakieś testowe dane do formularza i klikamy na przycisk „wyślij” (rysunek 9.5.4.1).

Kurs ASP.NET MVC 5. Wypełnienie formularza danymi i potwierdzamy przyciskiem „wyślij”.
Rysunek 9.5.4.1 Wypełnienie formularza danymi i potwierdzamy przyciskiem „wyślij”.

Po zatwierdzeniu wprowadzonych danych, pola formularza się czyszczą. Dlaczego tak się dzieje? Otóż dlatego, że nie dodaliśmy jeszcze obsługi naszego formularza. Kliknięcie w przycisk „wyślij” powoduje powrót do akcji FormContact() w naszym kontrolerze HomeController a ta akcja robi tylko jedną czynność a mianowicie wyświetla formularz FormContact.

W MVC możemy zdublować (przeciążyć) daną metodę akcji i w zależności od żądania (GET czy POST) możemy wykorzystać jedną lub drugą w zależności czy będziemy mieli do czynienia  z żądaniem GET czy z żądaniem POST. Standardowo kiedy korzystamy z metody pomocniczej Html.BeginForm() dane z formularza są przekazywane za pomocą metody POST. Żeby wiadomo było która metoda ma być wykonana przy jakim żądaniu, przed deklaracją danej metody dopisujemy [HttpGet] jeśli mamy do czynienia z żądaniem GET lub [HttpPost] jeśli mamy do czynienia z żądaniem POST. W kodzie powinno to wyglądać jak na rysunku poniżej.

Kurs ASP.NET MVC 5. Tworzenie dwóch metod FormContact dla żądania GET i POST.
Rysunek 9.5.4.2 Tworzenie dwóch metod FormContact dla żądania GET i POST.

Specjalnie na rysunku powyżej dałem dwa listingi z jedną różnicą. Na pierwszym listingu metody dla żądania GET i POST mają takie same nazwy i jedna (dla żądania POST) jest podkreślona. Na drugim listingu nie ma już podkreślenia, ale jest drobna różnica. Na drugim listingu metoda o nazwie FormContact posiada parametr i to właśnie różni obie metody i dlatego można metodę o takiej samej nazwie użyć dwa raz, co nazywamy przeciążeniem metody.

Ale żeby wszysto zadziałało musimy jeszcze dopisać jedną linijkę kodu przy deklaracjach using.

using PierwszaAplikacja.Models;

Dlaczego? Bo dopiero wtedy możemy widzieć i korzystać z naszych modeli (w naszym przypadku MFormContact).

Ale dalej metody dla żądań GET i POST robią to samo bo treści obu metod niczym się nie różnią. Zastanówmy się co ma robić nasza metoda dla żądania POST. Powinna przekazać nasze dane z formularza do widoku ale nie koniecznie domyślnego. Domyślny widok dla metody FormContact to FormContact.cshtml który generuje pusty formularz, dlatego do obsługi naszych danych z formularza wykorzystamy nowy widok o nazwie sendForm, który za chwilę stworzymy. Ale przed tym zmodyfikujemy metodę FormContact dla żądania POST aby przekierowywała nas na ten nowy widok. Poniżej zmodyfikowana metoda FormContact ([HttpPost]).

Kurs ASP.NET MVC. Zmodyfikowana metoda FormContact (HttpPost).
Rysunek 9.5.4.3 Zmodyfikowana metoda FormContact (HttpPost).

#10 Delegaty.

Delegaty to utworzone przez nas typy danych za pomocą których „wskazujemy” na odpowiednie metody które mają zostać wykonane w danym momencie. W tym momencie ktoś może powiedzieć, że można to zrobić korzystając z instrukcji warunkowych i ma rację, Delegaty są jednak lepsze przy bardziej rozbudowanych projektach. Moim zdaniem po bliższym poznaniu delegatów są one lepszym rozwiązaniem.

Spróbuję wytłumaczyć to bardziej szczegółowo. Wyobraź sobie taką sytuację, że podczas działania programu użytkownik może podjąć decyzję co do dalszego działania tego programu np. mamy program który realizuje podstawowe zadania kalkulatora.  Podajemy dwie liczby i możemy wybrać działanie jakie na zostać wykonane na tych dwóch liczbach. W momencie wyboru działania program nie wie jakie działanie wybierze użytkownik. To użytkownik podejmuje decyzję o wyborze działania i tutaj właśnie możemy użyć delegatów. Za ich pomocą możemy (w zależności od wyboru użytkownika)powiedzieć programowi która metoda powinna zostać wykonana.

Przykład deklaracji delegata:

public delegate int typDelegata = (int a);

Jak widać w powyższym przykładzie delegata deklarujemy przy pomocy słówka delegate. Zadeklarowaliśmy delegata o typie int z jednym parametrem także o typie int.

Ponadto możemy stworzyć obiekt o typie delegata, przykład poniżej.

typDelegata mojObiekt = new typDelegata(metoda1);

Jak widzimy w powyższym przykładzie stworzyliśmy obiekt o nazwie „mojObiekt” o typie „typDelegata” i jak parametr dodaliśmy nazwę metody do wykonania „metoda1”.

Dla pełnego zobrazowania działania naszego delegata prezentuję poniżej pełny kod programu.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Konsola
{
    class Program
    {
        public delegate int typDelegata (int a);
        static int metoda1(int a)
        {
            return a;
        }
        static int metoda2(int a)
        {
            return a + 10; ;
        }
        static void Main(string[] args)
        {
            typDelegata mojObjekt = new typDelegata(metoda1);

            Console.WriteLine("Wynik działania metody 1: " + mojObjekt(10));

            mojObjekt = metoda2;

            Console.WriteLine("Wynik działania metody 2: " + mojObjekt(10));

            Console.ReadKey();

        }
    }
}

Program jest bardzo prosty ale prezentuje działanie delegatów. Zadeklarowałem na samym początku delegata o nazwie „typDelegata” oraz dwie metody o nazwach „metoda1” i „metoda2”. Pierwsza metoda zwraca wartość parametru, a druga zwraca wartość parametru powiększonego o 10. W metodzie „Main” tworzymy obiekt „mojObiekt” i przypisujemy do niego metodę „metoda1”. Następnie na wyrzucamy na ekran konsoli wynik działania metody1, gdzie jako parametr delegata podajemy wartość 10. Następnie „łączymy” delegata z metodą2, gdzie jako parametr delegata podajemy wartość 10  i wyrzucamy na ekran konsoli efekt działania metody 2. Na ekranie powinniśmy otrzymać wynik jak poniżej.

Wynik działania metody 1: 10
Wynik działania metody 2: 20

I wszystko się zgadza metoda 1 miała nam zwrócić wartość parametru, czyli liczbę 10 a metoda 2 miała nam zwrócić wartość parametru powiększonego o 10, czyli wartość 20.

 

#9.5.3 Tworzymy pola formularza FormContact.

W pierwszej kolejności należy zmienić tytuł naszego formularza. Aby to zrobić w oknie głównym Visual Studio musimy mieć aktywny plik naszego widoku, czyli FormContact.cshtml. Jeśli nie widzimy tego kodu w powyższym oknie należy kliknąć na plik FormContact.cshtml w oknie Solution Explorer. Kod wygenerowany przy tworzeniu naszego widoku prezentuje poniższy listing 9.5.3.1.

Listing 9.5.3.1 Pierwotny kod wygenerowanego widoku FormContact.

@model PierwszaAplikacja.Models.MFormContact
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>FormContact</title>
</head>
<body>
    <div> 
    </div>
</body>
</html>

W pierwszej kolejności zmienimy tytuł naszego formularza, który mieści się między tagami <title> i </title>.

<title>Formularz kontaktowy </title>

Kolejnym krokiem jest utworzenie czterech pól formularza i przycisku którym będziemy zatwierdzali wprowadzone przez nas dane. Z rozdziału gdzie tworzyliśmy nasz model danych pamiętamy, że chcieliśmy aby nasz formularz zawierał następujące pola: kategoria, tytuł, autor i opis (takie właściwości metody MFormContact utworzyliśmy). O ile pola tytuł, autor i opis będą zwykłymi polami tekstowymi to pole kategoria będzie listą wyboru.

Na początek utworzymy nasze pola tekstowe. Do ich utworzenia wykorzystamy odpowiednią metodę pomocniczą Html, która wygeneruje nam odpowiednią kontrolkę <input>. W przypadku pól tekstowych będzie to metoda Html.TextBoxFor<>. Generalnie metody pomocnicze służą do generowania odpowiednich znaczników HTML.

<p>Tytuł: @Html.TextBoxFor( a => a.title )<p>

Jak widzimy w nawiasie po metodzie Html.TextBoxFor występuje nowa składnia a => a.title. Jest to wyrażenie lambda, które szerzej omówię w dalszej części kursu. Na chwilę obecną wystarczy wiedzieć, że wyrażenie lambda to funkcja anonimowa która służy do tworzenia typów delegatów lub typów drzewa wyrażeń. Składnia wyrażenia lambda to:

[parametry wejściowe] => (operator lambda) [wyrażenie lub instrukcja blokowa]

W naszym przypadku wyrażenie to będzie zwracało wartości z odpowiednich pól.

Zwróćmy uwagę, że nasz widok FormContact.cshtml oparliśmy na modelu MFormContact o czym mówi zapis na początku widoku @model PierwszaAplikacja.Models.MFormContact.

Tworząc wyrażenie lambda za metodą Html.TextBoxFor Visual Studio od razu wie, że odwołujemy się do naszego modelu MFormContact, co pokazje rysunek 9.5.3.1.

9.5.3.1 Tworzymy wyrażenie lambda.
9.5.3.1 Tworzymy wyrażenie lambda.

A dodając kropkę za naszym parametrem a = a. od razu odwołujemy się do właściwości naszego modelu, do pokazuje rysunek 9.5.3.2.

9.5.3.2 Tworzymy wyrażenie lambda.
9.5.3.2 Tworzymy wyrażenie lambda.

W ten sposób tworzymy nasze pola: tytuł, autor i opis.

Listing 9.5.3.2 Kod prezentujący pola tytuł, autor i opis.

<p>Tytuł: @Html.TextBoxFor(a => a.Title)</p>
<p>Autor: @Html.TextBoxFor(a => a.Author)</p>
<p>Opis:  @Html.TextBoxFor(a => a.Description)</p>

Kolejne potrzebne pole to pole kategoria które będzie listą rozwijalną z możliwością wyboru wybranej kategorii zgłoszenia. W tym celu wykorzystamy kolejną metodę pomocniczą Html.DropDownListFor. Na początku odwołamy się do właściwości category w naszym modelu MFormContact a później utworzymy tablicę gdzie będziemy przechowywali kolejne wartości naszej listy, co pokazuje listing 9.5.3.2.

Listing 9.5.3.3 Kod prezentujący pole kategoria.

<p>
Wybierz kategorię:
@Html.DropDownListFor(a => a.Category, new[]
{
new SelectListItem() {Text = "Pytanie o produkty/usługi."},
new SelectListItem() {Text = "Sprawy techniczne." },
new SelectListItem() {Text = "Biuro obslugi klienta." }
}   
)
</p>

Na koniec pozostało nam zdefiniowanie przycisku „wyślij”. W tym celu wygenerujemy kontrolkę input o typie submit, co pokazuje kolejny listing.

Listing 9.5.3.4 Definicja kontrolki input dla przycisku „wyślij”.

<input type=”submit” value=”wyślij”>

Definicję wszystkich pól „opakujemy” jeszcze w znacznik <form … > Treść formularza </form>. W tym celu skorzystamy z następnej metody pomocniczej a mianowicie Html.BeginForm, co pokazuje poniższy kod.

Listing 9.5.3.5 Wykorzystanie metody Html.BeginForm.

@using(Html.BeginForm())
{ 
…
Definicja pól i przycisków formularza
…      
}

Definicję całości formularza prezentuje poniższy listing.

Listing 9.5.3.6 Definicja całości formularza FormContact.cshtml.

@using(Html.BeginForm()){ 
<p>
Wybierz kategorię:
@Html.DropDownListFor(a => a.Category, new[]
{
new SelectListItem() {Text = "Pytanie o produkty/usługi."},
 ew SelectListItem() {Text = "Sprawy techniczne." },
new SelectListItem() {Text = "Biuro obslugi klienta." }
}   
)
</p>
<p>Tytuł: @Html.TextBoxFor(a=>a.Title)</p>
<p>Autor: @Html.TextBoxFor(a => a.Author)</p>
<p>Opis: @Html.TextBoxFor(a => a.Description)</p>
<input type=”submit” value=”wyślij”>
}

Po uruchomieniu projektu w przeglądarce internetowej powinniśmy zobaczyć poniższy ekran.

9.5.3.3 Widok formularza FormContact w przeglądarce.
9.5.3.3 Widok formularza FormContact w przeglądarce.

Jeżeli podejrzymy źródło strony zobaczymy, że wszystkie metody pomocnicze HTML zostały zamienione na odpowiednie znaczniki HTML, co prezentuję poniżej.

Listing 9.5.3.7 Kod prezentujący źródło strony formularza FormContact.

<form action="/Home/FormContact" method="post">        <p>
            Wybierz kategorię:
            <select id="Category" name="Category"><option>Pytanie o produkty/usługi.</option>
<option>Sprawy techniczne.</option>
<option>Biuro obslugi klienta.</option>
</select>
        </p>
        <p>Tytuł: <input id="Title" name="Title" type="text" value="" /></p>
        <p>Autor: <input id="Author" name="Author" type="text" value="" /></p>
        <p>Opis: <input id="Description" name="Description" type="text" value="" /></p>
</form>

Na tym zakończymy tworzenie naszego formularza kontaktowego.

Dalsze części rozdziału 9 w przygotowaniu :)

#9.5.2 Tworzymy nowy widok i metodę akcji FormContact.

W tym podrozdziale stworzymy nowy widok oparty na naszym modelu. Będzie on prezentować wszystkie pola, które będziemy wykorzystywać w formularzu kontaktowym. Na początku jednak stworzymy metodę akcji FormContact w kontrolerze Home, która początkowo będzie zwracała nam widok FormContact, który stworzymy za chwilę na podstawie naszej metody. Przechodzimy do naszego kontrolera Home i dopisujemy do niego poniższy kod.

public ViewResult FormContact()
        {
            return View();
        }

Następnie tworzymy nowy widok o nazwie FormContact na podstawie naszego wcześniej utworzonego modelu MFromContact. W tym celu klikamy prawy przyciskiem myszy na nazwie naszej metody FormContact i z menu kontekstowego wybieramy opcję Add View …

9.5.2.1 Tworzymy nowy widok o nazwie FormContact.
9.5.2.1 Tworzymy nowy widok o nazwie FormContact.

W kolejnym oknie dialogowym Add View w polu Template wybieramy opcję Empty a w polu Model class wybieramy opcję MFormContact (PierwszaAplikacja.Models) i potwierdzamy wszystko przyciskiem OK, co obrazuje rysunek poniżej.

9.5.2.2 Dodawanie nowego widoku do projektu.
9.5.2.2 Dodawanie nowego widoku do projektu.

Utworzony widok powinien pojawić się w oknie Solution Explorer w części Views -> Home co obrazuje kolejny rysunek.

9.5.2.3 Nowo utworzony widok FormContact.
9.5.2.3 Nowo utworzony widok FormContact.

Po uruchomieniu naszego projektu w tym momencie nie zobaczymy jeszcze żadnego efektu z uwagi na fakt, że utworzyliśmy pusty widok. W kolejnym wpisie utworzymy pola naszego formularza.

Procedura – tworzenie nowego projektu ASP.NET MVC (WebApplication)

Tworzenie nowego projektu ASP.NET MVC (WebApplication) – krok po kroku

(procedury będę tworzył w sytuacji kiedy jakieś działania będziemy wykonywać cyklicznie.)

W tej procedurze pomocniczej opiszę jak utworzyć pusty projekt ASP.NET MVC – WebApplication

  1. Uruchom program Visual Studio Community 2015
    Standardowo na pulpicie znajduje się link

    Visual Studio Community 2015 skrót na pulpicie
    Visual Studio Community 2015 skrót na pulpicie

    opcjonalnie
    klikamy w menu Start (lewy dolny róg w oknie głównym systemu Windows) i w polu wyszukaj programy i pliki wpisujemy Visual Studio i klikamy w opcję Visual Studio 2015

    Uruchamianie Visual Studio 2015 z menu Start
    Uruchamianie Visual Studio 2015 z menu Start

    Po uruchomieniu Visual Studio 2015 zobaczymy „widok główny” aplikacji.

    Visual Studio "widok główny" aplikacji.
    Visual Studio „widok główny” aplikacji.
  2. Aby utworzyć nowy projekt możemy zrobić to na kilka sposobów
    Klikamy na link New Project w oknie głównym aplikacji

    Visual Studio - tworzenie nowego projektu.
    Visual Studio – tworzenie nowego projektu.

    lub wybieramy z menu File opcję New i następnie Project…

    Visual Studio - tworzenie nowego projektu.
    Visual Studio – tworzenie nowego projektu.

    albo możemy skorzystać ze skrótu klawiszowego Ctrl + Shift + N

  3. W oknie New Project z drzewa po lewej stronie wybieramy opcję Templates > Visual C# > Windows > Web. Następnie w środkowym oknie wybieramy opcję ASP.NET Web Application Visual C# i potwierdzamy nasz wybór klikając na przycisk OK

    Visual Studio - okno New Project.
    Visual Studio – okno New Project.
  4. Kolejny krok to wybór szablonu naszego projektu.
    Klikamy w ikonkę Empty później zaznaczamy checkbox przy modelu MVC i potwierdzamy nasz wybór klikając na przycisk OK

    Visual Studio - okno New ASP.NET Project.
    Visual Studio – okno New ASP.NET Project.
  5. W tym momencie Visual Studio tworzy nasz pusty projekt i jego utworzeniu zobaczymy „okno główne” naszego nowego projektu.

    Visual Studio - okno główne pustego projektu PierwszaAplikacja.
    Visual Studio – okno główne pustego projektu PierwszaAplikacja.

#8 Widok

Widok (ang. View)

Widok to jedna z trzech warstwa modelu MVC. W widoku definiujemy co i w jaki sposób będziemy prezentować użytkownikowi. To w widoku definiujemy dynamiczne zmienne które po wywołaniu widoku „uzupełniają się” danymi np. z bazy danych. Przykład prostego widoku, który wyświetla aktualną datę i godzinę. Cała treść, oprócz części pogrubionych, jest wygenerowana automatycznie przy pomocy Visual Studio.

Listing 8.1. Prosty widok (o nazwie Index) do wyświetlenia aktualnej daty
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Aktualna Data</title>
</head>
<body>
    <div> 
        @ViewBag.PokazAktualnaDate
    </div>
</body>
</html>

Poniżej rysunek prezentujący efekt wywołania powyższego widoku w przeglądarce internetowej.

Widok wyświetlający aktualną datę.
Rysunek 8.1. Widok wyświetlający aktualną datę.

Żeby nasz widok mógł wyświetlić aktualną datę i godzinę musieliśmy w kontrolerze w odpowiedniej metodzie ,o takiej samej nazwie jak nasz widok (w tym przypadku jest to widok i metoda o nazwie Index), zdefiniować właściwość ViewBag.PokazAktualnaDate w zaprezentowany poniżej sposób.

ViewBag.PokazAktualnaDate = DateTime.Now;

Poniżej treść kontrolera Home i metody Index

Listing 8.2. Kod kontrolera Home i metody Index
public class HomeController : Controller 
{
    public ViewResult Index() 
        {
            ViewBag.PokazAktualnaDate = DateTime.Now;
            return View();
        }
}

Teraz „zdanie” wyjaśnienia jak to się dzieje, że w przeglądarce internetowej wyświetla się aktualna data i godzina.

Po uruchomieniu naszej aplikacji poprzez mechanizm rutingu przechodzimy do kontrolera Home i metody Index. Dlaczego właśnie do tego kontrolera i do tej metody? Ano dlatego, że domyślnie to właśnie kontroler Home i metoda Index są domyślnymi wartościami dla domyślnej ścieżki rutingu (patrz listing 1 z części #5 Ruting). Teraz popatrzmy co znajduje się w metodzie Index w naszym kontrolerze Home? Zadeklarowaliśmy tam właściwość ViewBag.PokazAktualnaDate która będzie przechowywała aktualną datę i godzinę w momencie wywołania oraz metodę View() która wywoła widok o nazwie Index, bo tak nazywa się nasza metoda w której wywołujemy metodę o nazwie View. Zgodnie z powyższym w naszej przeglądarce w momencie wywołania widoku Index pojawi się aktualna data i godzina.

#7 Model

Model (ang.model)

Modele to zdefiniowane przez nas klasy odzwierciedlające strukturę danych w naszym projekcie, powiedziałbym nawet, że opisują/przenoszą na grunt informatyczny kawałek rzeczywistości którą musimy oprogramować. Proste modele będą tylko reprezentować dane, które później mogą być wyświetlane użytkownikowi. Możemy jednak tworzyć bardziej rozbudowane modele które zawierają w sobie logikę biznesową naszej aplikacji, ale wszystko po kolei.

Model MVC. Interakcje.
Rysunek 7.1. Model MVC. Interakcje.

Przykład prostego modelu:

Opis: Chcielibyśmy stworzyć aplikację która m.in. zawiera formularz kontaktowy. Czyli do wysłania takiej wiadomości musi być stworzony formularz na stronie www, który zawiera najczęściej takie pola jak: imię i nazwisko lub nick, adres e-mail, temat zgłoszenia i opis problemu. W takiej sytuacji nasz model reprezentujący taki formularz mógłby wyglądać tak.

public class MojProgram
    {
        public string Name { get; set; }
        public string Email { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
    }

#4 Visual Studio Community 2015 podstawowe modułu.

Visual Studio Community 2015 – podstawowe moduły

W poprzedniej części instalowaliśmy Visual Studio Community 2015. Teraz uruchomimy to narzędzie i omówię jego główne modułu z których będziemy korzystali.
Po uruchomieniu Visual Studio zobaczymy ekran jak na obrazku poniżej.

Visual Studio Community 2015 - widok główny.
Obrazek 1. Visual Studio Community 2015 – widok główny.

 

Na początku stworzymy pusty projekt abym mógł opisać poszczególne moduły/okienka Visual Studio 2015.

Aby utworzyć nowy pusty projekt możemy w głównym widoku kliknąć na link New Project lub na pasku menu wybrać opcję File później New i później Project lub wykorzystać skrót klawiszowy Ctrl+Shift+N.

Po wybraniu któregoś z ww. sposobów otworzy się okno o nazwie New Project i z drzewka po lewej stronie wybieramy opcję Templates > Visual C# > Web i w okienku po prawej wybieramy opcję ASP.NET Web Application (obrazek 2).

Visual Studio 2015 - tworzenie nowego projektu.
Obrazek 2. Visual Studio 2015 – tworzenie nowego projektu.

W oknie tym możemy także wpisać nazwę naszego projektu (pole Name) oraz lokalizację plików naszego projektu (pole Location). Po wybraniu i wpisaniu wszystkich danych klikamy na przycisk OK w prawym dolnym rogu.

Kolejny krok to wybranie szablonu naszej aplikacji. My wybieramy szablon Empty i zaznaczamy checkbox przy słówku MVC poniżej, zgodnie z obrazkiem 3 i klikamy na przycisk OK.

Visual Studio 2015 - wybór szabony projektu.
Obrazek 3. Visual Studio 2015 – wybór szablonu projektu.

 

Następny obrazek pokazuje widok główny po stworzeniu nowego pustego projektu MVC.

Visual Studio 2015 - widok nowego pustego projektu MVC.
Obrazek 4. Visual Studio 2015 – widok nowego pustego projektu MVC.

 

Po utworzeniu nowego projektu mogę pokazać Wam gdzie znajdują się główne modułu do zarządzania naszym projektem.

Pierwszy z nich to Solution Explorer (obrazek 5) który znajduje się po prawej stronie okna głównego. To za jego pomocą możemy zarządzać strukturą naszego projektu. To w nim dodajemy nowe elementy lub usuwamy niepotrzebne np. foldery, klasy, kontrolery itd.

Solution Explorer w Visual Studio 2015.
Obrazek 5. Solution Explorer w Visual Studio 2015.

Jeśli nie mamy „na wierzchu” tego elementu możemy skorzystać ze skrótu klawiszowego Ctrl+Alt+L lub z menu View wybrać opcję Solution Explorer.

Kolejnym elementem w widoku głównym aplikacji jest okno „główne” gdzie będziemy edytować pliki naszego projektu. Kliknijmy dla zobrazowania w plik Global.asax w Solution Explorerze i zobaczymy, ze w oknie „główny” pojawiła się treść tego pliku. W tym momencie możemy edytować zawartość tego pliku (obrazek 6).

Visual Studio 2015 okno "główne".
Obrazek 6. Visual Studio 2015 okno „główne”.

 

Po lewej okna głównego aplikacji możemy zauważyć napis Server Explorer po jego kliknięciu rozwinie się dodatkowe okienko o tej nazwie. Za pomocą Server Explorera będziemy mogli dodawać źródła danych do naszego projektu. Będziemy mogli także zarządzać naszą bazą danych. Ja bym to określił jako mini SQL Server. Po podłączeniu się ze źródłem danych będziemy mogli nawigować po wybranej bazie danych, przeglądać tabele, tworzyć nowe lub modyfikować istniejące, ale o tym później.

Server Explorer w Visual Studio 2015.
Obrazek 7. Server Explorer w Visual Studio 2015.

 

Na sam początek myślę, że wystarczy w trakcie dalszej nauki będziemy poznawać nowe elementy Visual Studio 2015.

 

Poniżej przydatne skróty klawiszowe w Visual Studio Community 2015.

Ctrl+Shift+N utworzenie nowego projektu
Ctrl+Alt+L przejście do elementu Solution Explorer
Ctrl+Alt+S przejście do elementu Server Explorer

następny wpis: #5 Routing

#3 Visual Studio Community 2015 instalacja narzędzia.

Visual Studio Community 2015 – instalacja

Aby móc „bawić” się technologią ASP.NET musimy na początku zainstalować narzędzie Visual Studio. Ponieważ w tym kursie będziemy korzystali z wersji Visual Studio Community 2015 przeprowadzę Was krok po kroku przez proces instalacji właśnie tej wersji VS.

W poprzedniej części pisałem, że plik ISO (który ściągnęliśmy z Internetu) możemy nagrać na płytę DVD lub wykorzystać emulator DVD-ROMu i „zamontować” w nim nasz plik ISO. W systemie Windows będzie on wtedy widoczny tak jakbyśmy włożyli nasze DVD z Visual Studio do napędu DVD-ROM (obrazek 1).

Visual Studio instalacja - uruchomienie instalatora narzędzia.
Obrazek 1. Visual Studio instalacja – uruchomienie instalatora narzędzia.

W celu uruchomienia instalacji wybieramy stację DVD-ROM z Visual Studio i klikamy x2 na plik vs_community.exe.

Po uruchomieniu instalacji powita nas ekran powitalny (obrazek 2).

Visual studio instalacja - ekran powitalny.
Obrazek 2. Visual studio instalacja – ekran powitalny.

 

Po zniknięciu ekranu pojawi się nowe okno gdzie będziemy mogli wybrać miejsce instalacji Visual Studio, część Choose your installation location oraz typ instalacji, część Choose your type of installation. Jeżeli chodzi o lokalizację to proszę nie sugerujcie się lokalizacją z obrazka z uwagi na to, że jest to moja wybrana lokalizacja. Wy możecie zostawić lokalizację domyślną na dysk C. Natomiast jeżeli chodzi o typ instalacji wybieramy opcję Default i klikamy na przycisk Install, zgodnie z obrazkiem 3 (pamiętaj oczywiście musisz mieć uprawnienia administratora na danej maszynie aby móc zainstalować Visual Studio).

Visual Studio 2015 instalacja - wybór lokalizacji i typu instalacji.
Obrazek 3. Visual Studio 2015 instalacja – wybór lokalizacji i typu instalacji.

 

W tym momencie następuje tak naprawdę instalacja oprogramowania Visual Studio 2015 na Twojej maszynie. Wraz z trwaniem procesu instalacji instalator informuje nas co w danym momencie robi, jaki moduł aktualnie jest instalowany (obrazek 4). Na zrzucie widzimy, że instalator w momencie zrzutu ekranu tworzył punkt przywracania systemu (Creating a system restore point…).

Visual Studio 2015 instalacja.
Obrazek 4. Visual Studio 2015 instalacja.

 

Kolejny zrzut ekranu z instalacji (obrazek 5).

Visual Studio 2015 proces instalacji.
Obrazek 5. Visual Studio 2015 proces instalacji.

 

Po instalacji pojawia się ekran z informacją o prawidłowym przebiegu procesu instalacji (obrazek 6). Aby uruchomić Visual Studio 2015 klikamy w przycisk lauch.

Visual Studio 2015 zakończenie instalacja.
Obrazek 6. Visual Studio 2015 zakończenie instalacja.

 

Na kolejnym obrazku widać uruchomione Visual Studio Community 2015.

W kolejnej części będę omawiał podstawowe moduły Visual Studio 2015.
#kurs ASP.NET MVC #4 Visual Studio Community 2015 podstawowe modułu – tutorial kurs