티스토리 뷰

🌈 .NET MVC

Web APIs

James Wetzel 2018. 6. 1. 11:37
728x90
반응형

File.cs

public class ProductsController : ApiController

    {

        Product[] products = new Product[]

        {

            new Product { Category = "category1",  Id = 1, Name = "name1", Price = 1 }

            , new Product { Category = "category2", Id = 2, Name = "name2", Price = 2 }

        };


        public IEnumerable<Product> GetAllProducts()

        {

            return products;

        }


        public IHttpActionResult GetProduct(int id)

        {

            var product = products.FirstOrDefault((p) => p.Id == id);

            if (product == null)

            {

                return NotFound();

            }

            return Ok(product);

        }

    }


index.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <title>Product App</title>

</head>

<body>


  <div>

    <h2>All Products</h2>

    <ul id="products" />

  </div>

  <div>

    <h2>Search by ID</h2>

    <input type="text" id="prodId" size="5" />

    <input type="button" value="Search" onclick="find();" />

    <p id="product" />

  </div>


  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>

  <script>

    var uri = 'api/products';


    $(document).ready(function () {

      // Send an AJAX request

      $.getJSON(uri)

          .done(function (data) {

            // On success, 'data' contains a list of products.

            $.each(data, function (key, item) {

              // Add a list item for the product.

              $('<li>', { text: formatItem(item) }).appendTo($('#products'));

            });

          });

    });


    function formatItem(item) {

      return item.Name + ': $' + item.Price;

    }


    function find() {

      var id = $('#prodId').val();

      $.getJSON(uri + '/' + id)

          .done(function (data) {

            $('#product').text(formatItem(data));

          })

          .fail(function (jqXHR, textStatus, err) {

            $('#product').text('Error: ' + err);

          });

    }

  </script>

</body>

</html>

728x90
반응형
저작자표시 비영리 동일조건