Derinlemesine yazılım eğitimleri için kanalımı takip edebilirsiniz...

Ajax İle Web API Tetikleme

Merhaba,

Bu içeriğimizde Ajax mimarisi ile Web API’lerin nasıl tetiklendiğini inceleyeceğiz.

Elimizde aşağıdaki gibi bir web api olduğunu düşünelim.

    public class PersonelController : ApiController
    {
        NorthwindEntities db = new NorthwindEntities();
        public List<Personel> GetAll() => db.Personeller.OrderByDescending(p => p.PersonelID).Select(p => new Personel
        {
            Adi = p.Adi,
            PersonelID = p.PersonelID,
            SoyAdi = p.SoyAdi,
            Unvan = p.Unvan
        }).ToList();
        public IHttpActionResult Post(Personel personel)
        {
            if (personel != null)
            {
                db.Personeller.Add(personel);
                db.SaveChanges();
                return Ok($"{personel.Adi} {personel.SoyAdi} isimli personel başarıyla eklenmiştir.");
            }
            return Ok("Personel eklenirken beklenmeyen bir hatayla karşılaşıldı.");
        }
    }

Şimdi Ajax ile bu web apiye erişip, tetikleyelim.

            $("#btnGetPersoneller").click(function () {
                $("#allPersonel").html("");
                $.ajax({
                    url: "http://localhost:53156/api/personel/GetAll",
                    type: "GET",
                    crossDomain: true,
                    dataType: "json",
                    success: function (data) {
                        $.each(data, function (IndexNo, Deger) {
                            $("#allPersonel").append(Deger.Adi + " " + Deger.SoyAdi + "<br>");
                        });
                    },
                    error: function (xhr, status, error) {
                        alert("Hata : " + error);
                    }
                });
            });
    <div>
        <h2>Get</h2>
        <button id="btnGetPersoneller">Get All</button>
        <div id="allPersonel" style="color:chocolate;font-size:12px;"></div>
    </div>

Çalışmamızı kaydedip, çalıştırdığımızda aşağıdaki hatayla karşılaşacağız.
Ajax İle Web API Tetikleme

Hatamızı metinsel olarak ele alırsak eğer;

Failed to load http://****/api/personel/GetAll: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://****’ is therefore not allowed access.

şeklindedir. Bu hatayla ilgili daha önceki makalelerimizde domainler arası bir güvenlik meselesi olduğuna dair değerlendirmede bulunmuştuk.
Dolayısıyla bu hatadan kurtulabilmek için “Microsoft.AspNet.WebApi.Cors” kütüphanesini projemize entegre ederek “WebApiConfig” dosyası içerisinde aşağıdaki çalışmayı icra etmemiz gerekmektedir.

    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            var enableCorsAttribute = new EnableCorsAttribute("*",
                                                "Origin, Content-Type, Accept",
                                                "GET, PUT, POST, DELETE, OPTIONS");
            config.EnableCors(enableCorsAttribute);

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

Bu işlemden sonra yapmış olduğumuz çalışmayı tekrar çalıştırdığımızda sorunsuz bir şekilde web api ile bağlantı kurulup, tetiklendiğini göreceğiz.

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar dilerim…

Bunlar da hoşunuza gidebilir...

1 Cevap

  1. 08 Temmuz 2018

    […] önceki Ajax İle Web API Tetikleme başlıklı yazımda Ajax ile web apilere nasıl bağlantı kurulduğunu ve nasıl tetiklendiğini […]

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*