Uncategorized

Asp.net & Vue.js & Axios.js

Asp.net MVC projesine Vue.js ile Ajax isteği yaptıracağız. Nuget aracı ile Vue.js, Axios.js’i ve standart kütüphanede bulamadığım System.Web.Optimization kütüphanelerini projemize indiriyoruz. Layout.cshtml sayfasına <head> tagları arasına aşağıdaki kodları ekliyoruz.

    @Scripts.Render("~/Scripts/vue.js")
    @Scripts.Render("~/Scripts/axios.min.js");

Önce standart bir test yapalım.

<div id="denemeDiv">
    {{info}}
</div>
<script>
    var app = new Vue({
        el: "#denemeDiv",
        data: {
            info: ""
        },
        created: function () {
            this.loadValues();
        },
        methods: {
            loadValues: function () {
                this.info = "yukleniyor...";
                var app = this;
                axios.get("https://api.myjson.com/bins/838kt")
                    .then(function (response) {
                        app.info = JSON.stringify(response.data);
                    })
                    .catch(function (error) {
                        app.info = "Hata:" + error;
                    });
            }
        }
    });
</script>

Promise yötemini kullanarak bağlantı sağlandığı için hata alma olasılığı bulunuyor. Yukarıdaki kod sorunsuz çalışıyorsa eğer mvc projemizde aşağıdaki denemeyi yapabiliriz.

<div id="mvcTest">
    {{result}}
</div>
<script>
    var mypost = new Vue({
        el: "#mvcTest",
        data: {
            result: ""
        },
        created: async function () {
            await this.loadValues();
        },
        methods: {
            loadValues: function () {
                this.result = "yukleniyor...";
                var mypost = this;
                axios.get("@Url.Action("denemeJson")")
                    .then(function (response) {
                        mypost.result = JSON.stringify(response.data);
                    })
                    .catch(function (error) {
                        mypost.result = "Hata:" + error;
                    });
            }
        }
    });
</script>

Vue.js’nin marifetleri kendi sitesinde yazıyor. Axios kullanım yöntemi bakımındna birçok esneklik sağlıyor. Eşzamanlı bağlantılar, bağlantı esnasında iptal etme imkanı gibi standart javascript’te bulunan fetch imkanına ek katkıları bulunuyor. Bunlara ait örnekler de github sitesinden bulunabilir.

3 Comments

  • Mehmet
    16 Haziran 2019 - 00:56 | Permalink

    Bir uygulama tasarlıyorum kendimce.
    Lakin winforms veya wpf /xaml kullanmak istemiyorum.
    Ayrıca mono/Qt gibi gtk, gnome altyapısı da kullanmayacağım.

    İstediğim:
    AspNet Core uygulaması.
    Lakin VueJs tabanıyla çalışan
    “Ant desing/Vue” yi kullanmak istiyorum.
    Resmi adresi: https://vue.ant.design

    Bu şekil de bir Web uygulaması oluyor.
    Ayrıca Electron ile bu uygulamayı,
    “Desktop App” haline getirip windows da
    kullanmak istiyorum.
    Electron Resmi Adres: https://electronjs.org

    Tabi ki Electron bir javascript dil kütüphanesi
    Windows da ki sunucusu da (arkaplan da çalışan ve javascript uygulama/işlemlerini yöneten) Nodejs.
    Nodejs Resmi Adres: https://nodejs.org

    Electron’un C#’da kullanım için Electron.Net adında bir kütüphanesi de bulunmakta.
    Adresi: https://github.com/ElectronNET/Electron.NET

    Kısaca AspNet Core’nin server tarafında olduğu bir Web Host/App’in, Vue/Ant-Design ile client tarafında hizmet verdiği NodeJs/Electron ile de windows da bir masaüstü uygulaması haline gelen CSS/SASS desteğiyle görselliği artmış bir User Inerfaces’leri olan uygulama olmasını istiyorum.
    İnternet de birçok yerde kaynak var. Lakin Vue hakkında bilgi varsa Electron hakkında yeterince bilgi yok. Kaynakların çoğu da ingilizce vs.
    Bu konu da yardımcı olabilirmisiniz?

    • meto260
      16 Haziran 2019 - 04:31 | Permalink

      Hybrid veya bunun etrafında amaçlarla geliştirilmiş platformlara şu an için ilgi duymuyorum. Ama bu sorunuzu aklımda tutacağım ve karşıma çıkan kaynaklarda/insanlarda sorgulayacağım.

      2013 yılında yayınladığım bir yazıya da yorum yapmışsınız. O zamandan beri bakış açım dahil çok şey değiştiği için bilgiler tamamen güncelliğini yitirdi ve kaldırdım. Dikkatimi çektiğiniz için teşekkürler.

      • Mehmet
        16 Haziran 2019 - 09:45 | Permalink

        İlginiz için teşekkür ederim.
        Belki bildiğiniz veya yaptığınız bir uygulamadır diye düşündüm
        Malum kaynaklar da ingilizce olunca türkçe kaynak lazım oluyor.
        Yine de teşekkürler.

  • Bir cevap yazın

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