Omaloodud elemendid (UserControl) ASP.Net'is: Difference between revisions
(One intermediate revision by one other user not shown) | |||
Line 8: | Line 8: | ||
Näiteks lisame oma veebilehele lisaks sildile veel tekstikasti ja nupu ning ütleme, et me soovime reageerida sündmusele, kui keegi klikib sellel nupul. Peale seda väikest täiendust näeb default.aspx<span lang="EN-US" style="mso-ansi-language: EN-US"> content</span> elemendi sisu välja järgmine: | Näiteks lisame oma veebilehele lisaks sildile veel tekstikasti ja nupu ning ütleme, et me soovime reageerida sündmusele, kui keegi klikib sellel nupul. Peale seda väikest täiendust näeb default.aspx<span lang="EN-US" style="mso-ansi-language: EN-US"> content</span> elemendi sisu välja järgmine: | ||
<pre> | |||
< | <asp:TextBox ID="txtKast" runat="server" /><br /> | ||
<asp:Button ID="bOK" runat="server" Text="Klõpsa siia" OnClick="bOK_Click" /><br /> | |||
<asp:Label ID="lblInf" runat="server" /> | |||
</pre> | |||
Nüüd tuleb teha ka väikesed täiendused lehekülje koodis default.aspx.cs. Esmalt muudame ära Page_Load sündmuse, kus ütleme, et kui sellele leheküljele tullakse 1. korda, siis tuleb<span lang="EN-US" style="mso-ansi-language: EN-US"> <span class="SpellE">labeli</span></span> sisu ära kustutada. Kui sama sessiooni ajal tullakse lehele 2st, 3ndat jne korda, siis ei tehta midagi. Lehekülje objekti küljes olev omadus IsPostBack on<span lang="EN-US" style="mso-ansi-language: EN-US"> true</span>, kui ei olda lehel esimest korda. | Nüüd tuleb teha ka väikesed täiendused lehekülje koodis default.aspx.cs. Esmalt muudame ära Page_Load sündmuse, kus ütleme, et kui sellele leheküljele tullakse 1. korda, siis tuleb<span lang="EN-US" style="mso-ansi-language: EN-US"> <span class="SpellE">labeli</span></span> sisu ära kustutada. Kui sama sessiooni ajal tullakse lehele 2st, 3ndat jne korda, siis ei tehta midagi. Lehekülje objekti küljes olev omadus IsPostBack on<span lang="EN-US" style="mso-ansi-language: EN-US"> true</span>, kui ei olda lehel esimest korda. | ||
<pre> | |||
< | protected void Page_Load(object sender, EventArgs e) | ||
{ | |||
if (!Page.IsPostBack) | |||
lblInf.Text = ""; | |||
} | |||
</pre> | |||
Lisaks peame tekitama protseduuri nupu klikile reageerimiseks. Kui keegi klikib nupule, siis muudame ära labeli teksti vastavalt tekstikastis olevale jutule. | |||
<pre> | |||
protected void bOK_Click(object sender, EventArgs e) | |||
{ | |||
Lisaks peame tekitama protseduuri nupu klikile reageerimiseks. Kui keegi klikib nupule, siis muudame ära | lblInf.Text = "Sa kirjutasid tekstikast: " + txtKast.Text; | ||
} | |||
< | </pre> | ||
Kui me nüüd avastame, et sellist tekstikasti,<span lang="EN-US" style="mso-ansi-language: EN-US"> <span class="SpellE">labeli</span></span> ja nupu interaktiivset kooslust läheb meil ka mujal vaja, siis on mõistlik see funktsionaalsus realiseerida KK abil. KK lehed e. <span lang="EN-US" style="mso-ansi-language: EN-US">.<span class="SpellE">ascx</span></span> lehed on oma ülesehituselt väga sarnased .aspx lehtedega seega on üsna tavaline, <span class="GramE">et</span> esmalt realiseeritakse mingi funktsionaalsus .aspx lehel ning seejärel teisendatakse see leht KK-ks. | Kui me nüüd avastame, et sellist tekstikasti,<span lang="EN-US" style="mso-ansi-language: EN-US"> <span class="SpellE">labeli</span></span> ja nupu interaktiivset kooslust läheb meil ka mujal vaja, siis on mõistlik see funktsionaalsus realiseerida KK abil. KK lehed e. <span lang="EN-US" style="mso-ansi-language: EN-US">.<span class="SpellE">ascx</span></span> lehed on oma ülesehituselt väga sarnased .aspx lehtedega seega on üsna tavaline, <span class="GramE">et</span> esmalt realiseeritakse mingi funktsionaalsus .aspx lehel ning seejärel teisendatakse see leht KK-ks. | ||
Line 47: | Line 39: | ||
Seega võiks meie kolme komponendiga kk.ascx näha välja järgmine: | Seega võiks meie kolme komponendiga kk.ascx näha välja järgmine: | ||
<pre> | |||
<%@Control Language="C#" AutoEventWireup="true" CodeFile="kk.ascx.cs" Inherits="kk%> | |||
<asp:TextBox ID="txtKast" runat="server" /> | |||
<asp:Button ID="bOK" runat="server" Text="Klõpsa siia" OnClick="bOK_Click" /> | |||
<asp:Label ID="lblInf" runat="server" /> | |||
</pre> | |||
Ning kood selle KK juures (failis kk.ascx.cs) näeks välja selline: | Ning kood selle KK juures (failis kk.ascx.cs) näeks välja selline: | ||
<pre> | |||
using System; | |||
using System.Web.UI; | |||
public partial class kk : System.Web.UI.UserControl | |||
{ | |||
protected void Page_Load(object sender, EventArgs e) | |||
{ | |||
if (!Page.IsPostBack) | |||
lblInf.Text = ""; | |||
} | |||
protected void bOK_Click(object sender, EventArgs e) | |||
{ | |||
lblInf.Text = "Sa kirjutasid tekstikast: " + txtKast.Text; | |||
} | |||
} | |||
</pre> | |||
Selleks, et oma värskelt loodud <span lang="FI" style="mso-ansi-language: FI">KK’d</span> kasutada, peame selle paigutama mõnele aspx lehel. Kuna tegemist ei ole raamistikku kuuluva elemendiga, tuleb see esmalt registreerida. Selleks lisame lehekülje algusesse peale Page elementi ning enne igasuguseid teisi elemente Register elemendi, milles ütleme, millises failis meie KK paikneb, ning kuidas me soovime temale viidata. | Selleks, et oma värskelt loodud <span lang="FI" style="mso-ansi-language: FI">KK’d</span> kasutada, peame selle paigutama mõnele aspx lehel. Kuna tegemist ei ole raamistikku kuuluva elemendiga, tuleb see esmalt registreerida. Selleks lisame lehekülje algusesse peale Page elementi ning enne igasuguseid teisi elemente Register elemendi, milles ütleme, millises failis meie KK paikneb, ning kuidas me soovime temale viidata. | ||
<pre> | |||
< | <%@ Register Src="kk.ascx" TagName="kk" TagPrefix="kool" %> | ||
</pre> | |||
Ning kohas, kus see KK peab paiknema, lisame vastava kirjeldusega elemendi: | Ning kohas, kus see KK peab paiknema, lisame vastava kirjeldusega elemendi: | ||
< | <pre> | ||
<kool:kk ID="Kk1" runat="server" /> | |||
Antud juhul võiks selleks kohaks olla | </pre> | ||
Antud juhul võiks selleks kohaks olla Content element default.aspx lehel. Kuna kogu eelnev funktsionaalsus sai KK’sse üle viidud, siis võiks kogu ülejäänud sisu Content elemendi seest ära kustutada. Ühtlasi tuleks kustutada ka kogu kood default.aspx.cs seest e. alles jääb vaid tühi klass. | |||
< | <pre> | ||
public partial class _Default : System.Web.UI.Page{} | |||
</pre> | |||
Sama KK’d võib ühel ja samal lehel kasutada mitmes eksemplaris ning samuti võime selle KK registreerida nii mitmele lehele kui soovime. | Sama KK’d võib ühel ja samal lehel kasutada mitmes eksemplaris ning samuti võime selle KK registreerida nii mitmele lehele kui soovime. | ||
Latest revision as of 08:18, 14 January 2012
Järgnev jutt on jällegi pärit "Andmebaasipõhiste veebirakenduste arendamine Microsoft Visual Studio 2008 ja SQL Server 2008 baasil" õppematerjalist (lk 415-417)
Omaloodud elemendid (UserControl)
Lisaks pealehtedele saab programmiloogikat jagada ka läbi isetehtud graafilise kasutajaliidese elementide (User Controls) e. kasutaja kontrollide (KK). KK on ASP.NET leht ASP.NET lehe sees. KK abil saab kapseldada mingite graafilise liidese elementide kooslust ning funktsionaalsust.
Näiteks lisame oma veebilehele lisaks sildile veel tekstikasti ja nupu ning ütleme, et me soovime reageerida sündmusele, kui keegi klikib sellel nupul. Peale seda väikest täiendust näeb default.aspx content elemendi sisu välja järgmine:
<asp:TextBox ID="txtKast" runat="server" /><br /> <asp:Button ID="bOK" runat="server" Text="Klõpsa siia" OnClick="bOK_Click" /><br /> <asp:Label ID="lblInf" runat="server" />
Nüüd tuleb teha ka väikesed täiendused lehekülje koodis default.aspx.cs. Esmalt muudame ära Page_Load sündmuse, kus ütleme, et kui sellele leheküljele tullakse 1. korda, siis tuleb labeli sisu ära kustutada. Kui sama sessiooni ajal tullakse lehele 2st, 3ndat jne korda, siis ei tehta midagi. Lehekülje objekti küljes olev omadus IsPostBack on true, kui ei olda lehel esimest korda.
protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) lblInf.Text = ""; }
Lisaks peame tekitama protseduuri nupu klikile reageerimiseks. Kui keegi klikib nupule, siis muudame ära labeli teksti vastavalt tekstikastis olevale jutule.
protected void bOK_Click(object sender, EventArgs e) { lblInf.Text = "Sa kirjutasid tekstikast: " + txtKast.Text; }
Kui me nüüd avastame, et sellist tekstikasti, labeli ja nupu interaktiivset kooslust läheb meil ka mujal vaja, siis on mõistlik see funktsionaalsus realiseerida KK abil. KK lehed e. .ascx lehed on oma ülesehituselt väga sarnased .aspx lehtedega seega on üsna tavaline, et esmalt realiseeritakse mingi funktsionaalsus .aspx lehel ning seejärel teisendatakse see leht KK-ks.
KK-l on võrreldes .aspx lehega 4 erinevust:
- faililaiend on .ascx
- Page element on asendatud Control elemendiga, millel on peaaegu samad atribuudid.
- kuna tegemist on osaga lehest, siis ei saa seal kasutada ei form elemente ega content elemente
- KK taga olev klass päritakse System.Web.UI.UserControl klassist
Seega võiks meie kolme komponendiga kk.ascx näha välja järgmine:
<%@Control Language="C#" AutoEventWireup="true" CodeFile="kk.ascx.cs" Inherits="kk%> <asp:TextBox ID="txtKast" runat="server" /> <asp:Button ID="bOK" runat="server" Text="Klõpsa siia" OnClick="bOK_Click" /> <asp:Label ID="lblInf" runat="server" />
Ning kood selle KK juures (failis kk.ascx.cs) näeks välja selline:
using System; using System.Web.UI; public partial class kk : System.Web.UI.UserControl { protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) lblInf.Text = ""; } protected void bOK_Click(object sender, EventArgs e) { lblInf.Text = "Sa kirjutasid tekstikast: " + txtKast.Text; } }
Selleks, et oma värskelt loodud KK’d kasutada, peame selle paigutama mõnele aspx lehel. Kuna tegemist ei ole raamistikku kuuluva elemendiga, tuleb see esmalt registreerida. Selleks lisame lehekülje algusesse peale Page elementi ning enne igasuguseid teisi elemente Register elemendi, milles ütleme, millises failis meie KK paikneb, ning kuidas me soovime temale viidata.
<%@ Register Src="kk.ascx" TagName="kk" TagPrefix="kool" %>
Ning kohas, kus see KK peab paiknema, lisame vastava kirjeldusega elemendi:
<kool:kk ID="Kk1" runat="server" />
Antud juhul võiks selleks kohaks olla Content element default.aspx lehel. Kuna kogu eelnev funktsionaalsus sai KK’sse üle viidud, siis võiks kogu ülejäänud sisu Content elemendi seest ära kustutada. Ühtlasi tuleks kustutada ka kogu kood default.aspx.cs seest e. alles jääb vaid tühi klass.
public partial class _Default : System.Web.UI.Page{}
Sama KK’d võib ühel ja samal lehel kasutada mitmes eksemplaris ning samuti võime selle KK registreerida nii mitmele lehele kui soovime.
Seega võiks kokkuvõtteks öelda, et läbi pealehtede MasterPage ühtlustame üldise elementide paigutuse aspx lehtedel. KK abil kapseldame kasutajaliidese elementide kooslust.
Ülesandeid
* Kasuta näites loodud kasutajakontrolli oma lehel
* Loo kontroll kahe arvu korrutamiseks. Katseta.