Maak met behulp van de pagina Default.master een nieuwe contentpagina en geef deze de naam Admin.aspx. Deze pagina bevat twee aparte secties, één voor het beheer van categorieën en één voor het beheer van bestanden. Elke sectie wordt op de pagina gedefinieerd door middel van <div>-secties. Dit wordt weergegeven in listing 4.
|
<%@ Page Language="VB" MasterPageFile="~/Default.master"
Title="File Management System" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<div id="body">
<div class="fullwidth">
<h2>Administer Categories</h2>
</div>
<div class="fullwidth">
<h2>Administer Files</h2>
</div>
</div>
</asp:Content> |
Listing 4: Het raamwerk voor de pagina Admin.aspx
In dit codefragment kunt u zien dat het raamwerk voor de pagina Admin.aspx ruimte biedt aan twee secties. Elke sectie is visueel gevat in een grijs vak, vanwege de declaratie class="fullwidth" in de <div>-codes.
Nu gaan we kijken naar de eerste sectie van de pagina, die voor het beheer van categorieën.
Het categoriebeheersysteem opzetten
De categoriebeheersectie van de pagina Admin.aspx is eenvoudig te maken. Deze sectie bevat een GridView-control waarmee beheerders de categorieën kunnen beheren die zich al in het systeem bevinden. Meteen daaronder bevindt zich een klein formulier waarmee nieuwe categorieën kunnen worden gemaakt. Uiteindelijk moet de ontwerpweergave van deze sectie er uitzien als in afbeelding 8.
Afbeelding 8. Categoriebeheersysteem
De communicatie met de SQL Express-database die wij eerder maakten, vindt plaats door middel van het control SqlDataSource op de pagina. Nadat u het control SqlDataSource op de pagina hebt geplaatst, markeert u het element en opent u de infolabel van het control (door de groene pijl te selecteren in de rechterbovenhoek van het control). Selecteer in de infolabel de koppeling Configure Data Source. Er wordt een dialoogvenster weergegeven waarin u het control SqlDataSource kunt configureren. Met de eerste optie kunt u de gegevensverbinding selecteren die u voor de verbinding met het bestand clubsite.mdf wilt gebruiken. Omdat deze verbinding al bij de standaardinstallatie van de clubwebsite starterkit is gedefinieerd, selecteert u ClubSiteDB in de vervolgkeuzelijst. Dit wordt weergegeven in afbeelding 9.
Afbeelding 9. Verbinding maken met de database
Op de volgende pagina van het dialoogvenster kunnen we de tabel (DocumentCategories) en de kolommen selecteren die we willen gebruiken. Omdat we alle kolommen willen gebruiken, schakelt u het selectievakje voor alles (het teken "*") in. Voordat we doorgaan naar de volgende pagina van het dialoogvenster, klikt u op de knop Advanced, en schakelt u het selectievakje in dat ervoor zorgt dat Visual Web Designer behalve de standaardinstructie SELECT ook de instructies INSERT, UPDATE en DELETE genereert. Deze instellingen worden weergegeven in afbeelding 10.
Afbeelding 10. Stored procedures genereren
De volgende stap bestaat uit het configureren van de GridView, zodat deze samenwerkt met het control SqlDataSource dat we zojuist hebben gemaakt. Open hiervoor de ontwerpweergave van de pagina en vervolgens de infolabel voor het control GridView. In de infolabel kunt u in de lijst met beschikbare bronnen het control SqlDataSource1 selecteren. Hierdoor worden automatisch de kolommen van de tabel DocumentCategories in het control GridView weergegeven.
Schakel vervolgens in de infolabel van het control GridView de selectievakjes Enable Paging, Enable Sorting, Enable Editing en Enable Deleting in. Voltooi vervolgens de configuratie van het control GridView door via de koppeling Auto Format een betere stijl te kiezen of wijzig gewoon de breedte van het control (die van mij heb ik ingesteld op 75%). Het resultaat van al deze stappen is een `GridView-control zoals in afbeelding 8.
De code voor deze categoriesectie wordt hier weergegeven in listing 5.
|
<div class="fullwidth">
<h2>File Category System</h2>
<p>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
AllowSorting="True" AutoGenerateColumns="False"
DataKeyNames="CategoryID" DataSourceID="SqlDataSource1"
EmptyDataText="There are no categories present." Width="75%">
<Columns>
<asp:CommandField ShowDeleteButton="True"
ShowEditButton="True" />
<asp:BoundField DataField="CategoryID" HeaderText="CategoryID"
InsertVisible="False" ReadOnly="True"
SortExpression="CategoryID" />
<asp:BoundField DataField="CategoryName"
HeaderText="CategoryName" SortExpression="CategoryName" />
<asp:CheckBoxField DataField="IsPublic" HeaderText="IsPublic"
SortExpression="IsPublic" />
</Columns>
</asp:GridView>
<p>
<strong><span style="text-decoration: underline">Add a New
Category</span></strong></p>
<p>Category Name:<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></p>
<p>
<asp:CheckBox ID="CheckBox1" runat="server"
Text="Check if category is public" /></p>
<p>
<asp:Button ID="Button1" runat="server" Text="Add Category"
OnClick="Button1_Click" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ClubSiteDB %>"
DeleteCommand="DELETE FROM [DocumentCategories] WHERE [CategoryID] =
@original_CategoryID"
InsertCommand="INSERT INTO [DocumentCategories] ([CategoryName],
[IsPublic]) VALUES (@CategoryName, @IsPublic)"
SelectCommand="SELECT * FROM [DocumentCategories]"
UpdateCommand="UPDATE [DocumentCategories] SET [CategoryName] =
@CategoryName, [IsPublic] = @IsPublic WHERE [CategoryID] =
@original_CategoryID">
<DeleteParameters>
<asp:Parameter Name="original_CategoryID"
Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="CategoryName" Type="String" />
<asp:Parameter Name="IsPublic" Type="Boolean" />
<asp:Parameter Name="original_CategoryID" Type="Int32" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="CategoryName" Type="String" />
<asp:Parameter Name="IsPublic" Type="Boolean" />
</InsertParameters>
</asp:SqlDataSource>
</p>
</div> |
Listing 5: De visuele constructie van de categoriesectie
Voordat we door kunnen gaan, moeten we nog één wijziging aanbrengen in dit codefragment. In zijn huidige staat werkt de methode Insert niet voor ons. Daarom moeten we de door Visual Web Developer gegenereerde code hier en daar wijzigen.
Als u kijkt naar de waarde van het kenmerk InsertCommand in het hoofdknooppunt van het control SqlDataSource, ziet u dat onze Insert-opdracht naar twee parameters zoekt: één voor de naam van de categorie (@CategoryName) en een Boolean-waarde die aangeeft of de categorie wel of niet openbaar is (@IsPublic).
Aangezien deze waarden afkomstig zijn uit de ASP.NET-server control op dezelfde pagina bevinden, moeten we de sectie <InsertParameters> van het control SqlDataSource aanpassen aan de bron van de waarden. Dus in plaats van:
|
<InsertParameters>
<asp:Parameter Name="CategoryName" Type="String" />
<asp:Parameter Name="IsPublic" Type="Boolean" />
</InsertParameters> |
wijzigen wij onze sectie <InsertParameters> in het volgende:
|
<InsertParameters>
<asp:ControlParameter Name="CategoryName" Type="String"
ControlID="TextBox1" />
<asp:ControlParameter Name="IsPublic" Type="Boolean"
ControlID="CheckBox1" />
</InsertParameters> |
In de parametersectie van de DataSource-controlen kunt u aangeven hoe de waarden van deze parameters met behulp van declaraties moeten worden verkregen. Beschikbare opties zijn:
- <asp:Parameter>
- <asp:ControlParameter>
- <asp:CookieParameter>
- <asp:FormParameter>
- <asp:ProfileParameter>
- <asp:QueryStringParameter>
- <asp:SessionParameter>
In ons geval gebruiken we het control <asp: ControlParameter>, omdat we hiermee de vereiste waarden op declarieve manier rechtstreeks uit een aantal ASP.NET- server controls kunnen halen die zich op ons eenvoudige formulier bevinden. De twee <asp: ControlParameter>- controls die we in de sectie < InsertParameters> gebruiken, wijzen naar het control TextBox1 voor de waarde van de categorienaam en naar het control CheckBox1 voor de vereiste Boolean-waarde die bepaalt of de categorie voor iedereen zichtbaar is.
Nu we de visuele aspecten van deze sectie hebben ingesteld en het control SqlDataSource gereed is, bestaat de volgende stap uit het maken van een aantal acties die worden gestart als de eindgebruiker op de knop Add Category klikt. Dit doen we door middel van de gebeurtenis Button1_Click.
Afbeelding 11. Clubsite met categorieën
De gebeurtenis Button1_Click voegt een nieuwe categorie toe aan het algemene categoriesysteem. Deze methode wordt toegelicht in listing 6.
|
Protected Sub Button1_Click(ByVal sender As Object, _
ByVal e As System.EventArgs)
SqlDataSource1.Insert()
TextBox1.Text = ""
CheckBox1.Checked = False
End Sub |
Listing 6: Een categorie toevoegen door middel van de gebeurtenis Button_1
[Visual Basic]
|
protected void Button1_Click(object sender, EventArgs e)
{
SqlDataSource1.Insert();
TextBox1.Text = "";
CheckBox1.Checked = false;
} |
Listing 6: Een categorie toevoegen door middel van de gebeurtenis Button_1
[C#]
De gebeurtenis Button1_Click voert een aantal basisbewerkingen uit. Op de eerste plaats start deze de methode Insert() van het control SqlDataSource. Deze methode zorgt ervoor dat het control SqlDataSource de waarden ophaalt uit de twee server- controls (TextBox1 en CheckBox1) en dat deze waarden worden ingevoegd in het databasebestand. Nadat de methode Insert() is uitgevoerd, maken we het formulier leeg door lege waarden toe te wijzen aan zowel het control TextBox1 als het control CheckBox1. Dit doen we om te voorkomen dat de beheerder twee keer op de knop Add Category klikt, waardoor de categoriegegevens twee keer aan het systeem zouden worden toegevoegd.
De pagina Admin.aspx is nu in staat categorieën toe te voegen, te bewerken en te verwijderen waarin bestanden kunnen worden geplaatst. Laten we onze aandacht nu richten op het bestandsbeheergedeelte van de pagina Admin.aspx.
Het bestandsbeheersysteem opzetten
Het categoriebeheersysteem is nu gereed. De volgende stap is het opzetten van het bestandsbeheersysteem. Net zoals het categoriebeheersysteem, bevat het bestandsbeheersysteem een control GridView waarin de bestanden worden weergeven die zich in het systeem bevinden, plus een formulier waarmee nieuwe bestanden aan het systeem kunnen worden toegevoegd.
Afbeelding 12 laat zien hoe de volledige sectie eruit ziet in de Visual Web Developer designer.
Afbeelding 12. Bestandsbeheersysteem
De implementatie van de server-controls die zich op deze pagina bevinden, is niet moeilijk. Het formulier waarmee u een nieuw bestand aan het bestandsbeheersysteem kunt toevoegen, bevat een vervolgkeuzelijst, een tekstvak, een aantal radiobuttond, een control voor het uploaden van bestanden, een knop en een eenvoudige label.
Het control DropDownList waarin boven aan de pagina de beschikbare categorieën worden weergegeven waaraan u een bestand kunt toewijzen, wordt in feite aangestuurd vanuit het control SqlDataSource1 dat boven aan de pagina voor het categoriebeheersysteem is gebruikt.
Markeer het control DropDownList en open de infolabel van het element. In deze infolabel bevindt zich de optie waarmee u een gegevensbron voor het control kunt kiezen. Als u deze optie selecteert, wordt het dialoogvenster uit afbeelding 13 weergegeven.
Afbeelding 13. De gegevensbron instellen voor een DropDownList
In dit dialoogvenster kunt u de gegevensbron selecteren waarmee het control moet worden verbonden, evenals het gegevensveld dat de bron is voor de tekst die wordt gepresenteerd aan de eindgebruiker en de waarde die voor het geselecteerde item wordt gebruikt. Klik hierna op de knop OK om door te gaan.
De volgende stap is de configuratie van het control DataSource, dat het control GridView vult met de bestanden die zich in het systeem bevinden. Sleep daartoe een nieuw SqlDataSource-control naar het ontwerpvenster van de pagina en volg dezelfde configuratiestappen als in het voorbeeld van het control SqlDataSource van het categoriebeheersysteem hierboven.
Selecteer in het configuratieproces van het control SqlDataSource2 de tabel Documents en zorg ervoor dat alle items die in de tabel Documents beschikbaar zijn, worden geselecteerd. Net als bij de configuratie van het control SqlDataSource dat voor het categoriebeheerstysteem is gebruikt, moet u op de knop Advanced klikken, zodat u voor de wizard de optie kunt selecteren die behalve de instructie SELECT, ook de instructies INSERT, UPDATE en DELETE maakt. Dit wordt geïllustreerd in afbeelding 14.
Afbeelding 14. De tabel Documents configureren
Hoewel deze wizard het control SqlDataSource voor u instelt, moet er nog een aantal wijzigingen worden aangebracht in de code die vanuit de wizard is gegenereerd. Als we naar de verschillende parameterdefinities van het control SqlDataSource kijken, zien we dat de sectie <InsertParameters> er als volgt uitziet:
|
<InsertParameters>
<asp:Parameter Name="DocumentName" Type="String" />
<asp:Parameter Name="DateInput" Type="DateTime" />
<asp:Parameter Name="Comments" Type="String" />
<asp:Parameter Name="DocumentCategory" Type="Int32" />
<asp:Parameter Name="TopDoc" Type="Boolean" />
</InsertParameters> |
Hoewel dit alle parameters zijn die we nodig hebben om een item aan de tabel Documents toe te voegen, moeten we deze structuur toch wijzigen, omdat sommige van deze parameters worden aangestuurd door server-controls die zich op de pagina bevinden, terwijl we andere parameters dynamisch maken en toevoegen. Daarom wijzigen we de sectie <InsertParameters> in het volgende:
|
<InsertParameters>
<asp:ControlParameter Name="Comments" Type="String"
ControlID="TextBox2" />
<asp:ControlParameter Name="DocumentCategory" Type="Int32"
ControlID="DropDownList1" PropertyName="SelectedValue" />
<asp:ControlParameter Name="TopDoc" Type="Boolean"
ControlID="RadioButtonList1" PropertyName="SelectedValue" />
</InsertParameters> |
In deze gewijzigde code kunt u zien dat we een aantal van de parameters uit de lijst hebben gehaald (zoals de parameters DocumentName en DateInput). Dit zijn de parameters die we dynamisch gaan genereren in de gebeurtenis Button2_Click, waar we spoedig op terugkomen.
De andere parameters werden gewijzigd in het type ControlParameter, omdat deze parameters door bepaalde server-controls op het formulier van waarden worden voorzien. Met de eigenschap ControlID kunnen we verwijzen naar een bepaald control, waaruit de vereiste waarde kan worden opgehaald. Voor het verkrijgen van deze waarde, is het voor sommige van deze eigenschappen vereist dat de naam van de eigenschap wordt opgegeven. Zo is bijvoorbeeld de waarde uit het control DropDownList die wij willen gebruiken de eigenschap SelectedValue. Deze eigenschap wordt ingesteld via het kenmerk PropertyName. Dit zijn alle wijzigingen die moeten worden aangebracht in het control SqlDataSource2.
Nu we het control SqlDataSource hebben ingesteld voor het tweede GridView-control, bestaat de volgende stap uit het verbinden van het control GridView2 met het control SqlDataSource2. Hiervoor openen we de infolabel van het control GridView2 en selecteren we het control SqlDataSource2 in de vervolgkeuzelijst die daarin wordt weergegeven. Door de betreffende selectievakjes in te schakelen kunt u pagineren, sorteren, bewerken en verwijderen inschakelen. Dit wordt geïllustreerd in afbeelding 15.
 Afbeelding 15. Pagineren, sorteren, bewerken en verwijderen inschakelen
Omdat we in de hyperlinkconstructie waarmee eindgebruikers naar bestanden kunnen zoeken, gebruik willen gaan maken van de eigenschap DocumentName, moeten we ervoor zorgen dat de waarde DocumentName niet kan worden gewijzigd. Daarom schakelen we de bewerkingsmogelijkheid voor deze kolom in het control GridView2 uit. Klik daartoe in de infolabel van het control GridView op de koppeling Edit Columns. Hierdoor wordt het dialoogvenster Fields geopend (zie afbeelding 16).
Afbeelding 16. Kolommen bewerken voor de GridView
Markeer in de sectie Selected fields van het dialoogvenster Fields het veld DocumentName. Aan de rechterkant van het dialoogvenster worden nu de eigenschappen van het veld DocumentName weergegeven. Om te voorkomen dat dit veld kan worden bewerkt, wijzigt u de instelling van de eigenschap ReadOnly van False (de standaardinstelling) in True.
Hiermee is het bestandsbeheersysteem van de pagina ingesteld. U kunt de toepassing nu uitvoeren, u aanmelden als beheerder en onder meer categorieën maken en bestanden uploaden. We richten onze aandacht nu op de pagina waarop de categorie- en bestandsgegevens aan de eindgebruiker worden gepresenteerd.
| 
