Part 3 of the series covered modifying the form and template to enable adding and updating records. In Part 4 we'll handle deleting records.
We're making our way through the conversion of an XMod project to XMod Pro. Thus far, we've converted the form to both an Add and Edit form in XMod Pro; converted a GridView template to an HTML table; and added the buttons and code to Add and Edit our records. Now that we can add records, let's start deleting them.
Briefly what we'll be doing is:
- Add a Delete button to our template.
- Add a Delete command that will be executed when the Delete button is clicked.
Here's what our template looks like thus far:
<xmod:template>
<ListDataSource CommandText="SELECT InventoryId, LaptopModel, ServiceTag, SerialNumber, LaptopName, Owner, Location FROM LaptopInventory ORDER BY LaptopModel, LaptopName" />
<HeaderTemplate>
<table>
<tbody>
<tr>
<th> </th>
<th>Laptop Model</th>
<th>Service Tag</th>
<th>Serial Number</th>
<th>Laptop Name</th>
<th>Owner</th>
<th>Location</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<xmod:EditLink Text="Edit">
<parameter name="InventoryId" value='[[InventoryId]]' />
</xmod:EditLink>
</td>
<td>[[LaptopModel]]</td>
<td>[[ServiceTag]]</td>
<td>[[SerialNumber]]</td>
<td>[[LaptopName]]</td>
<td>[[Owner]]</td>
<td>[[Location]]</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</xmod:template>
<xmod:AddLink text="Add New Laptop" style="font-weight:bold;" />
Adding the Delete Command
The first thing we need to do is specify a SQL command to execute when the user clicks the delete button. For that we use the <DeleteCommand> tag. This is very similar to the <ListDataSource> that we already have in the template. We could put a stored procedure in here, but for the sake of simplicity we'll use a standard DELETE command:
<DeleteCommand CommandText="DELETE FROM LaptopInventory
WHERE InventoryId = @InventoryId">
<parameter name="InventoryId" />
</DeleteCommand>
Here's we're accepting a <parameter> called InventoryId and using that (@InventoryId) to determine which record to delete – a pretty straightforward delete command.
Next, let's look at the Delete button. To be consistent, we'll use a hyperlink, but we could use a standard push button (<xmod:DeleteButton>) or a clickable image (<xmod:DeleteImage>).
<xmod:DeleteLink Text="Delete">
<parameter name="InventoryId" value='[[InventoryId]]'/>
</xmod:DeleteLink>
If you'll recall in Part 3, we added an <xmod:EditLink> button and used the <parameter> tag to pass the InventoryId to the <EditForm>. Here we're using it to pass the InventoryId to the template's <DeleteCommand>.
Let's put it all together. The new sections are highlighted below
<xmod:template>
<ListDataSource CommandText="SELECT InventoryId, LaptopModel, ServiceTag, SerialNumber, LaptopName, Owner, Location FROM LaptopInventory ORDER BY LaptopModel, LaptopName" />
<DeleteCommand CommandText="DELETE FROM LaptopInventory WHERE InventoryId = @InventoryId">
<parameter name="InventoryId" />
</DeleteCommand>
<HeaderTemplate>
<table>
<tbody>
<tr>
<th> </th>
<th>Laptop Model</th>
<th>Service Tag</th>
<th>Serial Number</th>
<th>Laptop Name</th>
<th>Owner</th>
<th>Location</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<xmod:EditLink Text="Edit">
<parameter name="InventoryId" value='[[InventoryId]]' />
</xmod:EditLink>
<xmod:DeleteLink Text="Delete">
<parameter name="InventoryId" value='[[InventoryId]]' />
</xmod:DeleteLink>
</td>
<td>[[LaptopModel]]</td>
<td>[[ServiceTag]]</td>
<td>[[SerialNumber]]</td>
<td>[[LaptopName]]</td>
<td>[[Owner]]</td>
<td>[[Location]]</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</xmod:template>
<xmod:AddLink text="Add New Laptop" style="font-weight:bold;" />