четвртак, 21. септембар 2017.

Uvod u ASP .Net MVC

ASP.Net MVC (Model – View – Controller) je arhitektonski sloj na visokom nivou (high-level) framework za izgradnju veb aplikacija otvorenog code-a (open-source) koji je baziran na MVC obrazcu (pattern). On je takođe i Cross-Platform; znači da radi na više platformi ili još bolje rečeno totalno je nezavisan od bilo koje platforme i definisan je na posebnom asembleru System.Web.Mvc. Prva zvanična verzija ASP .Net MVC je izašla 13 marta 2009; razvijala se sve do verzije 6.0 da bi od 17 maja 2016 godine se proširila i na open-source verziju ASP.Net Core MVC 1.0 i trenutno dok pišem ovoja post; zadnja realizacija ASP .NET Core MVC 2.0 je izašla 14 avgusta 2017 godine. Još bi napomenuo da od svoje prve pojave MVC  je stekao toliku popularnost i toliko je kompanija prešlo na njegovu upotrebu da se projekti bazirani u ASP .Net-u i veb formama u nekim poslovnim krugovima smatraju zastarelim iako ASP .Net MVC nije nastavak ASP .Net-a. Ja ću na svom blogu pisati i o ASP .Net tehnologiji jer treba da znate sve što možete da znate; ali to definitivno nije prioritet ako započinjete neki ozbiljan svoj projekat. Još veći razlog ako pokrećete veb projekat za neku kompaniju; moj savet vam je da koristite  ASP .Net MVC  tehnologiju.           


( Arhitektura Asp .Net MVC-a )

Za razliku od ASP .Net-a baziranog na veb formama; ASP .Net i veb forme nisu isto; gde se i ulaz i izlaz generišu u prikazu (View)MVC je razdvojen na tri logička segmenta: modelu, prikazu i kontroloru. Možete se pitati zašto su ovo zakomplikovali? Odgovor je jednostavan, zbog poslovne logike i bolje organizacije same strukture veb aplikacije ali i mnogih tehničkih promena. Ponekad kad programirate neke manje aplikacije sve je odlično ali kad se vaš mali projekat vremenom razvije tad je organizacija i struktura samog projekta itekako bitna. ASP .Net je poput Windows formi baziran na događajima dok je MVC baziran nad kontrolorima. ASP .Net se oslanja na ViewState mehanizam; čuva podatke između poziva dve veb strane ili veb stranice i servera; što u slučajevima kada imate dosta podataka opterećujete serverske resurse i učitavanje stranice može biti itekako usporeno. Takođe negativno utiče na rangiranje veb stranice. Iako ViewState mehanizam rešava probleme, on nije prednost. MVC jednostavno ne koristi ViewState, Postback i serverske kontrole. MVC umesto ViewState-a čuva podatke u metodama kontrolora; koristi HTML kontrole i mnoge stvari obavlja na klijent strani i lako se integriše sa JavaScript-om i JQuery bibliotekom sa kojim dizajn vašeg veb sajta izgleda lepši, bolji i moderniji. MVC koristi i REST – Represantational State Transfer; znači metode kontrolora pokreće preko URL-a. Što se tiče Routing procesa, on može da se koristi i u ASP .Net aplikacijama. Testiranje ASP .Net MVC aplikacije je pojednostavljeno.      

Šta je MVC obrazac i kako funkcioniše?


Kao što sam već naveo na početku posta; ASP .Net MVC se deli na tri glavne celine. Sa ovim celinama će te se mnogo više upoznati kroz buduće postove, kad budete učili kako se iste prave.

  • Model – je skup klasa koji definišu i opisuju podatke vaše poslovne logike sa kojim radite. Model je zadužen za sve podatke koji se trebaju prikazati iako on nema predstavu o tome gde i kako će se ti podaci prikazivati. Model kao objekat uglavnom inkapsuliraju podatke koje čuvate u bazama podataka.
  • View – prikaz definiše kako će izgledati vaše veb grafičko okruženje. To je više šablon koji dinamički generiše HTML. 
  • Controller – kontroler je specijalna klasa zadužena za komunikaciju sa korisnikom i fleksibilnost cele logike aplikacije. On je veza i interakcija između modela i prikaza. On prvo komunicira sa modelom i onda odlučuje koji prikaz će prikazati krajnjem korisniku.


Kako se kreira ASP .net MVC aplikacija?

Bez obzira koliko ste upoznati teoretski sa ASP .Net aplikacijama, praktična upotreba iste je mnogo jednostavnija. Za početak, pokrenite Visual Studio 2017 i kliknite na New Projecat. Za šablon izaberite ASP .Net Application (.Net framework) i aplikaciju nazovite HelloWorld.


Kliknite na dugme OK i pojaviće vam se nova forma. Izaberite šablon MVC. Kliknite na dugme Change Authentication. Odaberite opciju Individual User Accounts i pritisnite dugme OK.  


Sačekajte jedno kraće vreme da se MVC projekat kreira. To može potrajati u zavisnosti od performansi vašeg računara i operativnog sistema. U Solution prozoru kliknite desnim tasterom miša folder Controllers, zatim na Add i na Controllers… 



Odaberite MVC 5 Controller – Empty. Kliknite na Add, zatim nazovite kontroler ContentsControllerObratite pažnju da u nazivu kontrolera uvek stoji Controller bez obzira kako ćete nazvati kontroler. Kliknite na Add i vaš kontroler će biti kreiran i izgledaće ovako:

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

namespace HelloWorld.Controllers
{
    public class ContentsController : Controller
    {
        // GET: Contents
        public ActionResult Contents()
        {
            return View();
        }
    }
}

Kontroler ContentsController se sastoji od jednog akcionog upita. Nema potrebe tu ništa da menjate. Postavite kursor od miša bilo gde u metodi i kliknite desnim tasterom miša. Zatim, kliknite na Add ViewNa ovaj način kreiramo View koji će biti pozvan kad se pokrene akcioni upit.


Pritisnite dugme Add. Pogledajte u prozor Solution, kliknite na folder Views i videćete da vam je kreiran folder Contents i fajl Contents.cshtml. Kliknite na fajl i dodajte jednu liniju koda u čistom HTML jeziku:

@{
    ViewBag.Title = "Contents";
}

<h2>Hello World</h2>

U ovom jednostavnom primeru nemamo potrebe da pravimo modul. Međutim, hoćemo da u navigacionom toolbar-u omogućimo link Contents koji će aktivirati naš prikaz. Zato pređite na folder Views u Solution prozoru, kliknite na folder Shared, zatim kliknite na fajl _Layout.cshtml. Promenite code da izgleda ovako, samo umesto mog imena unesite svoje.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Manuel Radovanovic's Tutorials", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("Contents","Contents","Contents")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

To je mala promena i to je sve što treba da uradite. Pritisnite F5 i pogledajte šta ste sve kreirali sa tako malo rada.


Ukoliko trenutno ne programirate možete pogledati video kako to sve izgleda:



( ASP .Net MVC - 1#. Hello World )