In my last article (CODE Magazine, November/December 2015), I showed you how to manipulate data in an HTML table using only JavaScript and jQuery. There were no post-backs, so the data didn't go anywhere. In this article, you'll use the same HTML and jQuery, but add calls to a Web API to retrieve and modify product data. It isn't necessary to go back and read the previous article; this article presents all of the HTML and the calls to work client-side and add the server-side code as well. I'll be using Visual Studio and .NET to build the Web API service, but the client-side coding is generic and can call a Web API built in any language or platform.

This article focuses on the four standard HTTP verbs that you use to work with the Web API: GET, POST, PUT, and DELETE. The GET verb retrieves a list of data, or a single item of data. POST sends new data to the server. The PUT verb updates an existing row of data. DELETE sends a request to remove a row of data. These verbs are used to map to a method you write in your Web API controller class. It's up to you to perform the retrieval of data, adding new rows, and updating and deleting of rows of data. Let's see how all of this works by building a project step-by-step.

Create a Product Information Page

If you're using Visual Studio, create a new ASP.NET Web Application project. Select “Empty” for the project template as you don't want any MVC, Web Forms, or even the Web API at this point. Add a new HTML page and name it Default.html. Open the Manage NuGet Packages dialog to add Bootstrap to your project. Bootstrap isn't necessary for the demo, but it does make your page look nicer.

Open up Default.html and drag the bootstrap.min.css file, the jQuery-1.9.1.min.js file, and the bootstrap.min.js files into the area of the page, as shown in the following code snippet.

<!DOCTYPE html>
<      html xmlns="<a href="http://www.w3.org/1999/xhtml";>http://www.w3.org/1999/xhtml<;/a>">
<      head      >
  <title></title>
  <link href="Content/bootstrap.min.css"
        rel="stylesheet" />
  <script src="Scripts/<a href="http://jquery-1.9.1.min.js">jquery-1.9.1.min.js</a>">
        </      script      >
  <script src="Scripts/<a href="http://bootstrap.min.js">bootstrap.min.js</a>">
        </      script      >
</      head      >
<      body      >
</      body      >
</      html      >

In the tag of this page, build the Web page that looks like Figure 1. Add a Bootstrap container, and a row and column within the element.

Figure 1: Use a product information page to list, add, edit, and delete data.
Figure 1: Use a product information page to list, add, edit, and delete data.

Add an

element with the words Paul's Training Company (or substitute your name).

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <h2>Paul's Training Company</h2>
      </div>
    </div>
  </div>
</body>

Immediately below the row you just added, create another row, and within that row, build the skeleton of an HTML table. Just build the header for the table, as you'll build the body dynamically in JavaScript using data retrieved from your Web API. To learn more about building a table dynamically in JavaScript, please read my last article entitled “CRUD in HTML, JavaScript, and jQuery”.

<div class="row">
  <div class="col-sm-6">
    <table id="productTable" 
           class="table table-bordered
                 table-condensed table-striped">
      <thead>
        <tr>
          <th>Product Name</th>
          <th>Introduction Date</th>
          <th>URL</th>
        </tr>
      </thead>
    </table>
  </div>
</div>

In Figure 1, you can see an “Add Product” button immediately below the table. This button is used to clear the input fields of any previous data so that the user can add new product data. After entering data into the input fields, the user clicks on the “Add” button to send the data to the Web API. Build this “Add Product” button by adding another Bootstrap row and column below the previous row. In the onClick event for this button, call a function named addClick. You haven't created this function yet, but you will later in this article.

<div class="row">
  <div class="col-sm-6">
    <button type="button" id="addButton" 
            class="btn btn-primary" 
            onclick="addClick();">
      Add Product
    </button>
  </div>
</div>

To create the product input area you see in Figure 1, the individual fields are placed inside a Bootstrap panel class. The panel classes are ideal to make the input area stand out on the screen separate from all other buttons and tables. A Bootstrap panel consists of the panel wrapper, a heading, a body, and a footer area made out of

tags.

<div class="row">
  <div class="col-sm-6">
    <div class="panel panel-primary">
      <div class="panel-heading">
        Product Information
      </div>
      <div class="panel-body">
      </div>
      <div class="panel-footer">
      </div>
   </div>
  </div>
</div>

All label and input fields are placed within the “panel-body”

tag. To achieve the input form look, use the Bootstrap
around the label and input fields. Use the “for” attribute on the