Bagaimana cara menambahkan API Web ke proyek Aplikasi Web ASP.NET MVC (5) yang ada?

146

Dengan asumsi Anda lupa mencentang kotak centang Web API (menambahkannya ke proyek) ketika membuat proyek MVC (5) baru, apa yang perlu Anda lakukan menambahkan Web API dan membuatnya bekerja?

Ada banyak pertanyaan migrasi, tetapi sepertinya tidak ada yang lengkap dan mutakhir untuk menambahkan API Web ke proyek MVC 5 dan tampaknya telah berubah dari beberapa jawaban lama.

Tambahkan Web API ke MVC 4

Menambahkan GlobalConfiguration.Configure (WebApiConfig.Register) MVC 4

lko
sumber

Jawaban:

253

Perbarui proyek MVC

Gunakan Nuget untuk mendapatkan API Web terbaru.

Project - Klik kanan - Kelola Paket Nuget - Cari API Web (Microsoft ASP.NET Web API ...) dan instal ke proyek MVC Anda.

Maka Anda masih harus mendapatkan perutean API Web agar berfungsi. Dari Microsoft Configuring ASP.NET Web API 2

Tambahkan WebApiConfig.cs ke App_Start / folder

using System.Web.Http;

namespace WebApplication1
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // TODO: Add any additional configuration code.

            // Web API routes
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );

        // WebAPI when dealing with JSON & JavaScript!
        // Setup json serialization to serialize classes to camel (std. Json format)
        var formatter = GlobalConfiguration.Configuration.Formatters.JsonFormatter;
        formatter.SerializerSettings.ContractResolver =
            new Newtonsoft.Json.Serialization.CamelCasePropertyNamesContractResolver();
        }
    }
}

Jika Anda memiliki Proyek MVC, ia akan memiliki Global.asax.cs , tambahkan rute baru. Urutan rute Global.asax.cs sangat penting. Perhatikan ada contoh usang yang digunakan WebApiConfig.Register

Tambahkan baris ini ke Global.asax.cs: GlobalConfiguration.Configure(WebApiConfig.Register);

protected void Application_Start()
{
    // Default stuff
    AreaRegistration.RegisterAllAreas();

    // Manually installed WebAPI 2.2 after making an MVC project.
    GlobalConfiguration.Configure(WebApiConfig.Register); // NEW way
    //WebApiConfig.Register(GlobalConfiguration.Configuration); // DEPRECATED

    // Default stuff
    FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
    RouteConfig.RegisterRoutes(RouteTable.Routes);
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

Bantuan WebAPI

Untuk mendapatkan ( sangat ) membantu WebAPI halaman bantuan , instal WebAPI.HelpPage. Lihat http://channel9.msdn.com/Events/Build/2014/3-644 (~ 42 menit) untuk mengetahui fungsinya. Itu terlihat sangat membantu!

Konsol Nuget: Install-Package Microsoft.AspNet.WebApi.HelpPage

Untuk memverifikasi, WebAPI berfungsi:

Ke folder pengontrol -> Tambahkan item baru -> Kelas Pengontrol API Web.

public class TestController : ApiController
{
    //public TestController() { }

    // GET api/<controller>
    public IEnumerable<string> Get()
    {
        return new string[] { "value1", "value2" };
    }

    // GET api/<controller>/5
    public string Get(int id)
    {
        return "value";
    }
    //...
}

Sekarang Anda dapat menguji di IE / FF / Chrome seperti biasa, atau di konsol JavaScript untuk pengujian non-dapatkan.

(Dengan hanya pengontrol di URL yang akan memanggil tindakan GET () di Pengontrol API Web baru, itu secara otomatis dipetakan ke metode / tindakan tergantung pada REST misalnya PUT / POST / GET / HAPUS. Anda tidak perlu menelepon mereka dengan tindakan seperti di MVC) URL langsung:

http://localhost:PORT/api/CONTROLLERNAME/

Atau gunakan jQuery untuk menanyakan pengontrol. Jalankan proyek, Buka konsol (F12 di IE) dan coba jalankan kueri Ajax. (Periksa PORT & CONTROLLERNAME Anda)

$.get( "http://localhost:PORT/api/CONTROLLERNAME/", function( data ) {
    //$( ".result" ).html( data );
    alert( "Get data received:" + data);
});

Catatan: Ada beberapa pro / kontra untuk dipertimbangkan saat menggabungkan MVC dan Web API dalam suatu proyek

Verifikasi Bantuan WebAPI: http://localhost:PORT/help

lko
sumber
@ Iko saya sudah melakukan semua yang Anda tulis pada kode tetapi saya punya kesalahan ketika saya menjalankannya. itu memberi saya kesalahan
ninjaXnado
1
Coba cari pesan kesalahan. Langkah-langkah ini pada dasarnya adalah apa yang diperlukan dalam kasus umum.
lko
13
"Urutan rute Global.asax.cs sangat penting" +1
Jim Aho
Saya tidak mengerti bagaimana cara menguji jika saya menambahkan Web API dengan benar? Apa sebenarnya yang harus saya tulis ke browser? Saya menulis http://localhost:12345/api/Get/5tetapi saya mendapat kesalahan.
jason
3
Saya menggunakan "cara lama" memanggil WebApiConfig.Register (GlobalConfiguration.configuration); dan saya tidak bisa lagi men-debug. Saya akan mulai debugging dan tidak akan pernah mencapai fungsi pengontrol saya. Saya mengubah ke "cara baru" GlobalConfiguration.Configure (WebApiConfig.Register); dan masalahnya telah diperbaiki.
D. Kermott