Programmeren in ASP.NET/FormView en DetailsView

Uit Wikibooks
Naar navigatie springen Naar zoeken springen

Programmeren in ASP.NET

  1. Wat is ASP.NET?
  2. Wat heb ik nodig voor ASP.NET?
  3. Een ASP.NET-server installeren
  4. Je eerste ASP.NET-pagina
  5. HTML-controls
  6. Foutzoeken
  7. Web-server-controls
  8. Webformulieren
  9. Veelgebruikte objecten
  10. Validering
  11. Master-pagina's
  12. Navigatie
  13. Gegevenstoegang
  14. Werken met databanken
  15. Databankgegevens wijzigen
  16. Werken met datacontrols
  17. GridView
  18. FormView en DetailsView
  19. User-controls
  20. Custom controls
  21. AJAX
  22. Viewstate
  23. Configuratiebestanden
  24. Webservices
  25. Beveiliging
  26. Personalisatie en profielen
  27. Thema's en skins
  28. WebParts
  29. Globalisering
  30. Caching
  31. Mail vanuit ASP.NET
  32. Reguliere expressies
  33. Server-side afbeeldingen
  34. Mobiele toepassingen
  35. Meer informatie
  36. Appendix: foutmeldingen


De FormView-control en de DetailsView zijn twee volledig nieuwe controls in ASP.NET 2.0, speciaal om individuele databankrecords te tonen en te wijzigen, toe te voegen of te verwijderen.

Je kan de controls apart gebruiken om één enkel databaserecord te tonen, of je kan ze samen met de GridView-control gebruiken om master/detail-formulieren te maken.

Gegevens tonen met de FormView-control[bewerken]

De FormView-control is bedoeld om één enkel databankrecord te tonen. Voor elke kolom uit de databanktabel toont de FormView-control automatisch labels en waarden voor elke geselecteerde kolom. De volgende pagina toont hoe je de FormView-control kan gebruiken om één enkel record van de Authors-tabel te tonen. Om deze pagina te maken voeg je de FormView-control toe aan de pagina, en vervolgens doorloop je de wizard om één record uit de databank te halen.

formview.aspx

<html>
 <head runat="server">
   <title>FormView</title>
 </head>
<body>
 <form runat="server">
<asp:FormView ID="FormView1" runat="server" DataKeyNames="au_id" DataSourceID="AuthorsSource">
    <EditItemTemplate>
        au_id: <asp:Label ID="au_idLabel1" runat="server" Text='<%# Eval("au_id") %>'/><br />
        au_lname: <asp:TextBox ID="au_lnameTextBox" runat="server" Text='<%# Bind("au_lname") %>'/><br />
        au_fname: <asp:TextBox ID="au_fnameTextBox" runat="server" Text='<%# Bind("au_fname") %>'/><br />
        phone: <asp:TextBox ID="phoneTextBox" runat="server" Text='<%# Bind("phone") %>'/><br />
        address: <asp:TextBox ID="addressTextBox" runat="server" Text='<%# Bind("address") %>'/><br />
        city: <asp:TextBox ID="cityTextBox" runat="server" Text='<%# Bind("city") %>'/><br />
        state: <asp:TextBox ID="stateTextBox" runat="server" Text='<%# Bind("state") %>'/><br />
        zip: <asp:TextBox ID="zipTextBox" runat="server" Text='<%# Bind("zip") %>'/><br />
        contract: <asp:CheckBox ID="contractCheckBox" runat="server" Checked='<%# Bind("contract") %>' /><br />
        <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"
            Text="Update">
        </asp:LinkButton>
        <asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" 
            CommandName="Cancel"  Text="Cancel">
        </asp:LinkButton>
    </EditItemTemplate>
    <InsertItemTemplate>
        au_id: <asp:TextBox ID="au_idTextBox" runat="server" Text='<%# Bind("au_id") %>'/><br />
        au_lname: <asp:TextBox ID="au_lnameTextBox" runat="server" Text='<%# Bind("au_lname") %>'/><br />
        au_fname: <asp:TextBox ID="au_fnameTextBox" runat="server" Text='<%# Bind("au_fname") %>'/><br />
        phone: <asp:TextBox ID="phoneTextBox" runat="server" Text='<%# Bind("phone") %>'/><br />
        address: <asp:TextBox ID="addressTextBox" runat="server" Text='<%# Bind("address") %>'/><br />
        city: <asp:TextBox ID="cityTextBox" runat="server" Text='<%# Bind("city") %>'/><br />
        state: <asp:TextBox ID="stateTextBox" runat="server" Text='<%# Bind("state") %>'/><br />
        zip: <asp:TextBox ID="zipTextBox" runat="server" Text='<%# Bind("zip") %>'/><br />
        contract: <asp:CheckBox ID="contractCheckBox" runat="server" Checked='<%# Bind("contract") %>' /><br />
        <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert"
            Text="Insert">
        </asp:LinkButton>
        <asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False" 
            CommandName="Cancel" Text="Cancel">
        </asp:LinkButton>
    </InsertItemTemplate>
    <ItemTemplate>
        au_id: <asp:Label ID="au_idLabel" runat="server" Text='<%# Eval("au_id") %>'/><br />
        au_lname: <asp:Label ID="au_lnameLabel" runat="server" Text='<%# Bind("au_lname") %>'/><br />
        au_fname: <asp:Label ID="au_fnameLabel" runat="server" Text='<%# Bind("au_fname") %>'/><br />
        phone: <asp:Label ID="phoneLabel" runat="server" Text='<%# Bind("phone") %>'/><br />
        address: <asp:Label ID="addressLabel" runat="server" Text='<%# Bind("address") %>'/><br />
        city: <asp:Label ID="cityLabel" runat="server" Text='<%# Bind("city") %>'/><br />
        state: <asp:Label ID="stateLabel" runat="server" Text='<%# Bind("state") %>'/><br />
        zip: <asp:Label ID="zipLabel" runat="server" Text='<%# Bind("zip") %>'/><br />
        contract: <asp:CheckBox ID="contractLabel" runat="server" Checked='<%# Bind("contract") %>'
            Enabled="false" /><br />
    </ItemTemplate>
        </asp:FormView>
     <asp:SqlDataSource ID="AuthorsSource" 
      ConnectionString="Server=localhost;Database=Pubs;Trusted_Connection=true" 
      SelectCommand= "SELECT * FROM Authors WHERE au_id='172-32-1176'" 
         Runat="Server" />
 </form> 
</body> 
</html>

De FormView-control wordt hier verbonden met een SqlDataSource-control die de auteur opvraagt met ID 172-32-1176. Dit is het resultaat:

De FormView-control

Merk op dat de labels automatisch de veldnamen uit de databank tonen, en dat er drie templates aangemaakt zijn:

  1. ItemTemplate
  2. EditItemTemplate
  3. InsertItemTemplate

Je kan deze templates naar believen zelf aanpassen om de lay-out te krijgen die je wil. Merk ook op hoe de gegevens gekoppeld worden aan de juiste control binnen het template: met Bind() en Eval(). Bind() wordt gebruikt voor binding in twee richtingen (lezen en schrijven), Eval() voor binding in één richting: alleen lezen.

Om te kunnen wijzigen en toevoegen moet je de datasource aanpassen via de Advanced-knop, en "Generate INSERT, UPDATE and DELETE statements" aanvinken. Als je daarna de FormView opnieuw aanmaakt, verschijnen automatisch de nodige knoppen:

FormView-control met wijzigmogelijkheid

Om de weergegeven tekst op de knoppen ("Edit", "Delete", "New", "Update" en "Cancel") te vertalen moet je manueel de templates aanpassen. In elk template vind je LinkButtons terug voor de verschillende acties.

Navigatie met de FormView-control[bewerken]

Hierboven heb je gezien hoe je met de FormView-control één enkel record kan tonen. Je kan de FormView ook gebruiken om van record naar record te navigeren.

Hiervoor moet je de AllowPaging-property op true instellen. De FormView-control maakt automatisch de nodige navigatieknoppen aan. De datasource moet natuurlijk meerdere records geven, dus laat de WHERE-conditie van de vorige pagina weg.

Je krijgt een Pager zoals bij de DataGrid en de GridView. De instellingen gebeuren ook op dezelfde manier via de PagerSettings- en PagerStyle-property's.

Een Master/Detail-pagina maken met de FormView-control[bewerken]

Hier maken we een Master/Detail-formulier door de FormView- en GridView-controls te combineren. De procedure is bijna dezelfde als bij een Master/Detail met twee GridViews.

Met de GridView-control toon je een lijst met werknemers (tabel Employees uit Northwind). Als je een werknemer selecteert, dan zal de FormView-control meer gegevens tonen over die werknemer. Maak de GridView aan met alleen de kolommen EmployeeID, Firstname en Lastname. Selecteer ook de optie "Enable Selection". Hierdoor krijg je een extra kolom met een knop "Select". Als je op deze knop klikt, wordt de rij geselecteerd.

De FormView-control toont de werknemer die geselecteerd is in de GridView. Deze koppeling gebeurt door bij de DataSource-control van de FormView een WHERE-conditie op te geven:

Master/Detail formulier met een GridView- en een FormView-control

Merk op dat de pagina twee SqlDataSource-controls bevat; één SqlDataSource is verbonden met de GridView-control, en de andere SqlDataSource is verbonden met de FormView-control.

Opmerkingen

  • Als je items bijwerkt, verwijdert of toevoegt, dan worden die wijzigingen niet automatisch getoond in de GridView. Om dit te bekomen voeg je respectievelijk de ItemUpdated-, ItemDeleted, en ItemInserted-events toe, met de volgende code:
GridView1.DataBind()
Hierdoor zal de GridView opnieuw gegevens ophalen en dus ververst worden.
  • Denk er ook weer aan om foutverwerking toe te voegen, net zoals bij de GridView. Dit doe je in dezelfde ItemUpdated-, ItemDeleted en ItemInserted-events.

Oefeningen[bewerken]

  1. Maak een pagina met twee GridViews: één voor albums en één voor nummers. De grids zijn gekoppeld via een master/detail-relatie. Voeg nu aan elke GridView een FormView toe om de records te kunnen bekijken in detail en om ze te kunnen wijzigen.

ChangeMode[bewerken]

Soms wil je een FormView-control gebruiken om onmiddellijk gegevens toe te voegen. Dat kan door de control direct in "Insert"-mode te schakelen. Dit doe je met de volgende regel (Bijvoorbeeld in Page_Load):

FormView1.ChangeMode(FormViewMode.Insert)

Als je de FormView-control alleen maar gebruikt om gegevens toe te voegen, bijvoorbeeld in een aparte pagina die niets anders doet, dan kan je hem default instellen op toevoegen. Zet daarvoor de DefaultMode-property op de waarde "Insert".

Je mag dan zelfs het ItemTemplate en het EditItemTemplate volledig verwijderen, alleen het InsertItemTemplate is dan nodig.

DetailsView[bewerken]

De DetailsView-control is ook een volledig nieuwe control in ASP.NET 2.0, die vergelijkbaar is met de FormView-control. Bij de DetailsView-control heb je geen templates, deze worden automatisch aangemaakt, en je kan de schikking niet wijzigen.

Daar staat tegenover dat de DetailsView-control alle velden onder elkaar toont in een nette tabel, en dat er verder niet veel code nodig is. Bij een aanpassing van het ontwerp van een tabel, bijvoorbeeld als een extra veld toegevoegd wordt, kan deze control de nieuwe situatie tonen zonder dat de pagina moet aangepast worden.

Je kan de DetailsView-control gebruiken zoals de FormView: apart, of in een master/detail-scenario.

Gegevens tonen met de DetailsView-control[bewerken]

De DetailsView-control is net zoals de FormView bedoeld om één enkel databankrecord te tonen. Voor elke kolom uit de databanktabel toont de DetailsView-control automatisch labels en waarden voor elke geselecteerde kolom. De volgende pagina toont hoe je de DetailsView-control kan gebruiken om één enkel record van de Authors-tabel te tonen.

detailsview.aspx

<html>
 <head runat="server">
   <title>Details View</title>
 </head>
<body>
 <form runat="server">
      <asp:DetailsView DataSourceID="AuthorsSource" Runat="Server" /> 
      <asp:SqlDataSource ID="AuthorsSource" 
      ConnectionString="Server=localhost;Database=Pubs;Trusted_Connection=true" 
      SelectCommand= "SELECT * FROM Authors WHERE au_id='172-32-1176'" 
         Runat="Server" />
 </form> 
</body> 
</html>

De DetailsView-control wordt hier verbonden met een SqlDataSource-control die de auteur opvraagt met ID 172-32-1176.

Merk op dat de labels automatisch de veldnamen uit de databank tonen. Net als bij de GridView-control kan je bij de DetailsView-control zelf controleren welke velden je toont. De manier is ook dezelfde: zet de AutoGenerateRows-property op false en voeg de juiste velden toe. Je gebruikt hier een <fields>-tag, terwijl het bij de GridView een <columns>-tag was.

De DetailsView-control ondersteunt dezelfde veldtypes als de GridView-control.

detailsviewvelden.aspx

<html>
 <head runat="server">
  <title>Details View</title>
 </head> 
<body>
 <form id="Form1" runat="server">
    <asp:DetailsView ID="DetailsView1" DataSourceID="AuthorsSource" 
        AutoGenerateRows="false" Runat="Server">
       <Fields>
          <asp:BoundField DataField="au_id" HeaderText="ID" ReadOnly="true" /> 
          <asp:BoundField DataField="au_lname" HeaderText="Naam" /> 
          <asp:BoundField DataField="au_fname" HeaderText="Voornaam" />
        </Fields>
    </asp:DetailsView> 
    <asp:SqlDataSource ID="AuthorsSource" 
       ConnectionString= "Server=localhost;Database=Pubs;Trusted_Connection=true" 
       SelectCommand="SELECT * FROM Authors WHERE au_id='172-32-1176'" 
           Runat="Server" />
 </form> 
</body> 
</html> 

Navigatie met de DetailsView-control[bewerken]

Hierboven heb je gezien hoe je met de DetailsView-control één enkel record kan tonen. Je kan de DetailsView ook gebruiken om van record naar record te navigeren.

Hiervoor moet je de AllowPaging-property op true instellen. De DetailsView-control maakt automatisch de nodige navigatieknoppen aan.

Je krijgt een Pager zoals bij de FormView. De instellingen gebeuren ook op dezelfde manier via de PagerSettings- en PagerStyle-property's.

Databaserecords wijzigen met de DetailsView-control[bewerken]

Met de DetailsView-control kan je ook databaserecords wijzigen, verwijderen en toevoegen. Dit is zelfs mogelijk zonder één regel code te schrijven.

Om te wijzigen gebruik je de AutoGenerateEditButton-, AutoGenerateDeleteButton-, en AutoGenerateInsertButton-property's. Net zoals bij de GridView moet je bij de DataSource-control waarden (SQL-opdrachten) opgeven voor UpdateCommand, InsertCommand, en DeleteCommand. Met de volgende pagina krijg je een DetailsView-control waarmee je de "Authors"-tabel kan wijzigen:

detailsviewedit.aspx

<html>
 <head runat="server">
  <title>Details View</title>
 </head> 
<body>
 <form runat="server">
   <asp:DetailsView DataSourceID="AuthorsSource" AllowPaging="true" 
       AutoGenerateEditButton="true" AutoGenerateDeleteButton="true" 
       AutoGenerateInsertButton="true" DataKeyNames="au_id" Runat="Server" /> 
   <asp:SqlDataSource ID="AuthorsSource" 
        ConnectionString= "Server=localhost;Database=Pubs;Trusted_Connection=true" 
        SelectCommand= "SELECT au_id,au_lname,au_fname,contract FROM Authors" 
        UpdateCommand= "UPDATE Authors SET au_lname=@au_lname, au_fname=@au_fname, 
           contract=@contract WHERE au_id=@au_id" 
        DeleteCommand="DELETE FROM Authors WHERE au_id=@au_id" 
        InsertCommand= "INSERT INTO Authors (au_id,au_lname,au_fname,contract) 
              VALUES (@au_id,@au_lname,@au_fname,@contract)" Runat="Server" /> 
 </form> 
</body> 
</html> 

Een Master/Detail pagina maken met de DetailsView-control[bewerken]

De procedure is precies dezelfde als voor de FormView-control. Zie boven.

Oefening[bewerken]

  1. Maak een pagina om publishers toe te voegen aan de databank "pubs". Gebruik een GridView en een DetailsView.

Vergelijking tussen de datacontrols[bewerken]

Control Wanneer gebruiken? Selected ItemTemplate Edit ItemTemplate opmaken in Visual Studio.NET meerdere kolommen per pagina gegevens automatisch tonen ingebouwd sorteren ingebouwd pagineren client-side sorteren en pagineren
Repeater
  • voor read-only weergave van gegevens
  • voor het tonen van gegevens naast elkaar
nee nee nee nee nee nee nee nee
DataList
  • voor het weergeven en wijzigen van gegevens in een ander formaat dan een tabel
  • voor het weergeven van items in meerdere kolommen naast elkaar (column layout)
  • indien er veel velden zijn (waardoor een DataGrid veel te breed wordt)
ja ja ja ja nee nee nee nee
DataGrid
  • voor het snel zonder veel ontwerp weergeven en wijzigen van gegevens in tabelvorm
ja ja ja nee ja ja ja nee
GridView
  • voor het snel zonder veel ontwerp weergeven en wijzigen van gegevens in tabelvorm
  • indien sorteren nodig is
  • indien pagineren nodig is
  • indien client-side sorteren en pagineren nodig is
ja ja ja nee ja ja ja ja
FormView
  • om één enkel record te tonen
nvt ja ja nee nee nvt ja nee
DetailsView
  • om één enkel record te tonen
nvt ja ja nee ja nvt ja nee

nvt=niet van toepassing

Informatie afkomstig van http://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.