Bootstrap and Web API

Hi Guys,

This time I made a small webpage which consumes a JSON Web API Restfully. Hope you like it.











Solution

1) Create a Solution like following 

 Add New Project -> ASP.NET MVC 4 Web Application



 Select Web API as the Project Template

The Solution will look as following



















Right Click on Controllers -> Add -> Controller as follows name it as the TimeLogController. Remember you have to call it as Timelog if you name it TimeLog[Controller].













Then Open App_Start -> WebApiConfig.cs and add the following line to enable JSON format (default is XML format)

 //Add this to allow Json format through 
config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));

 Then Create a LINQ-SQL Classes for your database objects and add the following code to the TimeLogController.

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

 namespace MyWebAPI.Controllers
{
    public class TimeLogController : ApiController
    {
        /// <summary>
        /// GET api/timelog
        /// </summary>
        /// <returns></returns>
        public List<EP_TimeLog> Get()
        {
            using (TimeLogDataContext context = new TimeLogDataContext())
            {
                var timeLogs = from r in context.EP_TimeLogs
                               select r;

                 return timeLogs.ToList();
            }
            
        }

         /// <summary>
        /// GET api/timelog/id
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public List<EP_TimeLog> Get(long id)
        {
            using (TimeLogDataContext context = new TimeLogDataContext())
            {
                var timeLogs = from r in context.EP_TimeLogs
                               where r.ID == id
                               select r;

                 return timeLogs.ToList();
            }
        }
    }
}

 Finally add the TimeLogs.html file and call the API using jquery.

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Time Logs </title>
</head>
<body>
   

     <div class="panel panel-primary">
           <div class="panel-heading">
             <h1 >My Time Logs</h1>   
       
            </div>
    <div class="panel-body">
             
                   <div class="table-responsive">
                       <table class="table table-striped table-hover" id="timelogs"  width="100%"  >
<thead>
            <tr>


                
</tr>
<tr>
            <th>
                    Name
                </th>
                <th>
                    Description
                </th>
                <th>
                    Start Time
                </th>
                 <th>
                    End Time
                </th>
                <th>
                    Duration (Mins)
                </th>
           
                
</tr>

</thead>
<tbody>
</tbody>

</table>
                   </div>
            
             
            </div>
         </div>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
    <script src="Content/js/bootstrap.js"></script>
    <script src="Content/js/bootstrap.min.js"></script>
    <link href="Content/css/bootstrap.css" rel="stylesheet" />
    <link href="Content/css/bootstrap.min.css" rel="stylesheet" />
  <script>
      var uri = 'api/timelog';

       $(document).ready(function () {
          // Send an AJAX request
          $.getJSON(uri)
              .done(function (data) {
                  // On success, 'data' contains a list of timelogs.
                  $.each(data, function (key, item) {
                      // Add a list item for the timelog.
                      var row = '<td>' + item.Name + '</td><td>' + item.Description + '</td>'
                      + "<td>" + item.StartTime.replace("T", " ") + "</td><td>" + item.EndTime.replace("T", " ") + "<td>" + item.Duration + "</td>";
                      $('<tr>', { html: row })  
                          .appendTo($('#timelogs'));
                  });
              });
      });

       
     
  </script>

 </body>

</html>

Comments

Post a Comment