Jerry's Log

Nahrávání souborů s využitím ASP.net AJAX UpdatePanel

31. května 2008 18:41
webové stránky

Používáte ve svých aplikacích ASP.net AJAX a také jste si oblíbili možnost využívání UpdatePanelu k přenesení některých částí provádění vaší aplikace až na klienta? Vždyť díky tomu nemusí docházet k neustálému znovunačítání stránky. Jenže jak pak uploadovat soubory na server?

Pokud chcete umožnit uživateli do vaší webové aplikace nahrávat soubory ze svého počítače, v ASP.NET stačí do stránky vložit ovládací prvek FileUpload a zavolat metodu FileUpload.SaveAs(cesta_k_souboru_na_serveru) a vše je vyřešeno. Jenže, když tento prvek umístíte do ASP.net AJAX UpdatePanelu, tak narazíte! Žádný soubor se nikam nenahraje, neboť najednou, jakoby z ničeho nic, FileUpload neobsahuje žádný soubor z klientova počítače.

Problém je v tom, že pro nahrávání souboru z klienta na server se používá hlavička (X)HTML stránky, která se přenáší na server metodou POST při volání nějaké URL. Jenže když použijete ASP.net AJAX UpdatePanel, tak k žádnému volání stránky na serveru nedojde (tedy alespoň ne se standardně používaným reloadem stránky) a tedy ani k přenosu hlavičky se souborem. To je tedy potřeba nějak vyřešit a donutit vaši AJAX aplikaci, aby při vyvolání programu, který má soubor uploadovat na server stránku poslala, přestože je program vykonán JavaScriptem jen u klienta.

Nejjednodušším a nejčistším řešením je, dle mého názoru, využití asynchronního volání stránky. Do ASP.NET stránky stačí vložit skryté tlačítko (<asp:button runat="server" visible="false" />), které bude skutečně realizovat program uploadující (a případně i dále zpracovávající) soubor a přitom se vše vykoná na serveru při znovuvolání stránky. A původnímu tlačíku, které má „opticky“ zajistit upload souboru na server, a je společně s FileUpload umístěné v UpdatePanelu, jen nastavit vyvolání původního výkonného programu uploadu souboru skrytého tlačítka, k události onclick viditelného tlačíka, která je však volána AJAXem na straně klienta.

Postup si ukážeme na jednoduchém příkladě

Formulář pro uploadování (vložen do UpdatePanelu)

Zdrojový kód řešení ASP.NET stránky

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:FileUpload ID="soubor" runat="server" />  
        <asp:Button ID="tlacitkoViditelne" runat="server" Text="Nahraj soubor..." />
    </ContentTemplate>
</asp:UpdatePanel>

<asp:Button ID="tlacitkoSkryte" runat="server"
    Visible="false" OnClick="TlacitkoUpload_Click" />

Zdrojový kód oblužného programu

protected void Page_Init(object sender, EventArgs e)
{
    // přidání obsluhy volající kliknutí na tlačítko mimo UpdatePanel,
    // tak dojde k asynchronní obsluze a soubor se načte
    tlacitkoViditelne.Attributes.Add("onclick",
        Page.ClientScript.GetPostBackEventReference(tlacitkoSkryte, ""));
}

protected void TlacitkoUpload_Click(object sender, EventArgs e)
{
    // zde doplníte potřebné zpracování a uložení souboru na server
    if (soubor.HasFile)
    {
        soubor.SaveAs(Server.MapPath("/data/" + soubor.FileName));
    }
}

Jak je vidět z ukázky, jediné co do vaší současné aplikace musíte přidat je právě ono neviditelné tlačítko. Pak přiřadíte asynchronní obsluhu události OnClick pomocí Page.ClientScript.GetPostBackEventReference() k tlačítku pro upload. A nakonec program zajišťující zpracovávání uploadovaného souboru připojit k události OnClick neviditelného tlačítka. Tento program se již provede na serveru, a tak dojde k volání stránky na webovém serveru a tím i k přenostu souboru od klienta na server.

autor: jerrysohn | rss kanál komentářů