Jak zobrazit data mezi stránkami v ASP.NET a používat tlačítka a obrázky

V této kapitole se podíváme na způsob přenosu dat mezi stránkami v ASP.NET a jak využívat některé ovládací prvky pro interakci s uživatelem, jako jsou tlačítka a obrázky. Také se zaměříme na nastavení výchozího tlačítka a používání události Command pro lepší ovládání akcí na stránkách.

V příkladu níže, kdy se uživatel dostane na stránku „results.aspx“, zobrazíme text, který zadal na předchozí stránce, pomocí ovládacího prvku typu Label. Tento kód využívá PreviousPage.FindControl, aby získal kontrolu (TextBox) z předchozí stránky a zobrazil její hodnotu:

csharp
Copy code
protected void Page_Load(object sender, EventArgs e)

{
    if (PreviousPage != null)
    {
        TextBox txtSearch = (TextBox)PreviousPage.FindControl("TxtSearch");
        LblSearch.Text = String.Format("Hledat: {0}", txtSearch.Text);
    }
}

Tento způsob přenosu dat je sice jednoduchý, ale má své limity. Existují efektivnější způsoby, jak sdílet data mezi stránkami, například použití Cookies nebo Session proměnných. Tyto techniky budou podrobněji probrány v dalších kapitolách.

Další užitečnou funkcionalitou v ASP.NET je možnost nastavit výchozí tlačítko na stránce. Pokud máte více tlačítek, můžete určit jedno, které bude automaticky vykonáno, když uživatel stiskne klávesu Enter, místo aby musel kliknout myší. Toto je realizováno pomocí vlastnosti defaultButton formuláře. Příklad ukazuje, jak definovat dvě tlačítka a přiřadit jedno z nich jako výchozí:

html
Copy code
<asp:Button ID="Button1" runat="server" Text="Klikněte na mě" OnClick="Button1_Click" />

<asp:Button ID="Button2" runat="server" Text="Klikněte na mě také" OnClick="Button2_Click" />
<asp:Label ID="Label1" runat="server" Text="Tady se objeví výsledek." />

A následný kód na serveru:

csharp
Copy code
protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Klikli jste na Button1";
}

protected void Button2_Click(object sender, EventArgs e)

{
    Label1.Text = "Klikli jste na Button2";
}

Nastavení výchozího tlačítka pak provádíme takto:

html
Copy code
<form id="form1" runat="server" defaultbutton="Button2">

Tento způsob přizpůsobení umožňuje zjednodušit interakci s uživatelem, přičemž umožňuje přenos dat mezi různými tlačítky bez potřeby dalšího kódu pro každý klik.

Dalším rozšířením tohoto přístupu je použití události Command, která je k dispozici u tlačítek typu Button, LinkButton a ImageButton. Na rozdíl od běžné události Click, událost Command umožňuje předat konkrétní příkaz a argument k jeho zpracování. Tento přístup zjednodušuje situace, kdy máte více tlačítek, která spouští stejný kód, ale liší se podle předaných argumentů.

Například:

html
Copy code
<asp:Button ID="Button1" runat="server" CommandName="colors" CommandArgument="Red" Text="Červená" OnCommand="Button_Command" />

<asp:Button ID="Button2" runat="server" CommandName="colors" CommandArgument="Blue" Text="Modrá" OnCommand="Button_Command" />

A kód pro zpracování:

csharp
Copy code
protected void Button_Command(object sender, CommandEventArgs e)

{
    if (e.CommandName == "colors")
    {
        switch (e.CommandArgument.ToString())
        {
            case "Red":
                Label1.Text = "ČERVENÁ";
                break;
            case "Blue":
                Label1.Text = "MODRÁ";
                break;
        }
    }
}

Tento způsob přenosu dat pomocí události Command je efektivní, protože ušetříte čas a prostor, který by jinak zabíralo psaní kódu pro každé tlačítko zvlášť. Všechny tlačítka mohou volat stejný kód, ale s různými argumenty.

V dalším kroku se podíváme na další nástroj, který je součástí ASP.NET – nástroje pro zobrazení obrázků. Ovládací prvky jako Image a ImageMap poskytují možnosti, jak jednoduše nebo složitě zobrazit obrázky na stránkách. Ovládací prvek Image zobrazuje obrázky prostřednictvím vlastnosti ImageUrl, zatímco ImageMap nabízí interaktivnější způsob, jak zobrazovat obrázky s různými oblasti, které mohou být kliknutelné.

Například:

html
Copy code
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/pic1.jpg" />

A pro výběr náhodného obrázku z několika možností:

csharp
Copy code
protected void Page_Load(object sender, EventArgs e)

{
    Random rnd = new Random();
    int index = rnd.Next(1, 4); // Vybere číslo mezi 1 a 3
    Image1.ImageUrl = "~/images/pic" + index + ".jpg";
}

Tento příklad ukazuje, jak použít nástroj Image pro zobrazení náhodného obrázku při každém načtení stránky.

Jak využít ovládací prvky Panelu a nástroje pro nahrávání souborů v ASP.Net aplikacích

V prostředí ASP.Net jsou nástroje pro manipulaci s ovládacími prvky a jejich organizaci klíčové pro efektivní a přehledné vytváření webových aplikací. Jedním z těchto nástrojů je kontrola Panel, která usnadňuje uspořádání a řízení různých ovládacích prvků na stránce. Panel umožňuje shlukovat ovládací prvky, což přispívá k lepší organizaci uživatelského rozhraní a zjednodušuje interakci s aplikací. Tento nástroj se často využívá pro změnu viditelnosti součástí aplikace, což je zvláště užitečné pro dynamické rozhraní.

Ovládací vlastnosti Panelu

Mezi základní vlastnosti panelu patří:

• DefaultButton: Tato vlastnost umožňuje nastavit výchozí tlačítko v panelu. Po stisknutí klávesy Enter dojde k aktivaci tohoto tlačítka, což může být užitečné pro implementaci formulářů nebo jiných interaktivních prvků.

• Direction: Určuje orientaci textu a ovládacích prvků v panelu. Může být nastavena na hodnoty LeftToRight nebo RightToLeft, což je důležité zejména pro aplikace, které podporují různé jazyky.

• GroupingText: Tato vlastnost umožňuje nastavit název nebo titul panelu, což je vhodné pro přehlednost a organizaci ovládacích prvků uvnitř.

• HorizontalAlign: Určuje horizontální zarovnání obsahu panelu (např. vlevo, na střed, vpravo). Tato vlastnost ovlivňuje vizuální vzhled a uspořádání nástrojů v panelu.

• ScrollBars: Tato vlastnost řídí zobrazení horizontálního nebo vertikálního posuvníku v panelu. Může mít hodnoty jako None (žádný), Horizontal (horizontální), Vertical (vertikální), Both (oba) nebo Auto, což zajišťuje, že obsah panelu bude správně zobrazen, i když je větší než dostupný prostor.

Ukázka aplikace Panelu v ASP.Net

Pro demonstraci těchto vlastností lze vytvořit jednoduchou aplikaci, která zobrazuje panel s několika ovládacími prvky. V kódu můžeme přidat tlačítko, které po kliknutí změní viditelnost panelu. Tento proces je ukázán v následujícím C# kódu:

csharp
Copy code
protected void Button1_Click(object sender, EventArgs e)

{
    pnlContact.Visible = !pnlContact.Visible;
}

Tento kód přepíná viditelnost panelu pnlContact při každém kliknutí na tlačítko. Pokud je panel viditelný, stane se neviditelným, a naopak. Takováto funkcionalita je velmi běžná při práci s dynamickými webovými aplikacemi, kde je potřeba přepínat mezi různými sekcemi nebo zobrazeními.

Nahrávání souborů na webové stránky

Mezi vlastnosti ovládacího prvku FileUpload patří:

• Enabled: Určuje, zda je ovládací prvek aktivní nebo neaktivní.

• FileBytes: Vrací obsah souboru jako pole bajtů.

• FileContent: Poskytuje obsah souboru ve formě streamu.

• FileName: Ukazuje název souboru.

• HasFile: Vrací hodnotu True, pokud byl soubor úspěšně nahrán.

• PostedFile: Vrací nahraný soubor jako objekt typu HttpPostedFile, což umožňuje podrobnější práci se souborem.

Pro uložení souboru na server se využívá metoda SaveAs, která uloží nahraný soubor na specifikované místo na serveru. Kód pro uložení souboru může vypadat takto:

csharp
Copy code
protected void Button1_Click(object sender, EventArgs e)
{
    try
    {
        if (FileUpload1.HasFile)
        {
            string path = "~/uploads/" + FileUpload1.FileName;
            FileUpload1.SaveAs(MapPath(path));
            Label1.Text = "File uploaded successfully...";
        }
    }
    catch (Exception ex) { }
}

Tento kód kontroluje, zda byl soubor nahrán, a pokud ano, uloží ho do složky uploads na serveru.

Filtrace typů souborů

Pokud chceme omezit, jaké typy souborů mohou být nahrávány, můžeme implementovat jednoduchou kontrolu, která umožní pouze určité typy souborů (např. obrázky). Pro tento účel se často používá funkce pro ověření typu souboru před tím, než je soubor uložen:

csharp
Copy code
protected bool CheckFileType(string fileName)

{
    string[] allowedExtensions = { ".jpg", ".jpeg", ".png", ".gif" };
    string fileExtension = Path.GetExtension(fileName).ToLower();
    return allowedExtensions.Contains(fileExtension);
}

Tato funkce zkontroluje příponu souboru a povolí pouze obrázkové formáty. Pokud je přípona souboru povolena, soubor bude nahrán, jinak bude zobrazeno chybové hlášení.

Důležitá upozornění pro čtenáře

Při práci s ovládacími prvky panelu a nahráváním souborů je důležité vždy zvážit bezpečnostní aspekty, zejména při manipulaci s nahrávanými soubory. Měli bychom zajistit, že nahrávané soubory jsou kontrolovány nejen na základě jejich typu, ale také na potenciální škodlivý obsah, jako jsou viry nebo skripty, které mohou být v souborech přítomny. Implementace filtrace a validace souborů je nezbytná pro ochranu serveru a uživatelů aplikace.

Dalším krokem může být ochrana soukromí a bezpečnosti uživatelů při práci s osobními údaji a soubory. Ujistěte se, že nahrávané soubory nejsou uloženy v nezabezpečených nebo veřejně přístupných adresářích.