asp.net webアプリ

38555 ワード

公式のアドレス:
http://www.asp.net/web-api
中の資料はとてもそろっています。勉強の第一選択です。この資料を参考にしてください。
1.中で一番簡単で直接的な例
http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api
ASP.NET Web API 2
(C钻)入門
マイク華士によって手紙を送ります
2014年1月20日
印刷
HTTPはウェブページを生成するためだけではない。これはまた、強力なプラットフォームの建設公開サービスとデータのAppです。HTTPは簡単で、柔軟で、どこにもいません。考えられるほとんどのプラットフォームにHTTPライブラリがあります。したがって、HTTPサービスは、ブラウザ、モバイルデバイス、および従来のデスクトップアプリケーションを含む幅広いクライアントに到達することができます。
ASP.NET Web APIは.webアプリを生成するための.NETフレームワークのフレームワークです。本教程では、ASP.NET Web APIで作成したウェブAPIを使って製品リストに戻ります。先端のwebページではjQueryを使って結果を表示します。
完了したアイテムをダウンロードします。
要求
本教程はVisual Studio 2013を使用しています。
Web APIプロジェクトを作成します。
Visual Studioを起動する時、スタートページから新しい項目を選択します。または、ファイルメニューから新規作成を選択し、項目を選択します。
テンプレートペインでは、インストールされたテンプレートを選択し、Visual Cノードを展開します。Visual C〓では、Webを選択します。プロジェクトテンプレートのリストで、ASP.NET Webアプリケーションを選択します。プロジェクト名「ProducsApp」をクリックして確定します。
新しいASP.NET項目ダイアログで選択した空のテンプレートです。「フォルダとコアを追加する参照ファイル」に基づき、Web APIをチェックします。クリックして確認します
Web APIプロジェクトも作成できます。「Web API」テンプレートを利用してください。Web APIテンプレートは、ASP.NET MVCを使用してAPIのヘルプページを提供します。私が使っている空のテンプレートは本教程でMVCのないWeb APIを表示したいからです。一般的には、ASP.NET MVCでWeb APIが使われていることを知る必要はありません。
モデルを追加
モデルはオブジェクトで、あなたのアプリケーションのデータを表します。ASP.NET Web APIは、あなたのモデルをJSON、XMLまたは他のいくつかのフォーマットに自動的にプログレッシブ化し、HTTP応答メッセージの本文に書き込むことができます。クライアントが、プログレッシブフォーマットを読み込むことができる限り、オブジェクトは逆の順序で並べ替えられます。ほとんどのクライアントはXMLまたはJSONを解析できます。さらに、クライアントは、どのフォーマットがHTTP要求メッセージに設定された承認ヘッダを望むかを示すことができる。
まず簡単なモデルを作りましょう。製品を表しています。
ソリューションエクスプローラが見えない場合は、ビューメニューをクリックしてソリューションエクスプローラを選択してください。ソリューションリソースマネージャで、モデルフォルダを右クリックします。コンテキストメニューから、追加を選択して、クラスを選択します。
ネーミングクラス「Product」。以下の属性を Productクラスに追加します。
namespace ProductsApp.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Category { get; set; }
        public decimal Price { get; set; }
    }
}
コントローラを追加
Web APIでは、コントローラはHTTP要求を処理する対象である。私たちはコントローラを追加します。IDで指定された単一製品のリストに戻ります。
ASP.NET MVCを使ったら、コントローラに詳しいです。Web APIコントローラはMVCコントローラと似ていますが、コントローラ類ではなくAppController類を継承しています。
ソリューションエクスプローラでコントローラフォルダを右クリックします。追加を選択して、コントローラを選択します。
足場追加ダイアログでは、Web APIコントローラ-空を選択します。追加をクリックします
コントローラ追加ダイアログでは、「ProducsController」という名前のコントローラがあります。追加をクリックします
足場はコントローラフォルダというProductsController.csファイルを作成します。
フォルダをコントローラと名付けたあなたのコントローラに入れる必要はありません。簡単な方法でソースファイルのフォルダ名を整理します。
ファイルが開いていない場合は、ファイルをダブルクリックして開けてください。このファイルのコードは以下の内容に置き換えられます。
using ProductsApp.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web.Http;

namespace ProductsApp.Controllers
{
    public class ProductsController : ApiController
    {
        Product[] products = new Product[] 
        { 
            new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
            new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
            new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M } 
        };

        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);
        }
    }
}
例を簡単に保持するために、製品は固定された配列に保存され、コントローラ類の内部にあります。もちろん、実際のアプリケーションでは、データベースから他の外部データソースを検索または使用します。
コントローラが返却する製品を定義する2つの方法:
  • GetAllProducts方法は、IEnumerableタイプとして製品の完全なリストを返す。
  • GetProduct方法により、単一の製品を自身のIDで検索する。
  • こんなに簡単です仕事はweb APIです。各コントローラ上の方法は1つ以上のUriに対応しています。
    コントローラの方法
    URI
    Get All Products
    /appi/products
    Get Product
    /appi/products/idGetProductの方法では、URIのidは1つのプレースホルダである。例えば、IDが5の製品を取得する場合、URIはapi/products/5である。
    Web APIがHTTP要求をコントローラ方法にルーティングする方法についての詳細は、ASP.NET Web APIにおけるルーティングを参照してください。
    JavascriptとjQueryのWeb APIを呼び出します。
    このセクションでは、HTMLページを追加し、AJAXを使ってウェブAPIを呼び出します。私たちはjQueryを使ってAJAXを呼び出し、そのページの結果を更新します。
    ソリューションエクスプローラで、右クリックして追加を選択し、新規項目を選択します。
    新しい項目を追加するダイアログでは、Visual C嗳中、Webノードを選択し、HTMLページ項目を選択します。名前は「index.html」ページです。
    このファイルの内容を以下の内容で置換します。
    
     xmlns="http://www.w3.org/1999/xhtml">
    
      </span><span class="pln">Product App</span><span class="tag"/><span class="pln">
    </span><span class="tag"/><span class="pln">
    </span><span class="tag"/><span class="pln">
    
      </span><span class="tag"><div><span class="pln">
        </span><span class="tag"><h2/></span><span class="pln">All Products</span><span class="tag"/><span class="pln">
        </span><span class="tag"><ul><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"products"</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
      </span><span class="tag"/></ul></span></div></span><span class="pln">
      </span><span class="tag"><div><span class="pln">
        </span><span class="tag"><h2/></span><span class="pln">Search by ID</span><span class="tag"/><span class="pln">
        </span><span class="tag"><input/><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"prodId"</span><span class="pln"> </span><span class="atn">size</span><span class="pun">=</span><span class="atv">"5"</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
        </span><span class="tag"><input/><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"Search"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">find</span><span class="pun">();</span><span class="atv">"</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
        </span><span class="tag"><p><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"product"</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
      </span><span class="tag"/></p></span></span></span></div></span><span class="pln">
    
      </span><span class="tag"><script><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"</span><span class="tag">></script></span><span class="pln">
      </span><span class="tag"><script/></span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> uri </span><span class="pun">=</span><span class="pln"> </span><span class="str">'api/products'</span><span class="pun">;</span><span class="pln">
    
        $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
          </span><span class="com">// Send an AJAX request</span><span class="pln">
          $</span><span class="pun">.</span><span class="pln">getJSON</span><span class="pun">(</span><span class="pln">uri</span><span class="pun">)</span><span class="pln">
              </span><span class="pun">.</span><span class="pln">done</span><span class="pun">(</span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">data</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                </span><span class="com">// On success, 'data' contains a list of products.</span><span class="pln">
                $</span><span class="pun">.</span><span class="pln">each</span><span class="pun">(</span><span class="pln">data</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">key</span><span class="pun">,</span><span class="pln"> item</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                  </span><span class="com">// Add a list item for the product.</span><span class="pln">
                  $</span><span class="pun">(</span><span class="str">'<li>'</li></span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> text</span><span class="pun">:</span><span class="pln"> formatItem</span><span class="pun">(</span><span class="pln">item</span><span class="pun">)</span><span class="pln"> </span><span class="pun">}).</span><span class="pln">appendTo</span><span class="pun">(</span><span class="pln">$</span><span class="pun">(</span><span class="str">'#products'</span><span class="pun">));</span><span class="pln">
                </span><span class="pun">});</span><span class="pln">
              </span><span class="pun">});</span><span class="pln">
        </span><span class="pun">});</span><span class="pln">
    
        </span><span class="kwd">function</span><span class="pln"> formatItem</span><span class="pun">(</span><span class="pln">item</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
          </span><span class="kwd">return</span><span class="pln"> item</span><span class="pun">.</span><span class="typ">Name</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">': $'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> item</span><span class="pun">.</span><span class="typ">Price</span><span class="pun">;</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
    
        </span><span class="kwd">function</span><span class="pln"> find</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
          </span><span class="kwd">var</span><span class="pln"> id </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#prodId'</span><span class="pun">).</span><span class="pln">val</span><span class="pun">();</span><span class="pln">
          $</span><span class="pun">.</span><span class="pln">getJSON</span><span class="pun">(</span><span class="pln">uri </span><span class="pun">+</span><span class="pln"> </span><span class="str">'/'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> id</span><span class="pun">)</span><span class="pln">
              </span><span class="pun">.</span><span class="pln">done</span><span class="pun">(</span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">data</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                $</span><span class="pun">(</span><span class="str">'#product'</span><span class="pun">).</span><span class="pln">text</span><span class="pun">(</span><span class="pln">formatItem</span><span class="pun">(</span><span class="pln">data</span><span class="pun">));</span><span class="pln">
              </span><span class="pun">})</span><span class="pln">
              </span><span class="pun">.</span><span class="pln">fail</span><span class="pun">(</span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">jqXHR</span><span class="pun">,</span><span class="pln"> textStatus</span><span class="pun">,</span><span class="pln"> err</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                $</span><span class="pun">(</span><span class="str">'#product'</span><span class="pun">).</span><span class="pln">text</span><span class="pun">(</span><span class="str">'Error: '</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> err</span><span class="pun">);</span><span class="pln">
              </span><span class="pun">});</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
      </span><span class="tag"/><span class="pln">
    </span><span class="tag"/><span class="pln">
    </span><span class="tag"/></span></span></code></pre> 
      <p><span>         jQuery。</span><span>     ,  Microsoft Ajax CDN。</span><span>        http://jquery.com/  ASP.NET"Web API"       jQuery   。</span></p> 
      <h3>       </h3> 
      <p>         ,  “api/products”     HTTP GET   。</p> 
      <p><span>JQuery getJSON        AJAX   。</span><span>        JSON      。</span><span><code>done</code>          ,      。</span><span>    ,           DOM。</span></p> 
      <pre><code><span class="pln">$</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="com">// Send an AJAX request</span><span class="pln">
        $</span><span class="pun">.</span><span class="pln">getJSON</span><span class="pun">(</span><span class="pln">apiUrl</span><span class="pun">)</span><span class="pln">
            </span><span class="pun">.</span><span class="kwd">done</span><span class="pun">(</span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">data</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                </span><span class="com">// On success, 'data' contains a list of products.</span><span class="pln">
                $</span><span class="pun">.</span><span class="pln">each</span><span class="pun">(</span><span class="pln">data</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">key</span><span class="pun">,</span><span class="pln"> item</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                    </span><span class="com">// Add a list item for the product.</span><span class="pln">
                    $</span><span class="pun">(</span><span class="str">'<li>'</li></span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> text</span><span class="pun">:</span><span class="pln"> formatItem</span><span class="pun">(</span><span class="pln">item</span><span class="pun">)</span><span class="pln"> </span><span class="pun">}).</span><span class="pln">appendTo</span><span class="pun">(</span><span class="pln">$</span><span class="pun">(</span><span class="str">'#products'</span><span class="pun">));</span><span class="pln">
                </span><span class="pun">});</span><span class="pln">
            </span><span class="pun">});</span><span class="pln">
    </span><span class="pun">});</span></code></pre> 
      <h3>      ID</h3> 
      <p>        ID,   HTTP GET    "/ api/  <em>id</em>",  <em>id</em>    id。</p> 
      <pre><code><span class="kwd">function</span><span class="pln"> find</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> id </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#prodId'</span><span class="pun">).</span><span class="pln">val</span><span class="pun">();</span><span class="pln">
        $</span><span class="pun">.</span><span class="pln">getJSON</span><span class="pun">(</span><span class="pln">apiUrl </span><span class="pun">+</span><span class="pln"> </span><span class="str">'/'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> id</span><span class="pun">)</span><span class="pln">
            </span><span class="pun">.</span><span class="kwd">done</span><span class="pun">(</span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">data</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                $</span><span class="pun">(</span><span class="str">'#product'</span><span class="pun">).</span><span class="pln">text</span><span class="pun">(</span><span class="pln">formatItem</span><span class="pun">(</span><span class="pln">data</span><span class="pun">));</span><span class="pln">
            </span><span class="pun">})</span><span class="pln">
            </span><span class="pun">.</span><span class="pln">fail</span><span class="pun">(</span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">jqXHR</span><span class="pun">,</span><span class="pln"> textStatus</span><span class="pun">,</span><span class="pln"> err</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                $</span><span class="pun">(</span><span class="str">'#product'</span><span class="pun">).</span><span class="pln">text</span><span class="pun">(</span><span class="str">'Error: '</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> err</span><span class="pun">);</span><span class="pln">
            </span><span class="pun">});</span><span class="pln">
    </span><span class="pun">}</span></code></pre> 
      <p><span>       <code>getJSON</code>    AJAX   ,       ID      URI  。</span><span>                 JSON   。</span></p> 
      <h2>      </h2> 
      <p><span>  F5         。</span><span>  web       :</span></p> 
       
      <p>        ID,    ID      :</p> 
       
      <p>         ID,       HTTP   :</p> 
       
      <h2>   f12      HTTP      </h2> 
      <p><span>       HTTP    ,      HTTP            。</span><span>               9     F12       。</span><span>          9, <strong>f12  </strong>     。</span><span>  <strong>  </strong>   ,   <strong>    </strong>。</span><span>     web  ,  <strong>F5</strong>      web  。</span><span>                 web        HTTP   。</span><span>              :</span></p> 
      <p> </p> 
      <p><span>          uri"api/   /"。</span><span>    ,    <strong>        </strong>。</span><span>        ,                    。</span><span>  ,     <strong>    </strong>   ,                 “application/json”。</span></p> 
      <p> </p> 
      <p><span>            ,                  JSON。</span><span>            。</span><span>   ,web              。</span><span>               HTTP   ,    HTTP   ,  ,          HTTP        。</span></p> 
      <h2>    </h2> 
      <ul> 
       <li><span>     POST、PUT   DELETE     HTTP         ,        CRUD     Web API</span>.</li> 
       <li><span>     HTTP          web          ,   ASP.NET        </span>.</li> 
       <li><span>       web API                      。</span><span>Microsoft            10           Windows Azure     。</span><span>      Visual Studio web       Windows Azure Web      ,       Windows Azure    ASP.NET Web     </span>.</li> 
      </ul> 
      <div style="text-align:left;" class="social-bar"> 
       <span class="social-item"/> 
       <span class="social-item"/> 
      </div> 
      <h2>    </h2> 
      <div id="author-36870" class="author-box article clearfix">  
       <p><strong>     </strong>— —              -  。</p> 
      </div> 
      <br/> 
     </div> 
    </div>
                                </div>
                            </div>