ASP.NET Web API(C#)は簡単な添削を実現する
最近web Apiを勉強して、自分で1つの小さい例を作りました
1.vs 2015でASPを新規作成する.NET WEBアプリケーションプロジェクト
2.「新ASP.NET MVC 4プロジェクト」ダイアログボックスで、「Web API」を選択し、「OK」をクリック
3.Modelsフォルダでモデルを追加
はProductと命名された.cs
Productを編集します.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace HelloWebApi2.Models
{
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public decimal Price { get; set; }
}
}4.倉庫類の追加
Modelsフォルダに、IProductRepositoryという名前の倉庫インタフェースクラスを追加し、編集します.
ModelsフォルダにProductRepositoryを追加します.csクラスは、このインタフェースを実装するために使用されます.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace HelloWebApi2.Models
{
public class ProductRepository : IProductRepository
{
private List<Product> products = new List<Product>();
private int _nextId = 1;
//
public ProductRepository()
{
Add(new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 });
Add(new Product { Id = 2, Name = "Yp-yo", Category = "Yoys", Price = 3.75M });
Add(new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M });
}
// id
public Product Get(int id)
{
return products.Find(p => p.Id == id);
}
//
public Product Add(Product item)
{
if (item == null)
{
throw new ArgumentNullException("item");
}
item.Id = _nextId++;
products.Add(item);
return item;
}
//
public IEnumerable<Product> GetAll()
{
return products;
}
public void Remove(int id)
{
products.RemoveAll(p => p.Id == id);
}
//
public bool Update(Product item)
{
if (item == null)
{
throw new ArgumentNullException("item");
}
int index = products.FindIndex(p => p.Id == item.Id);
if (index == -1)
{
return false;
}
products.RemoveAt(index);
products.Add(item);
return true;
}
}
}5.コントローラを追加Controllersフォルダに、ProductsControllerというコントローラを追加します.
注意:このコントローラはApiControllerに継承されます.
using HelloWebApi2.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
namespace HelloWebApi2.Controllers
{
public class ProductsController : ApiController
{
// GET: Products
static readonly IProductRepository repository = new ProductRepository();
public IEnumerable<Product> GetAllProducts()
{
return repository.GetAll();
}
public Product GetProduct(int id)
{
Product item = repository.Get(id);
if (item == null)
{
//throw new HttpResponseException(HttpStatusCode.NotFound);
throw new Exception(" id ！");
}
return item;
}
public IEnumerable<Product>GetProductsByCategory(string category)
{
return repository.GetAll().Where(p => string.Equals(p.Category, category, StringComparison.OrdinalIgnoreCase));
}
public HttpResponseMessage PostProduct(Product item)
{
item = repository.Add(item);
var response = Request.CreateResponse<Product>(HttpStatusCode.Created, item);
string uri = Url.Link("DefaultApi", new { id = item.Id });
response.Headers.Location = new Uri(uri);
return response;
}
//Update
public void PutProduct(int id,Product product)
{
product.Id = id;
if (!repository.Update(product))
{
//throw new HttpResponseException(HttpStatusCode.NotFound);
throw new Exception(" ！");
}
}
//Delete
public void DeleteProduct(int id)
{
Product item = repository.Get(id);
if (item == null)
{
//throw new HttpResponseException(HttpStatusCode.NotFound);
throw new Exception(" ！");
}
repository.Remove(id);
}
}
}6.次に、ビューの作成を開始し、各メソッドのテストを容易にする前に、メソッドの要求のタイプ(メソッドの先頭に依存)と、メソッドを要求するurlを識別するコメントがあります.
これらのurlは規則的で、下図を参照:cshtml、すべての初期内容を削除し、次の内容に変更します.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
</head>
<body>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script> $(document).ready(function () { var load = function () { $("#products").empty(); $.getJSON("/api/products/", function (data) { $.each(data, function (key, val) { var str = val.Name + ':$' + val.Price; var ele = $("<li id=" + val.Id + ">" + "<strong>" + val.Id + "</strong>" +". "+ str + "</li>") ele.appendTo($('#products')); }); }); }; load(); // var Product = { create: function () { Id: ""; Name: ""; Category: ""; Price: ""; return Product; } } // :POST url: /api/Products // ProductsController.cs public HttpResponseMessage PostProduct(Product item) $("#addItem").click(function () { var newProduct = Product.create(); newProduct.Name = $("#name").val(); newProduct.Category = $("#category").val(); newProduct.Price = $("#price").val(); $.ajax({ url: "/api/Products", type: "POST", contentType: "application/json; charset=utf-8", data: JSON.stringify(newProduct), success: function () { alert(" ！"); load(); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(" ， ：" + textStatus + " " + errorThrown); } }); }); // Id :GET url: /api/Products/Id // ProductsController.cs public Product GetProduct(int id) $("#showItem").click(function () { var inputId = $("#id2").val(); $("#name2").val(""); $("#category2").val(""); $("#price2").val(""); $.ajax({ url: "/api/Products/" + inputId, type: "GET", contentType: "application/json; charset=urf-8", success: function (data) { $("#name2").val(data.Name); $("#category2").val(data.Category); $("#price2").val(data.Price); load(); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(" ， ：" + textStatus + " " + errorThrown); } }); }); // Id :PUT url: /api/Products/Id // ProductsController.cs public void PutProduct(int id, Product product) $("#editItem").click(function () { var inputId = $("#id2").val(); console.log(inputId) var newProduct = Product.create(); newProduct.Name = $("#name2").val(); newProduct.Category = $("#category2").val(); newProduct.Price = $("#price2").val(); $.ajax({ url: "/api/Products/" + inputId, type: "PUT", data: JSON.stringify(newProduct), contentType: "application/json; charset=urf-8", success: function () { alert(" ！ "); load(); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(" ， ：" + textStatus + " " + errorThrown); } }); }); // Id :DELETE url: /api/Products/Id // ProductsController.cs public void DeleteProduct(int id) $("#removeItem").click(function () { var inputId = $("#id2").val(); $.ajax({ url: "/api/Products/" + inputId, type: "DELETE", contentType: "application/json; charset=uft-8", success: function (data) { alert("Id " + inputId + " ！"); load(); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(" ， ：" + textStatus + " " + errorThrown); } }); }); }); </script>
<div id="body">
<div>
<h1>All Products</h1>
<ul id="products"></ul>
</div>
<section>
<h2> </h2>
Name:<input id="name" type="text" /><br />
Category:<input id="category" type="text" />
Price:<input id="price" type="text" /><br />
<input id="addItem" type="button" value=" " />
</section>
<section>
<br />
<br />
<h2> </h2>
Id：<input id="id2" type="text" /><br />
Name:<input id="name2" type="text" /><br />
Category:<input id="category2" type="text" />
Price:<input id="price2" type="text" /><br />
<input id="showItem" type="button" value=" " />
<input id="editItem" type="button" value=" " />
<input id="removeItem" type="button" value=" " />
</section>
</div>
</body>
</html>6.最終的な効果は以下の通りです.