Navigimi në faqe

Ka disa mënyra se si mund të navigosh nga një faqe në një tjetër në ASP.NET. Disa nga metodat
për ta realizuar këtë janë:

● Client-side navigation Kodi në klient bën kërkesë për një faqe Web në përgjigje të një
eventi të tillë si klikimi i një linku ose ekzekutimi i Javascript si pjesë e një klikimi
butoni.
● Cross-page posting Një kontroll dhe një formë konfigurohen që të kryejnë PostBack në
një faqe tjetër nga ajo që bëri kërkesën origjinale.
● Client-side browser redirect Kodi server-side dërgon një mesazh në browser, duke
informuar browser që të kërkojë një tjetër faqe web nga serveri.
● Server-side transfer Kodi Server-side transferon kontrollin e kërkesës në një tjetër faqe
web.

Client-Side Navigation

Një prej mënyrave më të thjeshta për të naviguar në një tjetër faqe Web është që të vendosim një
kontroll të tipit HyperLink në formën tonë dhe gjithashtu të përcaktojmë karakteristikën
NavigateUrl ​sipas destinacionit të dëshiruar. Kontrolli HyperLink gjeneron një tag HTML <a>.
Atributi ​NavigateUrl do të përkonte me atributin href të një elementi <a>. Shembulli i
mëposhtëm tregon kodin e një kontrolli HyperLink dhe mënyrën se si renderohet në HTML:

HyperLink Control: Source

<asp:HyperLink ID="HyperLink1"
runat="server" NavigateUrl="~/NavigateTest2.aspx">Goto NavigateTest2</asp:HyperLink>

HyperLink Control: Rendered HTML

<a id="HyperLink1" href="NavigateTest2.aspx">Goto NavigateTest2</a>

Cross-Page Posting

Cross-page posting dëshirohet në një skenar ku të dhënat ruhen në një faqe web dhe procesohen
në një tjetër faqe web që shfaq rezultatet. Në një skenar të tillë, një kontroll Button e ka atributin
PostBackUrl të vendosur drejt faqes web ku duhet të postohen të dhënat. Faqja në të cilën do të
bëhet PostBack do të marrë dhe të dhënat e postuara, kjo quhet ndryshe dhe faqja procesuese.
Faqja procesuese shpesh ka nevojë që të aksesojë të dhënat që përmbaheshin brenda faqes
iniciuese. Të dhënat e faqes së mëparshme janë të disponueshme brenda atributit
Page.PreviousPage​. Ky atribut caktohet vetëm nëse ndodh një postim cross-page. Ju mund të
aksesoni kontrollet që ndodhen në faqen e mëparshme duke përdorur metodën ​FindControl​.

Shembulli i mëposhtëm bën të mundur navigimin nga faqja Navig1.aspx në faqen Navig2.aspx
në klikim të një butoni me id “button1” nëse përdoruesi ka vendosur të dhëna në TextBox e faqes
Navig1.aspx, ato do të afishohen në një kontroll Label në faqen Navig2.aspx.

Navig1.aspx

<form id="form1" runat="server">

<asp:TextBox ID="TextBox1" runat="server" Text=""></asp:TextBox> <br />
<asp:Button ID="button1" Runat="server" Text="submit" PostBackUrl="~/Navig2.aspx"
/> <br />
</form>

Navig2.aspx.cs

protected void Page_Load(object sender, EventArgs e)

{
if (PreviousPage != null && PreviousPage.IsCrossPagePostBack)
{
TextBox text = PreviousPage.FindControl("TextBox1") as TextBox;
if ( !string.IsNullOrEmpty(text.Text) )
{
Label1.Text = text.Text;
}
else
{
Label1.Text = "Teksti nuk ka vlere";
}
}
else
{
Label1.Text = "Nuk ka PreviousPage";
}
}
Shfaqja në browser

Pas klikimit të butonit submit përgjigjia do të shfaqej në Navig2.aspx

Client-Side Browser Redirect

Shpesh herë ju duhet të ridrejtoni përdoruesit në një faqe tjetër bazuar mbi rezultatet e kërkesës
së tyre. Objekti ​ Page.Response ​përmban metodën ​Redirect ​që bën të mundur realizimin e këtij
ridrejtimi.

Në shembullin e mëposhtëm jepet forma që përmban një TextBox dhe një button ( Navig1.aspx)
në klikim do të bëhet ridrejtimi nëpërmjet metodës ​Redirect gjithashtu​ si parametër në url kalojmë
vlerën e fushës së tekstit, e cila afishohet më pas në një label në faqen ( Navig2.aspx)
Kodi
Navig1.aspx

<form id="form1" runat="server">

<asp:Label ID="Lbl1" runat="server" Text="Email:"></asp:Label>
<asp:TextBox ID="Email" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Abonohu"
OnClick="ButtonSubmit_Click" />
</form>

Navig1.aspx.cs
protected void ButtonSubmit_Click(object sender, EventArgs e)
 { var email = Email.Text;
Response.Redirect("Navig2.aspx?email="+ email ); }

Navig2.aspx

<form id="form1" runat="server">

<div>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</div>
</form>

Navig2.aspx.cs

protected void Page_Load(object sender, EventArgs e)

{

var pergjigjeEmail = Server.HtmlEncode(Request.QueryString["email"]);

Response.Write("Email juaj eshte:" + pergjigjeEmail);

}

Shfaqja në browser

Pas klikimit të butonit Abonohu, vini re parametrat që shfaqen në url

Server-Side Transfer
Ekzistojnë situata ku ​ju mund të keni nevojë të transferoni të gjithë procesimin e një faqeje web
në një faqe tjetër. Këro skenare janë të rralla dhe kanë tendencën të shkaktojnë konfuzion në
kodin dhe aplikacionin tuaj megjithatë mund të ketë raste kur ju dëshironi të fshehni emrin e
faqes ose query stringje të saj. Ju mund ta realizoni duke përdorur metodën
Page.Server.Transfer​. Kjo metodë transferon të gjithë përmbajtjen e një faqeje web në një faqe
tjetër. Faqja që merr transfertën gjeneron një përgjigje në browser e përdoruesit duke bërë të
mundur që adresa e internetit të përdoruesit në browser e tij të mos i shfaqë rezultatet e
transfertës. Pra address bar i përdoruesit mbetet me emrin origjinal të faqes që bëri kërkesën.

Vini re shembullin e mëposhtëm, në faqen ​Navig1.aspx ​vendosim kodin

<form id="form1" runat="server">

<asp:Label ID="Lbl1" runat="server" Text="Testim pë Navig1"></asp:Label>
</form>

Në faqen​ ​Navig1.aspx.cs​ kodin:

​protected void Page_Load(object sender, EventArgs e)
{
Server.Transfer("Navig2.aspx?Test=SomeValue");
}

Në faqen ​Navig2.aspx​ kodin :

<form id="form1" runat="server">

<div>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</div>
</form>

Dhe në faqen​ Navig2.aspx.cs kodin:

protected void Page_Load(object sender, EventArgs e)
{
var pergjigje = Server.HtmlEncode(Request.QueryString["Test"]);
Response.Write("Parametra:" + pergjigje);
}

Thërritja në browser e ​Navig1.aspx​ do të afishonte rezultatin e mëposhtëm

Vini re se si përmbajtja e faqes do të përbëhet nga rezultati i afishimit që kryhet nga
Navig2.aspx ndërsa url shfaqet si Navig1.aspx

Përdorimi i kontrolleve të Navigimit dhe Master Page.

Deri tani pamë disa nga metodat për navigimin e përdoruesve nga një faqe në një tjetër duke
përdorur teknika si në anën e klientit dhe të serverit. ASP.NET siguron kontrolle që ju ndihmojnë
të menaxhoni dhe siguroni një strukturë naviguese dhe tja shfaqni atë përdoruesve.

1. Shtojmë një file sitemap në website duke klikuar me të djathtën mbi projekt dhe duke
selektuar ​Add​→​ Add New Item ​→​ Site Map​ , lëreni emërtimin siç është:

2. Modifikoni përmbajtjen e file duke shtuar kodin e mëposhtëm:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="Home.aspx" title="Home" description="">
<siteMapNode url="Kontakt.aspx" title="Kontakt" description=""/>
<siteMapNode url="Regjistrim.aspx" title="Regjistrohu" description="" />
<siteMapNode url="Kategori.aspx" title="Kategori" description="" >
<siteMapNode url="VeshjeF.aspx" title="Veshje Femra" description="" />
<siteMapNode url="VeshjeM.aspx" title="Veshje Meshkuj" description="" />
</siteMapNode>
</siteMapNode>
</siteMap>
Do të ndërtojmë një kontroll Menu të cilën duam ta shfaqim në të gjitha file e website për këtë
do të përdorim Master pages, benefiti më i madh i këtyre të fundit është që ju lejojnë të
përcaktoni mënyrën se si do të duken faqet në një vendodhje të vetme. Kjo do të thotë që nëse
duam të modifikojmë psh menu nga e majta në të djathtë, mund të modifikojmë vetëm master
page dhe në faqet që bazohen mbi këtë master reflektohen menjëherë ndryshimet automatikisht.

3. Për të krijuar një Master page, klikoni me të djathtën mbi projekt dhe duke selektuar ​Add​→
Add New Item ​→​ Master Page
4. Brenda MasterPage.master vendosni kodin e mëposhtëm me të kuqe, ku është deklaruar një
kontroll ​Menu dhe gjithashtu një kontroll i tipit ​SiteMapDataSource i cili bën të mundur
tërheqjen e të dhënave nga sitemap dhe kalimin e tyre drejt kontrolleve që mund ti shfaqin si
Menu, TreeView, SiteMapPath.. Këtu kemi përcaktuar disa stile për arsye demostrative duke i
vendosur në tagun <style>, megjithatë praktikë e mirë do të ishte ndërtimi i një file të jashtëm
stile.css dhe thërritja brenda këtij file.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style>
ul{
background-color:burlywood;
min-width: 160px;
}
a{
color:white;
}
</style>

</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="Menu1" runat="server" staticdisplaylevels="2"
orientation="Horizontal" DataSourceID="SiteMapDataSource1" ></asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
5. Tashmë duhet të krijoni një faqe .aspx e cila do të lidhet me këtë master page, kujdes bëni
check ​Select master page.
6. Do tju shfaqet dritarja më poshtë, po të vini re me kujdes është master page që sapo krijuam
selektojeni dhe shtypni OK.
7. Në të njëjtën mënyrë krijoni edhe faqet e tjera të përcaktuara në sitemap si ​ Home.aspx,
Kontakt.aspx, Kategori.aspx, VeshjeF.aspx, VeshjeM.aspx.
8. Bëni run projektit dhe do të vini re pamjen e mëposhtme të menusë për Home.aspx, menuja
do të shfaqej njësoj për secilën nga faqet e tjera që keni krijuar.

Në të njëjtën mënyrë do të funksiononte edhe kontrolli TreeView nëse do të vendosej në master

page.
<asp:TreeView ID="TreeView1" DataSourceID="SiteMapDataSource1" runat="server"></asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
Shfaqja në browser e TreeView

Kontrolli SiteMapPath

<asp:SiteMapPath ID="SiteMapPath1" runat="server" DataSourceID="SiteMapDataSource1"

></asp:SiteMapPath>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
Shfaqja në browser e SiteMapPath