Programmeren in ASP.NET/FormView en DetailsView

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

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:

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

ItemTemplate
EditItemTemplate
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:

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

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

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

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

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

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

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

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

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

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

Oefening

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

Vergelijking tussen de datacontrols

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

← GridView

Programmeren in ASP.NET

User-controls →