Written by:
9/10/2009 1:03 PM 

We're making our way through the conversion of an XMod project to XMod Pro. Thus far, we've converted the form to both and 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:

1. Add a Delete button to our template.
2. 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>&nbsp;</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>&nbsp;</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;" />

Trackback Print

Tags:

Categories:

Location: Blogs DNNDev_Blog

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Add Comment   Cancel