Správce souborů pomocí DataGridu v ASP.NET – klientské skripty
Pomocí vykazovacích prvků DataGrid nebo Datalist můžeme snadno dát uživatelům k dispozici webové rozhraní pro soubory na serveru. V tomto článku doplníme naši aplikaci o klientské skripty pro náhled souboru a třídění podle vybraného sloupce.
Oba klientské skripty pocházejí z volných zdrojů na internetu, oba jsme již popsali v článcích o sortování tabulky a náhledech odkazovaných dokumentů. Vykazovací prvek DataGrid samozřejmě podporuje možnosti třídění sám o sobě metodami běžícími na serveru. Pro jednoduché aplikace však leckdy vystačíme i s jednoduchým klientským skriptem. Prohlédněte si ukázku (zdrojový kód).
Do stránky je potřeba zavést obslužné skripty ze složky ClientScripts a také doplnit skrytý obrázek a iframe pro náhledy:
<h1>Soubory bannerů</h1>
<img id=“imgToolTip“ onload=“this.filters[1].Play();“ style=“position: absolute; width:200px; border: 1px solid #CCCCCC; margin: 2px; background-color: #FFFFFF; visibility: hidden; z-index: 100; filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135)progid:DXImageTransform.Microsoft.Fade(duration=0.2,overlap=1.0);“ />
<iframe id=“srcToolTip“ onload=“this.filters[1].Play();“ style=“position: absolute; width:200px; border: 1px solid #CCCCCC; margin:0px;padding:0px; background-color: #FFFFFF; visibility: hidden; z-index: 100; filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135) progid:DXImageTransform.Microsoft.Fade(duration=0.2,overlap=1.0);“ frameborder=“0″ marginheight=“0″ marginwidth=“0″></iframe>
<script type=“text/javascript“ src=“ClientScripts/LinkPreview.js“></script>
<form enctype=“multipart/form-data“ RunAt=“server“>
.
.
<asp:Label Id=“lblError“ Visible=“false“ Font-Bold=“true“ RunAt=“server“ />
<br />
<script type=“text/javascript“ src=“ClientScripts/SortTable.js“></script>
<asp:datagrid …
.
</asp:datagrid …
</form>
DataGrid a jeho šablonu doplníme o nastavení tříd potřebných pro funkci sortování – sloupcům, které nemají umožňovat třídění, nastavíme třídu dontsort:
<asp:datagrid id=“Datagrid1″ CssClass=“sortable“ DataKeyField=“FileName“ CellPadding=“2″ AutoGenerateColumns=“false“ ShowHeader=“true“ ShowFooter=“true“ GridLines=“Horizontal“ OnItemDataBound=“DataGridItemDataBound“ OnEditCommand=“DataGridEdit“ OnCancelCommand=“DataGridCancel“ OnUpdateCommand=“DataGridUpdate“OnItemCommand=“DataGridCommand“ OnPageIndexChanged=“DataGridPage“ AllowPaging=“true“ RunAt=“server“>
<HeaderStyle BackColor=“#DDDDDD“ Font-Bold=“True“ />
<FooterStyle BackColor=“#FFFFFF“ CssClass=“dontsort“ />
<ItemStyle Height=“28px“ />
<AlternatingItemStyle BackColor=“#E7E7E7″ />
<EditItemStyle BackColor=“#FFDDE7″ />
<PagerStyle Mode=“NumericPages“ PageButtonCount=“40″ BackColor=“#E7E7E7″ CssClass=“dontsort“ />
<Columns>
<asp:TemplateColumn>
<HeaderTemplate>Název souboru</HeaderTemplate>
<HeaderStyle Wrap=“False“ Width=“300px“ />
<ItemTemplate><a href=“<%# mapUrl + DataBinder.Eval(Container.DataItem, „FileName“) %>“ <%# LinkPreview(mapUrl + DataBinder.Eval(Container.DataItem, „FileName“)) %> target=“_preview“><%# DataBinder.Eval(Container.DataItem, „FileName“) %></a><%# ImageSize((String)DataBinder.Eval(Container.DataItem, „FileName“)) %></ItemTemplate>
<EditItemTemplate>
<asp:TextBox Id=“txtFileName2″ Text='<%# DataBinder.Eval(Container.DataItem, „FileName“) %>‘ Width=“172px“ ToolTip=“Název“ MaxLength=“50″ RunAt=“server“ />
<asp:RequiredFieldValidator Display=“None“ ControlToValidate=“txtFileName2″ ErrorMessage=“chybí název“ RunAt=“server“ />
<asp:RegularExpressionValidator Display=“None“ ControlToValidate=“txtFileName2″ ValidationExpression='<%# ValidFileExpression %>‘ ErrorMessage=“typ souboru není správný“ RunAt=“server“ />
</EditItemTemplate>
<FooterTemplate>
<input style=“width:290px;“ type=“file“ id=“myFile“ RunAt=“server“ >
<asp:RequiredFieldValidator Display=“None“ Enabled='<%# Datagrid1.ShowFooter %>‘ ControlToValidate=“myFile“ ErrorMessage=“soubor není zadán“ RunAt=“server“ />
<asp:RegularExpressionValidator Enabled='<%# Datagrid1.ShowFooter %>‘ ValidationExpression='<%# ValidFileExpression %>‘ Display=“None“ RunAt=“server“ ControlToValidate=“myFile“ ErrorMessage=“typ souboru není povolen“ />
</FooterTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn>
<HeaderTemplate>Datum vytvoření</HeaderTemplate>
<ItemStyle VerticalAlign=“Top“ />
<FooterStyle VerticalAlign=“Top“ />
<ItemTemplate><%# DataBinder.Eval(Container.DataItem, „Created“) %></ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn ItemStyle-HorizontalAlign=“Right“>
<HeaderTemplate>Velikost</HeaderTemplate>
<ItemStyle VerticalAlign=“Top“ />
<FooterStyle VerticalAlign=“Top“ />
<ItemTemplate><%# DataBinder.Eval(Container.DataItem, „FileSize“) %></ItemTemplate>
</asp:TemplateColumn>
<asp:EditCommandColumn ButtonType=“LinkButton“ EditText='<img src=“Images/Edit.gif“ style=“width:20px;height:20px;border:0px“ alt=“Editovat“ />‘ UpdateText='<img src=“Images/Save.gif“ style=“width:20px;height:20px;border:0px“ alt=“Uložit“ />‘ CancelText='<img src=“Images/Cancel.gif“style=“width:20px;height:20px;border:0px“ alt=“Storno“ />‘>
<HeaderStyle Wrap=“False“ Width=“46px“ CssClass=“dontsort“ />
</asp:EditCommandColumn>
<asp:TemplateColumn>
<HeaderStyle Wrap=“False“ Width=“25px“ CssClass=“dontsort“ />
<ItemTemplate><asp:LinkButton Text='<img src=“Images/Delete.gif“ style=“width:20px;height:20px;border:0px“ alt=“Smazat“ onclick=“javascript: return confirm('Opravdu smazat?');“ />‘ CommandName=“Delete“ alt=“Přidat nový záznam“ CausesValidation=“false“ RunAt=“server“/></ItemTemplate>
<FooterTemplate><asp:LinkButton Text='<img src=“Images/Save.gif“ style=“width:20px;height:20px;border:0px“ alt=“Vložit nový záznam“ />‘ CommandName=“Insert“ RunAt=“server“ /></FooterTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid>
Do aplikace musíme také doplnit metodu pro generování odkazu pro náhled obrázku při přejetí myší. Zde v závislosti na tom, zda jde o obrázek, generujeme odlišné hodnoty atributů onmouseout a onmouseover metodou LinkPreview(), přičemž využíváme již dříve popsanou metodu IsImage(), která rozhoduje, zda jde o obrázek.
String LinkPreview(String fileName)
{
if (IsImage(fileName))
return „onmouseover=\“showImgTip(this.href);\“; onmouseout=\“hideImgTip();\“ „;
else
return „onmouseover=\“showSrcTip(this.href);\“; onmouseout=\“hideSrcTip();\“ „;
}
A to je vše, celou aplikaci si můžete stáhnout a použít vrámci vlastních projektů – hodit se může třeba jako manažer souborů pro bannerový systém.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
Mohlo by vás také zajímat
-
Fandíme českým sportovcům a rozdáváme hosting ZDARMA!
26. července 2024 -
ZONER Webmail jako první v Česku přináší BIMI s VMC
11. července 2024
Nejnovější
-
Od iPhonu po Android: Ultra HDR přináší nový standard fotografií
1. listopadu 2024 -
AI a internetové podvody
29. října 2024 -
Užitečné nástroje pro bezpečnost na internetu
17. října 2024 -
Jak se chránit před podvody na internetu – část 2
14. října 2024