Omaloodud elemendid (UserControl) ASP.Net'is: Difference between revisions

From ICO wiki
Jump to navigationJump to search
 
Line 22: Line 22:
}
}
</pre>
</pre>
Lisaks peame tekitama protseduuri nupu klikile reageerimiseks. Kui keegi klikib nupule, siis muudame ära<span lang="EN-US" style="mso-ansi-language: EN-US"> <span class="SpellE">labeli</span></span> teksti vastavalt tekstikastis olevale jutule.
Lisaks peame tekitama protseduuri nupu klikile reageerimiseks. Kui keegi klikib nupule, siis muudame ära labeli teksti vastavalt tekstikastis olevale jutule.
 
<pre>
<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt">protected void bOK_Click(object sender, EventArgs e)</font></span></span>
protected void bOK_Click(object sender, EventArgs e)
 
{
<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt">{</font></span></span>
lblInf.Text = "Sa kirjutasid tekstikast: " + txtKast.Text;
 
}
<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt">lblInf.Text = "Sa kirjutasid tekstikast: " + txtKast.Text;</font></span></span>
</pre>
 
<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt">}</font></span></span>
 
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 42: 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%>


<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"><%@ </font></span></span><span class="koodisna"><span lang="EN-GB" style="mso-bidi-font-size: 12.0pt; mso-ansi-language: EN-GB"><font size="10.0pt">Control Language="C#" AutoEventWireup="true" CodeFile="kk.ascx.cs" Inherits="kk</font></span></span><span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt">" %></font></span></span>
<asp:TextBox ID="txtKast" runat="server" />
 
<asp:Button ID="bOK" runat="server" Text="Klõpsa siia" OnClick="bOK_Click" />
<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"><asp:TextBox ID="txtKast" runat="server" /><br /></font></span></span>
 
<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"><asp:Button ID="bOK" runat="server" Text="Klõpsa siia" OnClick="bOK_Click" /><br /></font></span></span>
 
<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"><asp:Label </font></span></span><span class="koodisna"><span lang="SV" style="mso-bidi-font-size: 12.0pt; mso-ansi-language: SV"><font size="10.0pt">ID="lblInf</font></span></span><span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt">" runat="server" /></font></span></span>


<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;


<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt">using </font></span></span><span class="koodisna"><span lang="EN-GB" style="mso-bidi-font-size: 12.0pt; mso-ansi-language: EN-GB"><font size="10.0pt">System</font></span></span><span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"><nowiki>;</nowiki></font></span></span>
public partial class kk : System.Web.UI.UserControl
 
<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt">using </font></span></span><span class="koodisna"><span lang="EN-GB" style="mso-bidi-font-size: 12.0pt; mso-ansi-language: EN-GB"><font size="10.0pt">System</font></span></span><span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt">.</font></span></span><span class="koodisna"><span lang="EN-GB" style="mso-bidi-font-size: 12.0pt; mso-ansi-language: EN-GB"><font size="10.0pt">Web</font></span></span><span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt">.</font></span></span><span class="koodisna"><span lang="EN-GB" style="mso-bidi-font-size: 12.0pt; mso-ansi-language: EN-GB"><font size="10.0pt">UI</font></span></span><span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"><nowiki>;</nowiki></font></span></span>
 
<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt">public </font></span></span><span class="koodisna"><span lang="EN-GB" style="mso-bidi-font-size: 12.0pt; mso-ansi-language: EN-GB"><font size="10.0pt">partial</font></span></span><span class="koodisna"><span lang="EN-GB" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"> </font></span></span><span class="koodisna"><span lang="EN-GB" style="mso-bidi-font-size: 12.0pt; mso-ansi-language: EN-GB"><font size="10.0pt">class</font></span></span><span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"> kk : </font></span></span><span class="koodisna"><span lang="EN-GB" style="mso-bidi-font-size: 12.0pt; mso-ansi-language: EN-GB"><font size="10.0pt">System.Web.UI.UserControl</font></span></span><span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"></font></span></span>
 
<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt">{</font></span></span>


<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"><span style="mso-spacerun: yes">    </span>protected void Page_Load(object sender, </font></span></span><span class="koodisna"><span lang="EN-GB" style="mso-bidi-font-size: 12.0pt; mso-ansi-language: EN-GB"><font size="10.0pt">EventArgs</font></span></span><span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"> e)</font></span></span>
{


<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"><span style="mso-spacerun: yes">    </span>{</font></span></span>
protected void Page_Load(object sender, EventArgs e)


<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"><span style="mso-spacerun: yes">        </span></font></span></span><span class="koodisna"><span lang="EN-GB" style="mso-bidi-font-size: 12.0pt; mso-ansi-language: EN-GB"><font size="10.0pt">if</font></span></span><span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"> (!Page.IsPostBack)</font></span></span>
{


<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"><span style="mso-spacerun: yes">            </span>lblInf.Text = "";</font></span></span>
if (!Page.IsPostBack)


<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"><span style="mso-spacerun: yes">    </span>}</font></span></span>
lblInf.Text = "";


<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"><span style="mso-spacerun: yes">    </span>protected void bOK_Click(object sender, </font></span></span><span class="koodisna"><span lang="EN-GB" style="mso-bidi-font-size: 12.0pt; mso-ansi-language: EN-GB"><font size="10.0pt">EventArgs</font></span></span><span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"> e)</font></span></span>
}


<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"><span style="mso-spacerun: yes"> </span><span style="mso-spacerun: yes">  </span>{</font></span></span>
protected void bOK_Click(object sender, EventArgs e)


<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"><span style="mso-spacerun: yes">        </span>lblInf.Text = "Sa kirjutasid tekstikast: " + txtKast.Text;</font></span></span>
{


<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"><span style="mso-spacerun: yes">    </span>}</font></span></span>
lblInf.Text = "Sa kirjutasid tekstikast: " + txtKast.Text;


<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt">}</font></span></span>
}


}
</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>
<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"><%@ Register Src="kk.ascx" TagName="kk" TagPrefix="kool" %></font></span></span>
<%@ 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:


<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"><</font></span></span><span class="koodisna"><span lang="SV" style="mso-bidi-font-size: 12.0pt; mso-ansi-language: SV"><font size="10.0pt">kool:kk</font></span></span><span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"> ID="Kk1" runat="server" /></font></span></span>
<pre>
 
<kool:kk ID="Kk1" runat="server" />
Antud juhul võiks selleks kohaks olla<span lang="EN-US" style="mso-ansi-language: EN-US"> Content</span> element default.aspx lehel. Kuna kogu eelnev funktsionaalsus sai KK’sse üle viidud, siis võiks kogu ülejäänud sisu<span lang="EN-US" style="mso-ansi-language: EN-US"> Content</span> elemendi seest ära kustutada. Ühtlasi tuleks kustutada ka kogu kood default.aspx.cs seest e. alles jääb vaid tühi klass.
</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.
<span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt">public </font></span></span><span class="koodisna"><span lang="EN-GB" style="mso-bidi-font-size: 12.0pt; mso-ansi-language: EN-GB"><font size="10.0pt">partial class</font></span></span><span class="koodisna"><span lang="EN-US" style="mso-bidi-font-size: 12.0pt"><font size="10.0pt"> _Default : System.Web.UI.Page{}</font></span></span>
<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 09: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.