ASP.NET MVC - HTML-välineet

HTML-välineitä käytetään HTML-lähtöveden muokkaamiseen.

HTML-välineet

MVC:n kautta HTML-välineet ovat samankaltaisia kuin perinteiset ASP.NET Web Form -kontrollit.

Kuten ASP.NET:n web form -kontrollit, HTML-välineet käytetään HTML:n muokkaamiseen. Mutta HTML-välineet ovat kevyempiä. Eri kuin web form -kontrollit, HTML-välineillä ei ole tapahtumamallia eikä view state -ominaisuutta.

Useimmissa tapauksissa HTML-välineet ovat vain metodeja, jotka palauttavat merkkijonon.

MVC:n kautta voit luoda omia välineitä tai käyttää sisäänrakennettuja HTML-välineitä.

Standardivälineet

MVC sisältää useimmat yleisimmät HTML-elementtien tyyppien standardivälineitä, kuten HTML-linkit ja HTML-lomakkeen elementit.

HTML-linkki

HTML-linkin esittämisessä yksinkertaisin tapa on käyttää Html.ActionLink() apuvälinettä.

MVC:n kautta Html.ActionLink() ei liity näkymään. Se luo yhteyden ohjelmointityökalun toimintoon (controller action).

Razor-kieli:

@Html.ActionLink("About this Website", "About")

ASP-kieli:

<%=Html.ActionLink("About this Website", "About")%>

Ensimmäinen parametri on linkin teksti, toinen parametri on ohjelmiston toiminnon nimi.

Yllä oleva Html.ActionLink()-avustaja tuottaa seuraavan HTML:n:

<a href="/Koti/OmastaSivustosta">Tietoja tästä sivustosta</a>

Html.ActionLink()-avustajan monet parametrit:

Parametrit Kuvaus
linkText Linkin sisäinen teksti.
actionName Toiminnon nimi.
controllerName Ohjaimen nimi.
protocol URL:n protokolla, kuten "http" tai "https".
hostname URL:n isäntänimi.
fragment URL-osa (lokasivun nimi).
routeValues Objekti, joka sisältää reititysparametrit.
htmlAttributes Objekti, joka sisältää HTML-ominaisuudet, jotka haluat asettaa elementille.

Huomautus:Voit välittää arvoja ohjelmistolle. Esimerkiksi voit välittää tietokannan tietueen id:n tietokannan muokkausoperatiolle.

Razor-kieli C#:

@Html.ActionLink("Muokkaa Tietuetta", "Muokkaa", new {Id=3})

Razor-kieli VB:

@Html.ActionLink("Muokkaa Tietuetta", "Muokkaa", New With{.Id=3})

Yllä oleva Html.ActionLink()-avustaja tuottaa seuraavan HTML:n:

<a href="/Koti/Muokkaa/3">Muokkaa Tietuetta</a>

HTML-lomakkeen elementit

Seuraavat HTML-apuvälineet voidaan käyttää (muokata ja näyttää) HTML-lomakkeen elementtejä:

  • AloitaLomake()
  • LopetaLomake()
  • Tekstialue()
  • Tekstikenttä()
  • Valintaruutu()
  • Radiopainike()
  • Luettelo()
  • Lajitteluvalikko()
  • Piilotettu()
  • Salasana()

ASP.NET kieli C#:

<%= Html.ValidationSummary("Lisääminen epäonnistui. Korjaa virheet ja 
yritä uudelleen.") %>
<% using (Html.BeginForm()){%>
<p>
<label for="Nimi">Nimi:</label>
<%= Html.TextBox("FirstName") %>
<%= Html.ValidationMessage("FirstName", "*") %>
</p>
<p>
<label for="LastName">Sukunimi:</label>
<%= Html.TextBox("LastName") %>
<%= Html.ValidationMessage("LastName", "*") %>
</p>
<p>
<label for="Password">Salasana:</label>
<%= Html.Password("Password") %>
<%= Html.ValidationMessage("Password", "*") %>
</p>
<p>
<label for="Password">Vahvista salasana:</label>
<%= Html.Password("ConfirmPassword") %>
<%= Html.ValidationMessage("ConfirmPassword", "*") %>
</p>
<p>
<label for="Profile">Profiili:</label>
<%= Html.TextArea("Profile", new {cols=60, rows=10})%>
</p>
<p>
<%= Html.CheckBox("ReceiveNewsletter") %>
<label for="ReceiveNewsletter" style="display:inline">Viesti uutiskirjeeseen?</label>
</p>
<p>
<input type="submit" value="Register" />
</p>
<%}%>