Kuinka rakentaa reaaliaikainen viestintä SignalR:llä verkkosivustolle?

SignalR on tehokas työkalu, joka mahdollistaa reaaliaikaisen viestinnän verkkosivustojen ja -sovellusten välillä. Sen avulla voidaan luoda dynaamisia sovelluksia, jotka voivat välittää tietoa heti, kun tapahtuma tapahtuu. Tämä tekee siitä erinomaisen valinnan esimerkiksi chattien, pelien ja muiden reaaliaikaisten palveluiden luomiseen. Tässä käsitellään, kuinka SignalR:n avulla voidaan luoda chat-toiminto verkkosivulle.

Ensimmäinen askel SignalR-asiakaskirjaston käyttöönottoon on sen lisääminen projektiin. Tämä voidaan tehdä käyttämällä Library Manager CLI -työkalua. Asenna työkalu seuraavalla komennolla:

bash
Copy code
dotnet tool install -g Microsoft.Web.LibraryManager.Cli

Jos työkalu on jo asennettu, voit päivittää sen uusimpaan versioon:

bash
Copy code
dotnet tool update -g Microsoft.Web.LibraryManager.Cli

Kun työkalu on asennettu, SignalR-kirjastot voidaan ladata ja asentaa projektiin seuraavalla komennolla:

bash
Copy code
libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js --files dist/browser/signalr.min.js

Tämän jälkeen Visual Studio 2022 tarjoaa myös graafisen käyttöliittymän, jonka avulla asiakaskirjastojen lisääminen onnistuu helposti. Voit oikealla hiirenpainikkeella valita projektin ja valita vaihtoehdon "Add | Client Side Libraries", jolloin SignalR lisätään ilman komentorivikäskyjä.

Seuraavaksi voidaan lisätä chat-toiminto verkkosivustolle. Muokkaa Index.cshtml-tiedostoa seuraavasti:

html
Copy code
@using Northwind.Chat.Models

@{ ViewData["Title"] = "SignalR Chat"; }
@ViewData["Title"]
<div>
  <label>Register User</label>
  <input id="myName" type="text" placeholder="My name" />
  <input id="myGroups" type="text" placeholder="My groups" />
  <button id="registerButton" disabled>Register</button>
</div>
<div>
  <label>Send Message</label>
  <input id="from" type="text" placeholder="From" disabled />
  <input id="to" type="text" placeholder="To" />
  <textarea id="body" placeholder="Message body"></textarea>

  <button id="sendButton" disabled>Send Message</button>

</div>
<div>
  <label>Messages received</label>
  <ul id="messages"></ul>
</div>

Tässä on kolme pääosaa:

1. Register User -osio, jossa käyttäjä voi syöttää nimensä ja ryhmät, joihin hän haluaa liittyä. Rekisteröitymisen jälkeen hän voi lähettää viestejä.

2. Send Message -osio, jossa käyttäjä voi valita viestin lähettäjän, vastaanottajan ja viestin sisällön.

3. Messages received -osio, jossa vastaanotetut viestit näkyvät luettelona.

Seuraavaksi lisätään JavaScript-tiedosto chat.js, joka hoitaa SignalR-yhteyden ja viestien lähettämisen:

javascript
Copy code
"use strict";

var connection = new signalR.HubConnectionBuilder()
    .withUrl("/chat")
    .build();
document.getElementById("registerButton").disabled = true;

document.getElementById("sendButton").disabled = true;

document.getElementById("myName").addEventListener("input", function () {
    document.getElementById("from").value = document.getElementById("myName").value;
});
connection.start().then(function () {

    document.getElementById("registerButton").disabled = false;

    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {

    return console.error(err.toString());

});
connection.on("ReceiveMessage", function (received) {

    var li = document.createElement("li");

    document.getElementById("messages").appendChild(li);

    li.textContent = `To ${received.to}, From ${received.from}: ${received.body}`;

});
document.getElementById("registerButton").addEventListener("click", function (event) {
    var registermodel = {
        name: document.getElementById("myName").value,

        groups: document.getElementById("myGroups").value

    };
    connection.invoke("Register", registermodel).catch(function (err) {

        return console.error(err.toString());

    });
    event.preventDefault();
});
document.getElementById("sendButton").addEventListener("click", function (event) {
    var messagemodel = {
        from: document.getElementById("from").value,

        to: document.getElementById("to").value,

        body: document.getElementById("body").value
    };

    connection.invoke("SendMessage", messagemodel).catch(function (err) {

        return console.error(err.toString());
    });
    event.preventDefault();
});

Kun chat-toiminto on valmis, voidaan kokeilla viestien lähettämistä useiden käyttäjien välillä. SignalR huolehtii viestien välittämisestä reaaliaikaisesti kaikille yhteyden muodostaneille asiakkaille.

Chat-sovelluksen testauksen yhteydessä on tärkeää huomioida, että SignalR mahdollistaa viestien lähettämisen useille käyttäjille samanaikaisesti ilman tarvetta ladata sivua uudelleen. Tämä tekee sovelluksesta erittäin käyttäjäystävällisen ja interaktiivisen. Viestien perillemeno ja vastaanotto tapahtuvat suoraan ilman viiveitä, mikä on ratkaisevan tärkeää reaaliaikaisissa sovelluksissa.

Jos haluat, että chat-toiminto toimii kunnolla, sinun tulee varmistaa, että SignalR:n hub-toiminnot on määritelty oikein palvelinpuolella. Hubin toteutus vastaa viestien lähettämisestä ja vastaanottamisesta sekä käyttäjien hallinnasta.

Miten Bootstrapia käytetään oikein ja Razor-syntaksin ymmärtäminen web-kehityksessä

Bootstrapin käyttö ilman huolellisuutta tuo mukanaan seuraavat haitat:

– Verkkosivustosi näyttää geneeriseltä.
– Se on raskas verrattuna itse koodattuun ratkaisuun.

Tällöin Bootstrapin avulla voit luoda tehokkaita ja mukautuvia verkkosivustoja, mutta pitää samalla huolta siitä, ettei ulkoasu jää tavanomaiseksi. Hyvin määritelty teema, joka poikkeaa oletusasetuksista, voi auttaa luomaan ainutlaatuisen visuaalisen ilmeen ilman, että tarvitsee luopua Bootstrapin tarjoamista eduista.

Razor-syntaksin ja -ilmausten ymmärtäminen

Ennen kuin muokkaamme etusivun näkymää, tarkastelemme esimerkkiä Razor-tiedostosta. Tämä tiedosto sisältää alun perin Razor-koodilohkon, joka luo tilauksen, jossa on hinta ja määrä, ja tulostaa tilauksen tiedot verkkosivulle seuraavasti:

csharp
Copy code
@{   

    Order order = new()   
    {     
        OrderId = 123,    
        Product = "Sushi",    
        Price = 8.49M,    
        Quantity = 3   
    }; 
}  
Your order for @order.Quantity of @order.Product has a total cost of $@  order.Price * @order.Quantity

Yllä oleva Razor-tiedosto tuottaisi seuraavan virheellisen tulosteen:

pgsql
Copy code
Your order for 3 of Sushi has a total cost of $8.49 * 3

Vaikka Razor-muotoilussa voidaan käyttää minkä tahansa yksittäisen ominaisuuden arvoa käyttämällä @object.property -syntaksia, on suositeltavaa laittaa laskentaa sisältävät lausekkeet sulkeisiin, kuten seuraavassa esimerkissä:

pgsql
Copy code
Your order for @order.Quantity of @order.Product has a total cost of $@ (order.Price * order.Quantity)

Tämä tuottaa oikean tulosteen:

pgsql
Copy code
Your order for 3 of Sushi has a total cost of $25.47

Tämä korjaus on tärkeä, sillä ilman sulkeita laskentaa käsitellään väärin ja tuloste ei vastaa odotettua lopputulosta.

HTML Helper -menetelmien ymmärtäminen

ASP.NET Core MVC:ssä näkymän luomisessa voidaan käyttää Html-objektia ja sen menetelmiä HTML-muotoilun tuottamiseen. Kun Microsoft julkaisi ensimmäisen ASP.NET MVC:n vuonna 2009, nämä HTML Helper -menetelmät olivat tapa renderöidä HTML:ää ohjelmallisesti. Nykyisessä ASP.NET Core -versiossa nämä metodit ovat jääneet taaksepäin yhteensopivuuden vuoksi, mutta ne tarjoavat edelleen arvokasta apua tietyissä tilanteissa.

Useimmat tilanteet, joissa Tag Helperit eivät ole käytettävissä, liittyvät Razor-komponentteihin, ja niitä käsitellään myöhemmin tässä luvussa. HTML Helper -menetelmien käyttö on erityisen hyödyllistä, kun tarvitset erityistä ohjelmallista hallintaa HTML-koodissa.

Tässä muutama hyödyllinen metodi:

• ActionLink: Käytetään luomaan ankkuri-elementti, joka sisältää URL-polun määriteltyyn ohjaimeen ja toimintaan. Esimerkiksi Html.ActionLink(linkText: "Binding", actionName: "ModelBinding", controllerName: "Home") luo tekstin "Binding", joka vie "ModelBinding"-toimintoon "Home"-ohjaimessa.

• AntiForgeryToken: Käytetään lisäämään lomakkeeseen piilotettu elementti, joka sisältää CSRF-suojauksen tunnisteen. Tämä voidaan validoida lomakkeen lähetyksessä.

• Display ja DisplayFor: Näitä käytetään luomaan HTML-muotoilua, joka vastaa nykyistä mallia ja sen näyttömallia. .NET-tyypeille on valmiita näyttömalleja, mutta voit myös luoda omia näyttömallejasi "DisplayTemplates"-kansioon.

• DisplayForModel: Tämä metodi tuottaa HTML-muotoilua koko mallille eikä vain yksittäiselle ilmaisulle.

• Editor ja EditorFor: Näitä käytetään luomaan HTML-muotoilua, joka vastaa nykyistä mallia ja sen editorimallia. .NET-tyypeille on valmiita editorimalleja, mutta voit luoda myös omia malleja "EditorTemplates"-kansioon.

• EditorForModel: Tämä metodi tuottaa HTML-muotoilua koko mallille, ei vain yksittäiselle ilmaisulle.

• Encode: Käytetään koodataksesi objektin tai merkkijonon HTML:ksi turvallisesti. Esimerkiksi, jos haluat estää mahdolliset haitalliset syötteet ja estää XSS-hyökkäykset, tämä metodi on olennainen.

Nämä menetelmät tekevät ASP.NET Core MVC:n kehityksestä tehokkaampaa ja helpompaa, mutta on tärkeää ymmärtää niiden käyttöä ja erityisesti, milloin ja miksi valita oikea lähestymistapa, erityisesti silloin, kun käytetään Razor-komponentteja tai muita erikoistilanteita, joissa Tag Helperit eivät ole käytettävissä.

Endtext

Miten luoda web-käyttöliittymiä ASP.NET Corella ja Blazor WebAssemblyllä?

ASP.NET Core tarjoaa käyttäjäystävällisiä ratkaisuja web-käyttöliittymien luomiseen. Razor-näkymät ja niiden syntaksi ovat keskeisiä työkaluja, joiden avulla voidaan luoda dynaamisia HTML-sivuja. Razor-syntaksi yhdistää C#-koodin HTML:ään, jolloin luodaan tehokkaita ja ylläpidettäviä verkkosovelluksia. Tämä syntaksi on intuitiivinen ja mahdollistaa koodin yhdistämisen suoraan HTML:ään ilman suuria lisäkerroksia, mikä tekee kehityksestä nopeampaa ja virheiden löytämisestä helpompaa.

Tag Helperit ja HTML Helperit ovat kaksi erilaista lähestymistapaa, joita ASP.NET Core tarjoaa. Tag Helperit ovat moderni ja suositeltava tapa luoda HTML-elementtejä dynaamisesti. Ne mahdollistavat koodin ja HTML:n integroinnin niin, että koodi on helposti luettavissa ja ymmärrettävissä. Tag Helperit tunnistaa erityiset attribuutit, kuten asp-for tai asp-action, jotka auttavat luomaan dynaamisia HTML-elementtejä ilman liiallisia koodirivejä. HTML Helperit, vaikka ne ovat vanhempia ja vähemmän intuitiivisia, ovat edelleen käytössä tietyissä tapauksissa, mutta niiden käyttö on vähenemässä modernin Tag Helperin myötä.

Blazor WebAssembly tuo uuden ulottuvuuden web-kehitykseen. Tämä teknologia mahdollistaa .NET-ympäristön käyttöä suoraan selaimessa ilman JavaScriptiä. Blazor WebAssemblyn avulla voidaan rakentaa yksinkertaisia ja monimutkaisempia web-sovelluksia, jotka toimivat täysin selaimessa, ilman että palvelimelle tehdään jatkuvia pyyntöjä. Tämä parantaa sovelluksen nopeutta ja responsiivisuutta, ja se voi jopa toimia offline-tilassa.

Blazor WebAssemblyn etuja ovat muun muassa offline-tila ja asiakaspään prosessoinnin mahdollisuus. Tämä vähentää palvelimen kuormitusta ja parantaa skaalautuvuutta, koska suurin osa prosessoinnista tapahtuu käyttäjän laitteella. Lisäksi Blazor WebAssembly tukee monia modernin webin ominaisuuksia, kuten dynaamisia komponentteja ja tilaustekniikoita, jotka voivat parantaa käyttäjäkokemusta. Näitä voivat olla esimerkiksi vuorovaikutteiset käyttöliittymät ja reaaliaikaiset päivitykset ilman koko sivun lataamista.

Blazor tarjoaa myös muita mielenkiintoisia käyttötilanteita. Esimerkiksi Blazor Server mahdollistaa sovelluksen ajamisen palvelimella, jolloin käyttöliittymän päivitykset lähetetään käyttäjälle SignalR:n kautta. Tämä tarjoaa nopean aloitusajan ja täydellisen pääsyn palvelinpuolen resursseihin, kuten tietokantoihin, mutta sillä on omat rajoituksensa, kuten verkon viiveet ja jatkuva yhteys palvelimeen. Blazor Hybrid puolestaan mahdollistaa .NET-koodin ajamisen natiivissa sovelluksessa, mikä voi olla hyödyllistä, jos tarvitaan pääsyä laitteen natiiveihin ominaisuuksiin, kuten kameraan tai paikannukseen.

Blazor WebAssemblyn käyttöön liittyy kuitenkin myös haasteita, erityisesti sen rajoitukset ja yhteensopivuusongelmat erilaisten selainten kanssa. Vaikka .NET 6 ja sitä uudemmat versiot tarjoavat pääsyn laajaan API-arkistoon, Blazor WebAssembly toimii selaimen hiekka-alueella, mikä tarkoittaa, että tietyt API:t eivät ole tuettuja. Tämä voi johtaa virheisiin, jos kehittäjä yrittää käyttää selaimen rajoittamia toimintoja. Tämän estämiseksi voidaan käyttää selainyhteensopivuusanalysoijia, jotka varoittavat ei-tuetuista API-kutsuista ennen kuin koodi ajetaan selaimessa.

Blazor WebAssemblyn sovelluksia voi myös isännöidä monin tavoin. Yksi vaihtoehto on julkaista Blazor WebAssembly -asiakassovellus staattiselle web-palvelimelle, kuten Azure Static Web Apps -palveluun. Toinen vaihtoehto on isännöidä koko Blazor WebAssembly -sovellus palvelimella, jolloin palvelin voi tarjota lisäpalveluita ja resursseja asiakassovellukselle.

Miten käsitellä päivämääriä, aikoja ja kansainvälistämistä .NET:ssä

Kun käsitellään päivämääriä ja aikoja ohjelmoinnissa, erityisesti .NET-ympäristössä, tulee ottaa huomioon useita tekijöitä, kuten aikavyöhykkeet, kesäaika (DST) ja kulttuurisidonnaisuus. Erityisesti, jos työskentelee sovellusten kanssa, jotka on tarkoitettu globaaliin käyttöön, oikeiden aikojen ja päivämäärien käsittely voi olla haasteellista, koska samat päivämäärät voivat eri alueilla olla esitetty eri tavoin. Esimerkiksi, jos päivämäärä on kirjoitettu muodossa 7/4/2024, amerikkalainen kulttuuri tulkitsee sen huhtikuun 7. päiväksi, mutta brittiläinen kulttuuri voisi lukea sen heinäkuun 4. päiväksi. Tällaisten erojen välttämiseksi voidaan määrätä tarkka kulttuuri, joka ohjaa päivämäärien jäsennystä, kuten seuraavassa esimerkissä, jossa käytetään kolmannen osapuolen kulttuuria päivämäärän jäsentämiseen.

Kulttuuriin sidotut asetukset eivät rajoitu pelkästään päivämäärän ja ajan esittämiseen, vaan myös viikonpäivän nimien lokalisoimiseen. Esimerkiksi, jos haluamme saada viikonpäivän nimen tanskaksi, meidän on asetettava kulttuuriin tuki tälle kielelle ja käytettävä DateTimeFormatInfo-luokkaa. Vaikka DayOfWeek-enumeraattori itsessään on sidottu englanninkielisiin nimityksiin, voimme kuitenkin muuntaa sen kulttuuriin sopivaksi tekstiksi tämän luokan avulla. Esimerkiksi, jos määrittelemme kulttuuriksi "da-DK" ja tulostamme päivän nimen, saamme seuraavat tulokset:

yaml
Copy code
Culture: dansk (Danmark), DayOfWeek: Thursday

Culture: dansk (Danmark), DayOfWeek: torsdag

Culture: dansk (Danmark), DayOfWeek: torsdag

Uudemmissa .NET-versioissa, kuten .NET 6:ssa, on otettu käyttöön myös tyypit, jotka käsittelevät pelkkää päivämäärää tai aikaa. DateOnly ja TimeOnly luokat tarjoavat tyypillisesti paremman tavan käsitellä vain päivämäärä- tai aikatietoja. Aikaisemmin oli yleistä käyttää DateTime-objekteja, jotka sisälsivät ajan, mutta DateOnly ja TimeOnly tekevät tästä huomattavasti turvallisempaa ja selkeämpää. Esimerkiksi, kun suunnittelemme Englannin kuninkaan, Charles III:n, kruunajaisia, voimme määritellä tapahtuman päivämäärän ja ajan erikseen:

csharp
Copy code
DateOnly coronation = new(year: 2023, month: 5, day: 6);
TimeOnly starts = new(hour: 11, minute: 30);
DateTime calendarEntry = coronation.ToDateTime(starts);

Tällöin saamme tarkasti määritellyn ajan ja päivämäärän, mutta pelkkä TimeOnly ei ole riittävä, jos emme tiedä aikavyöhykettä. Aikavyöhykkeiden hallinta on erityisen tärkeää, sillä ilman aikavyöhyketietoa emme voi taata oikeita aikoja eri maissa.

java
Copy code
DateTime utcTime = DateTime.UtcNow;
DateTime localTime = utcTime.ToLocalTime();

Tämä mahdollistaa ajankäsittelyn tarkasti ja joustavasti eri aikavyöhykkeissä. On tärkeää huomata, että vaikka .NET tarjoaa monia työkaluja aikojen ja aikavyöhykkeiden käsittelyyn, kehittäjän on aina otettava huomioon käyttäjän paikallinen aika ja mahdollinen kesäajan muutokset. Aikavyöhykkeet voivat myös muuttua lainsäädännön tai alueellisten päätösten takia, kuten Yhdysvalloissa käytävän keskustelun myötä, jossa pohditaan, pitäisikö kesäaika tehdä pysyväksi. Tämä voi johtaa lisääntyvään monimutkaisuuteen, erityisesti amerikkalaisille käyttäjille, joiden on ehkä käsiteltävä alueellisia eroja.

Eri aikavyöhykkeiden ja kesäajan käsittelyssä voi syntyä virheitä, jos kehittäjä ei ole tarkka aikavyöhykkeiden määrittelyssä ja käytössä. Lisäksi on tärkeää muistaa, että päivämäärät voivat näyttää samanlaisilta mutta olla eri aikoja, jos aikavyöhykettä ei ole määritelty tai jos käsitellään vain paikallista aikaa ilman aikavyöhyketietoa. Tällöin käyttäjälle voi tulla virheellisiä aikoja, ja tapahtumat voivat olla väärässä ajassa.

Miten käyttää ODataa Visual Studio Code -projektissa: Käytännön ohjeet

OData (Open Data Protocol) on avoin protokolla, joka mahdollistaa tietojen jakamisen ja hakemisen webin kautta. Tämän protokollan avulla voidaan luoda tehokkaita ja joustavia rajapintoja, joiden avulla asiakasohjelmat voivat kommunikoida tietokantojen kanssa. ODataa voidaan käyttää monella tavalla, mutta tässä esitetään vaiheittainen opas siitä, miten luodaan OData-asiakasprojektia Visual Studio Codessa ja miten luodaan yhteys OData-palveluun MVC-sovelluksessa.

Seuraavaksi rakennamme Northwind.OData.Client.Mvc -projektin ja avaamme launchSettings.json -tiedoston Properties-kansiossa. Tässä vaiheessa on tärkeää muokata applicationUrl-asetusta niin, että käytämme HTTPS-porttia 5102 seuraavasti:

json
Copy code
"applicationUrl": "https://localhost:5102"

Tämän jälkeen luomme uuden luokan ODataProducts.cs Models-kansioon. Tämä luokka määrittelee, miten tuotteet haetaan OData-palvelusta:

csharp
Copy code
using Packt.Shared;
namespace Northwind.OData.Client.Mvc.Models;
public class ODataProducts {
   public Product[]? Value { get; set; }
}

Seuraava vaihe on lisätä tarvittavat nimikirjastot Program.cs-tiedostoon HTTP-otsikoiden määrittämiseksi. Tässä määrittelemme MediaTypeWithQualityHeaderValue -luokan, joka varmistaa, että palvelin käsittelee JSON-vastauksia:

csharp
Copy code
using System.Net.Http.Headers;

Sen jälkeen lisäämme HTTP-asiakkaan, joka lähettää JSON-vastauksia OData-palveluun seuraavasti:

csharp
Copy code
builder.Services.AddHttpClient(name: "Northwind.OData", configureClient: options => {
   options.BaseAddress = new Uri("https://localhost:5101/");
   options.DefaultRequestHeaders.Accept.Add(
       new MediaTypeWithQualityHeaderValue("application/json", 1.0));
});

OData-palveluiden kutsuminen MVC-sovelluksessa

Kun perusasetukset on tehty, voimme siirtyä seuraavaan vaiheeseen: OData-palveluiden kutsuminen HomeController.cs-ohjaimessa. Ensiksi lisäämme kentän, joka tallentaa rekisteröidyn HTTP-asiakastehtaan:

csharp
Copy code
protected readonly IHttpClientFactory clientFactory;

Seuraavaksi, HomeController-luokan konstruktorissa, siirrämme ja tallennamme HTTP-asiakasrakenteen:

csharp
Copy code
public HomeController(ILogger logger, IHttpClientFactory clientFactory) {
   _logger = logger;
   this.clientFactory = clientFactory;
}

Sitten muutamme Index-metodin asynkroniseksi ja lisäämme koodin, joka kutsuu OData-palvelua ja hakee tuotteet, joiden nimet alkavat "Cha"-kirjaimilla. Tulokset tallennetaan ViewData-sanakirjaan, joka välittää ne näkymään:

csharp
Copy code
public async Task Index(string startsWith = "Cha") {

   try {
      HttpClient client = clientFactory.CreateClient(name: "Northwind.OData");
      HttpRequestMessage request = new(HttpMethod.Get, "catalog/products/?$filter=startswith(ProductName, '" + startsWith + "')&$select=ProductId,ProductName,UnitPrice");
      HttpResponseMessage response = await client.SendAsync(request);
      ViewData["startsWith"] = startsWith;
      ViewData["products"] = (await response.Content.ReadFromJsonAsync<ODataProducts>())?.Value;
   }
   catch (Exception ex) {
      _logger.LogWarning($"Northwind.OData service exception: {ex.Message}");
   }
   return View();
}

Näkymässä, Views/Home/Index.cshtml-tiedostossa, poistamme vanhan HTML-rakenteen ja luomme uuden, joka renderöi tuotteet ja antaa kävijälle mahdollisuuden syöttää tuotteen nimen aloitusosa:

html
Copy code
@using Packt.Shared

@{
   ViewData["Title"] = "Home Page";
   Product[]? products = ViewData["products"] as Product[];
}
<h1>@ViewData["Title"]</h1>
@if (products is not null) {
   <p>Products that start with '@ViewData["startsWith"]' using OData:</p>
   @if (products.Length == 0) {
      <p>No products found.</p>
   } else {
      <ul>
         @foreach (Product p in products) {
            <li>@p.ProductId - @p.ProductName - @(p.UnitPrice is null ? "" : p.UnitPrice.Value.ToString("c"))</li>
         }
      </ul>
   }
}
<form method="get">
   <label>Product name starts with:</label>
   <input type="text" name="startsWith" value="@ViewData["startsWith"]" />

   <button type="submit">Press ENTER to search.</button>

</form>

Kun kaikki on valmiina, käynnistämme Northwind.OData.Service -projektin ilman virheenkorjausta ja sitten Northwind.OData.Client.Mvc -projektin. Avaa Chrome-selain ja siirry osoitteeseen https://localhost:5102. Tämän jälkeen voidaan tarkastella, että OData-palvelu palauttaa kolme tuotetta, joiden nimet alkavat "Cha".

Tarkastelemme myös SQL-komentoa, joka suoritetaan OData-palvelussa, sekä HTTP-pyyntöä ja -vastausta, joka lähetetään ja vastaanotetaan MVC-sovelluksen kautta.

Jos kirjoitetaan esimerkiksi "b" hakukenttään ja painetaan Enter, tuloksena näkyy vain yksi tuote, "Boston Crab Meat". Jos kirjoitetaan "d" ja painetaan Enter, saamme virheilmoituksen, koska ei ole tuotteita, joiden nimi alkaisi kirjaimella "d".

Lisättävää ja huomioitavaa

http
Copy code
GET https://localhost:5101/catalog/products?$filter=contains(ProductName, 'ch') and UnitPrice lt 44.95&$orderby=Supplier/Country,UnitPrice&$select=ProductName,UnitPrice&$expand=Supplier