Miten rakentaa ASP.NET Core MVC -käyttöliittymä ja hyödyntää Razor-näkymiä sekä Bootstrapia?

ASP.NET Core MVC:n ytimessä on View-komponentti, jonka tehtävänä on muuntaa malli HTML-muotoon tai muihin esitysmuotoihin. Razor on oletusarvoinen näkymämoottori, joka hyödyntää @-merkkiä palvelinpuolen koodin suorittamiseen. Esimerkiksi kotisivun näkymä (Index.cshtml) sisältää C#-koodilohkon @{ }, jossa asetetaan näkymän metatietoja, kuten sivun otsikko ViewData-sanakirjaan. Tämä tieto välittyy edelleen ja ohjaa jaettua ulkoasua (_Layout.cshtml), joka lataa tyylitiedostot, navigaatiopalkin sekä määrittää sivun rakenteen. ASP.NET Core Tag Helperit tuovat HTML-elementteihin dynaamisuutta, mahdollistavat reittien hallinnan ja linkkien luomisen käyttäjäystävällisesti.

Projektissa käytetään Northwind-tietokantayhteyttä viittaamalla siihen projektin viitteiden kautta ja käsitellään koodin rakennetta siten, että varmistetaan virheiden tunnistaminen käännösaikana. Tämä lisää sovelluksen luotettavuutta ja ylläpidettävyyttä. Razor-näkymien _ViewImports.cshtml tiedosto tuo käyttöön tarvittavat nimetilat ja Tag Helperit, kun taas _ViewStart.cshtml asettaa kaikkien näkymien oletusulkoasun. Razor-mallien sisältö sijoitetaan layout-tiedoston @RenderBody()-metodin kautta.

Bootstrap toimii modernin käyttöliittymän perustana tarjoamalla responsiivisen, mobiililähtöisen suunnittelujärjestelmän. Se yhdistää CSS-tyylit ja JavaScript-kirjastot, joiden avulla voidaan rakentaa sekä prototyyppejä että lopullisia käyttöliittymiä. Bootstrapin järjestelmä perustuu neljään pääosaan: Layout, Content, Components ja Utilities. Näistä voidaan käyttää vain tarvittavia osia. Bootstrapin keskeinen käsite ovat breakpointit, jotka määrittelevät ruudun leveyden rajat ja ohjaavat sisältöjen uudelleenjärjestelyä eri näytön kokoihin mukautuen.

Container-luokka toimii grid-järjestelmän perustana ja sen leveys muuttuu ennalta määriteltyjen breakpoint-arvojen mukaisesti. Esimerkiksi alle 576 pikselin leveydellä kontti venyy täyteen selaimen leveyteen, mutta suuremmilla näytöillä leveys asetetaan kiinteäksi eri arvoihin kuten 540, 720 tai 960 pikseliin. Tämä mahdollistaa sivuston responsiivisuuden ilman ylimääräistä koodia ja auttaa suunnittelemaan käyttöliittymiä, jotka toimivat saumattomasti eri laitteilla.

Erityisen tärkeää on ymmärtää, että Razor-näkymien ja Bootstrapin yhdistäminen mahdollistaa monipuolisen ja hallitun käyttöliittymän rakentamisen. Razor views käsittelevät palvelinpuolen logiikkaa ja datan esitystä, kun taas Bootstrap vastaa käyttöliittymän ulkoasusta ja käyttäjäkokemuksesta eri laitteilla. Näiden teknologioiden yhteiskäyttö tehostaa kehitysprosessia, tekee sovelluksesta skaalautuvan ja helppokäyttöisen sekä ylläpidettävän.

Lisäksi ASP.NET Core Identity, joka konfiguroidaan ohjelmakoodissa, integroituu saumattomasti EF Core -tietokantakerrokseen (kuten SQLite tai SQL Server), mahdollistaen käyttäjien tunnistautumisen ja hallinnan. Tämä on tärkeää turvallisuuden ja käyttäjäkokemuksen kannalta. Koodissa määritellään myös palvelut ja reititykset, jotka ohjaavat HTTP-pyyntöjen käsittelyä ja sivuston toimintaa.

Miten luoda ja hallita tietokantaobjekteja Azure Cosmos DB:ssä

Aloitamme luomalla yksinkertaisen JSON-dokumentin, joka edustaa tuotetta nimeltä "Aniseed Syrup". JSON on kevyt tiedonvaihtomuoto, joka on keskeinen NoSQL-tietokannoissa, kuten Azure Cosmos DB:ssä. Kun avaat Cosmos DB -emulaattorin, voit luoda uuden tuotteen seuraavalla JSON-muodolla:

json
Copy code
{

  "productId": 3,
  "productName": "Aniseed Syrup",
  "supplier": {
    "supplierId": 1,
    "companyName": "Exotic Liquids",
    "contactName": "Charlotte Cooper",
    "Address": "49 Gilbert St.",
    "City": "London",
    "Country": "UK",
    "Phone": "(171) 555-2222"
  },
  "category": {
    "categoryId": 2,
    "categoryName": "Condiments",
    "description": "Sweet and savory sauces, relishes, spreads, and seasonings"
  },
  "quantityPerUnit": "12 - 550 ml bottles",
  "unitPrice": 10,
  "unitsInStock": 13,
  "unitsOnOrder": 70,
  "reorderLevel": 25,
  "discontinued": false
}

Kun olet luonut tämän tuotteen, voit tallentaa sen emulaattoriin. Seuraavaksi avaat ensimmäisen tuotteen ja tarkistat, että kaikki elementit ovat saaneet automaattisesti GUID-arvot tunnisteiksi, mikä varmistaa, että tietokanta pystyy yksilöimään jokaisen tietueen tehokkaasti.

Tämän jälkeen voidaan käyttää SQL-kyselyitä tuotteiden hakemiseen. Esimerkiksi, jos haluat listata kaikki tuotteet, jotka on toimittanut "Exotic Liquids", voit kirjoittaa seuraavan SQL-kyselyn:

sql
Copy code
SELECT * FROM c WHERE c.supplier.companyName = "Exotic Liquids"

On tärkeää muistaa, että SQL-kyselyissä avainsanat, kuten WHERE, eivät ole kirjainkokoherkkiä, mutta kenttien nimet, kuten companyName, ovat kirjainkokoherkkiä. Jos kirjoitat CompanyName (suurella C:llä), kysely ei tuota tuloksia, koska se ei vastaa oikeaa kenttänimeä.

Toinen hyödyllinen kysely, jonka voit tehdä, on hakea kaikki tuotteet, jotka kuuluvat tiettyyn kategoriaan. Esimerkiksi, jos haluat nähdä kaikki tuotteet, joiden kategoriatunnus on 2, voit käyttää seuraavaa kyselyä:

sql
Copy code
SELECT * FROM c WHERE c.category.categoryId = 2

Tämä kysely palauttaa vain yhden tuotteen, "Aniseed Syrup", koska se kuuluu kategoriaan 2.

Azure Cosmos DB -resurssien luominen ja hallinta onnistuu myös Azure-portaalissa. Jos et ole vielä luonut Azure-tiliä, voit tehdä sen ilmaiseksi ja aloittaa Cosmos DB:n käytön. Azure-portaalissa valitse "Create a resource" ja etsi "Azure Cosmos DB". Kun olet valinnut Cosmos DB:n ja valinnut "Core (SQL)", voit määrittää tilin perusasetukset. Näihin kuuluvat mm. tilin nimi, sijainti ja kapasiteetti. Ilmaisversio tarjoaa ilmaiseksi 1000 RU/s ja 25 GB tallennustilaa, mutta voit valita olla käyttämättä tätä, jos aiot käyttää tiliä vain oppimistarkoituksiin.

Kun olet luonut Azure Cosmos DB -tilin, voit siirtyä "Keys"-osioon ja kopioida tilin URI- ja pääavaimet. Nämä avaimet tarvitaan ohjelmallisesti Cosmos DB:n kanssa työskentelemiseen.

Lisäksi Azure-portaalissa on mahdollista luoda tietokannan "container", joka toimii tietojen tallennuspaikkana. Tämä vaihe voidaan suorittaa suoraan portaalin käyttöliittymästä valitsemalla "New Container" ja määrittämällä tarvittavat tiedot.

Jos haluat käyttää paikallista emulaattoria, se tarjoaa tehokkaan tavan kehittää ja testata ilman pilvipalvelun käyttöön liittyviä kustannuksia. Paikallisen emulaattorin käyttäminen on erityisen hyödyllistä kehitysvaiheessa, kun halutaan välttää ylimääräisiä kustannuksia ja testata koodia turvallisesti ennen tuotantoon siirtymistä.

Azure Cosmos DB:n ja NoSQL-tietokantojen kanssa työskentelyssä on tärkeää ymmärtää, että tiedon tallentaminen ja hakeminen tapahtuu hieman eri tavalla verrattuna perinteisiin relaatiotietokantoihin. Tietoja ei tallenneta taulukoihin, vaan ne järjestetään dokumenteiksi, jotka voivat sisältää upotettuja tietoja ja monimutkaisempia rakenteita. Tämä joustavuus mahdollistaa erilaisten datarakenteiden hallinnan ilman, että tarvitsee huolehtia tietojen muotoilusta tai rajoituksista.

Tässä yhteydessä on myös hyvä huomata, että Azure Cosmos DB:n käyttöönotto pilvessä tuo mukanaan lisähaasteita, kuten hallittavuus ja kustannukset, jotka voivat kasvaa nopeasti suurilla datamäärillä ja monimutkaisilla kyselyillä. Käyttäjien on tärkeää tehdä kustannuslaskelmia ja ymmärtää, miten eri kapasiteetti- ja varmuuskopiointivaihtoehdot vaikuttavat käytön kokonaishintaan.

Miten luoda PDF-tiedosto C#-koodilla ja käyttää kolmannen osapuolen kirjastoja?

Kun työskentelet C#-koodin kanssa, on yleinen käytäntö hyödyntää kolmannen osapuolen kirjastoja erilaisten toiminnallisuuksien luomiseksi. Esimerkiksi PDF-tiedoston luominen tai kuvien käsittely voidaan helposti toteuttaa hyödyntämällä valmiita kirjastoja, jotka tekevät työstä sujuvampaa ja nopeampaa. Tässä käsitellään, kuinka voit luoda PDF-katalogin käyttäen QuestPDF-kirjastoa ja yhdistää siihen kuvia, jotka tekevät dokumentista visuaalisesti houkuttelevan.

Ensimmäinen vaihe on luoda projekti, jossa voidaan käsitellä PDF-tiedostoja. Tämä voidaan tehdä Visual Studio 2022:ssa tai muussa vastaavassa kehitysympäristössä. Projekti nimeltään GeneratingPdf.App tulisi aluksi luoda ja sen jälkeen lisätä kuvat. Kuvien hakeminen ja sijoittaminen oikeaan kansioon on tärkeä askel, sillä ne tulevat osaksi luotavaa PDF-dokumenttia. Kuvat voidaan ladata joko suoraan verkkosivustolta tai paikallisista lähteistä ja sijoittaa projektiin luotavaan images -kansioon.

Seuraava askel on määritellä dokumenttipohja, johon kuvat ja muut tiedot lisätään. Tämä tehdään luomalla Catalog -malli, joka sisältää luokat ja kategoriat, jotka aiot lisätä PDF-tiedostoon. Esimerkiksi jos haluat luoda elintarvikekatalogin, voit määritellä kunkin kategorian (esimerkiksi juomat, mausteet, makeiset jne.) ja liittää niihin kuvat. Tämän jälkeen määritetään CatalogDocument -dokumenttipohja, joka ottaa mallin ja generoi PDF-tiedoston.

Koodissa tämä tapahtuu seuraavalla tavalla:

csharp
Copy code
using GeneratingPdf.Document; // CatalogDocument
using GeneratingPdf.Models; // Catalog, Category
using QuestPDF.Fluent; // GeneratePdf extension method
string filename = "catalog.pdf";
Catalog model = new()
{
    Categories = new()
    {
        new() { CategoryId = 1, CategoryName = "Beverages" },
        new() { CategoryId = 2, CategoryName = "Condiments" },
        new() { CategoryId = 3, CategoryName = "Confections" },
        new() { CategoryId = 4, CategoryName = "Dairy Products" },
        new() { CategoryId = 5, CategoryName = "Grains/Cereals" },
        new() { CategoryId = 6, CategoryName = "Meat/Poultry" },
        new() { CategoryId = 7, CategoryName = "Produce" },
        new() { CategoryId = 8, CategoryName = "Seafood" }
    }
};
CatalogDocument document = new(model);
document.GeneratePdf(filename);
WriteLine($"PDF catalog has been created: {filename}");

Tässä koodissa määritellään Catalog -luokka, joka sisältää kategoriat, ja näiden pohjalta luodaan PDF-dokumentti. Koodissa käytetään QuestPDF-kirjaston Fluent -menetelmää, joka tarjoaa joustavan tavan määrittää dokumentin rakenne ja sisällön.

Kun PDF on luotu, voidaan käyttää käyttöjärjestelmän komentoja tiedoston avaamiseen. Jos työskentelet Windows-ympäristössä, tiedoston voi avata suoraan komentoriviltä. Tämä tapahtuu seuraavalla koodilla:

csharp
Copy code
try

{
    if (OperatingSystem.IsWindows())
    {
        System.Diagnostics.Process.Start("explorer.exe", filename);
    }
    else
    {
        WriteLine("Open the file manually.");
    }
}
catch (Exception ex)
{
    WriteLine($"{ex.GetType()} says {ex.Message}");
}

Tämä koodi avaa luodun PDF-tiedoston suoraan Windowsin tiedostonhallinnassa. Jos työskentelet muilla käyttöjärjestelmillä, kuten Macilla tai Linuxilla, tiedosto täytyy avata manuaalisesti, vaikka Process -luokka tukee näitäkin järjestelmiä. Tiedostopolkujen määrittäminen Macille ja Linuxille saattaa olla monimutkaisempaa, joten tämä jää lukijan omaksi harjoitukseksi.

Kun ohjelma ajetaan, syntyy PDF-dokumentti, joka sisältää määriteltyjen kategorioiden tiedot ja kuvat. Tämä prosessi havainnollistaa, kuinka helposti .NET-ympäristössä voidaan luoda PDF-tiedostoja kolmannen osapuolen kirjastojen avulla.

Koko prosessi on hieno esimerkki siitä, kuinka koodissa hyödynnetään valmiita kirjastoja ja luodaan monimutkaisempia toimintoja kuten tiedostojen luontia ja käsittelyä ilman tarvetta keksiä pyörää uudelleen. Tällainen lähestymistapa säästää aikaa ja parantaa ohjelman luotettavuutta.