# 1.7.4.Returning Hierarchical Data

\--

* 1.Create a DTO class for MembershipType

  ```
    namespace Vidly2.Dtos
    {
        public class MembershipTypeDto
        {
            public byte Id { get; set; }
            public short SignUpFee { get; set; }
            public byte DurationInMonth { get; set; }
            public byte DiscountRate { get; set; }
            public string Name { get; set; }

            public static readonly byte Unknown = 0;
            public static readonly byte PayAsYouGo = 1;
        }
    }
  ```
* 2.Modify App\_Start/MappingProfile.cs

  ```
    Mapper.CreateMap<MembershipType, MembershipTypeDto>();
  ```
* 3.Add a MembershipTypeDto member to CustomerDto

  `public MembershipTypeDto membershipType { get; set; }`
* 4.Modify CustomersController to include MembershipType

  ```
     using System.Data.Entity;
     public IHttpActionResult GetCustomers()
        {
            var customerDtos = _context.Customers
                .Include(c => c.membershipType)
                .ToList()
                .Select(Mapper.Map<Customer, CustomerDto>);
            return Ok(customerDtos);
        }
  ```
* 5.Modify index.cshtml

  ```
    <script>
   $(document).ready(function () {
    var table = $('#customers').DataTable({
     ajax: {
      url: "/api/customers",
      dataSrc: ""
     },
     columns: [
      {
       data: "name",
       render: function (data, type, customer) {
        return "<a fref = '/customers/edit/" + customer.id + "'>" + customer.name + "</a>";
       }
      },
      {
       data: "membershipType.name"
      },
      {
       data: "id",
       render: function (data) {
        return "<button class='btn-link js-delete' data-customer-id" + data + ">Delete</button>";
       }
      }
     ]
    });
    $("#customers").on("click", ".js-delete", function () {
     var button = $(this);

     bootbox.confirm("Are you want to delete this customer?", function (result) {
      if (result) {
       $.ajax({
        url: "/api/customers/" + button.attr("data-customer-id"),
        method: "DELETE",
        success: function () {
         table.row(button.parents("tr")).remove().draw();
        }
       });
     };
    });
    });
   });
  </script>
  ```