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(&#039;Opravdu smazat?&#039;);“ />‘ 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.