Introduction

This article introduces ASP.NET Web API debugging with the Route debugger. Here I provide an example of a Web API that is debugged with the Route debugger.

How the Router debugger works

There are three steps for debugging the Web API. These steps are as follows.

  1. The key action is contained by the data route then the action will be searched on the basis of the action name such as ASP.NET MVC, Web API.
    It finds all the actions that have the name action in the route data.
    There is every action supported by the HTTP methods; GET, POST, PUT and so on. If any action is not support by the HTTP methods then we eliminate those actions.
  2. The Key "action" that is not contained by the route data the action directly searched on the bases of the request method.
  3. After selecting the action in the two steps above, now examine the parameters of the action method and if the methods do not match the parameters then we eliminate those actions.
  4. All eliminated actions are marked by the NonAction attributes.

Now we create the Web API application for debugging with the Route debugger.

Step 1

Step 2

Add the Model class "Detail.cs".

Write this code in the "Detail.cs" class.

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. namespace hello.Models
  6. {
  7. public class Detail
  8. {
  9. public int id { get; set; }
  10. public string name { get; set; }
  11. public string Address { get; set; }
  12. public double salary { get; set; }
  13. }
  14. }

Step 3

Create a controller Class "DetailsController.cs".

Write this code in the "DetailsController.cs" controller.

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Net;
  5. using System.Net.Http;
  6. using System.Web.Http;
  7. using hello.Models;
  8. namespace hello.Controllers
  9. {
  10. public class DetailController : ApiController
  11. {
  12. Detail[] details = new Detail[]
  13. {
  14. new Detail{id = 1,name="smith", Address="Delhi", salary=50000},
  15. new Detail{id = 2,name="John",Address="Kanpur",salary= 40000},
  16. new Detail {id = 3,name="Manya",Address="Lucknow",salary=480000}
  17. };
  18. public IEnumerable<Detail> GetAllDetails()
  19. {
  20. return details;
  21. }
  22. public Detail GetDetailById(int Id)
  23. {
  24. var detail = details.FirstOrDefault((I) => I.id == Id);
  25. if (detail == null)
  26. {
  27. throw new HttpResponseException(HttpStatusCode.NotFound);
  28. }
  29. return detail;
  30. }
  31. public IEnumerable<Detail> GetItemsByAddress(string add)
  32. {
  33. return details.Where(
  34. (I) => string.Equals(I.Address, add,
  35. StringComparison.OrdinalIgnoreCase));
  36. }
  37. }
  38. }

Step 4

Now the code in the "index.cshtml" file. This file exists in the the "View" -> "Home" -> "index.cshtml".

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>ASP.NET Web API</title>
  5. <link href="../../Content/Site.css" rel="stylesheet" />
  6. <script src="~/Scripts/jquery-1.7.1.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function () {
  9. $.getJSON("api/detail/",
  10. function (data) {
  11. $.each(data, function (key, val) {
  12. var str = val.name + ': $' + val.salary;
  13. $('<li/>', { text: str })
  14. .appendTo($('#detail'));
  15. });
  16. });
  17. });
  18. function find() {
  19. var id = $('#detId').val();
  20. $.getJSON("api/detail/" + id,
  21. function (data) {
  22. var str = data.name + ': $' + data.salary;
  23. $('#detail').text(str);
  24. })
  25. .fail(
  26. function (jqXHR, textStatus, err) {
  27. $('#detail').text('Error: ' + err);
  28. });
  29. }
  30. </script>
  31. </head>
  32. <body id="body" >
  33. <div class="main-content">
  34. <div>
  35. <h1>Showing All Items</h1>
  36. <ul id="details"/>
  37. </div>
  38. <div>
  39. <label for="detId">ID:</label>
  40. <input type="text" id="detId" size="5"/>
  41. <input type="button" value="Search" onclick="find();" />
  42. <p id="detail" />
  43. </div>
  44. </div>
  45. </body>
  46. </html>

Step 5

Now we install the Route Debugger.

Step 6