AngulrJS, BootStrap ve CodeFirst Kullanarak Kapsamlı Bir Formu Kaydetme

Selamlar,

Bugün bir başvuru formunu AngularJS, AngularUI ve Bootstrap kullanarak Mvc ortamında kaydediceğiz. Öncelikle kaydedilecek Memeber tablosunun pocosu yani ilgili modeli aşağıdaki gibidir.

Nugetten aşağıdaki paketler indirilir. MaskedInput, telefon girişinin belli bir formata göre girilmesi için kullanılmıştır. AngularUI DateTime nesnesi için kullanılmıştır. Geri kalan Css ve Validation işlmeleri için de bootstarp kullanılmıştır.

Packets

Ayrıca, tarih nesnesinde alanların Türkçe gelmesi için aşağıdaki Locale Paketi indirilebilir. Ben projede sadece ‘angular-locale_tr-tr.js’ dosyasını kullandım.

locale

HomeController.cs: Form içinde kullanılan html elementler aşağıda görüldüğü gibi doldurulmuştur. “GetCites()” methodu ile Il combosu doldurulmuştur. “GetCounties()” methodu ile şeçilen şehre göre ilgili ilçelerin doldurulması sağlanmıştır. “GetEducationLevel()” methodu ile eğitim durumu combosu doldurulmuştur. “GetScholls()” methodu eğer eğitim durumu öğrenci ise seçilen şehire göre tüm üniversiteler doldurulmuştur. Son olarak “SaveMemebers()” methodu ile ilgili üyelik kaydı, “Memebers” tablosuna ‘EntityFramework’  kullanılarak kaydedilmiştir.

Tablo

Addres: İl ve İlçe aynı tablo içindedir. Sadece ilin ‘ParentID‘si 219’dur. Boylece il olduğu anlaşılır. Ilcenin ‘ParentID’si seçilen ilin ID’sidir. Kısaca ‘ParentID”si 219’dan farklı tüm kayıtlar ilçe’dir. Bu alan adayın tüm adres bilgilerinin tutulduğu modeldir.

EducationLevel: Eğitim durumu combosunun doldurulduğu modeldir.

Schools: İlgili okul combosunun doldurulduğu ‘Schools’ modeli aşağıdaki gibidir.

Memebers.cshtml(Head): Kullanılacak kütüpahaneler aşağıdaki gibi sayfaya eklenir. Burada ‘BootStrap‘  ‘Jquery‘ kütüphanesine ihtiyaç duyar. ‘Jquery.maskedinput‘ telefon bilgisinin belli bir formata göre girilebilmesini sağlamaktadır. ‘angular-ui özellikle tarih girişi için kullanılmıştır. ‘angular-locale_tr-tr‘ tarihdeki türkçe dil desteği için kullanılmıştır. ‘bootstarp.min.js‘ ve ‘bootstrap.min.css‘ giriş formunun tasarım ve validation için kullanılmıştır.

UI ‘AngularJS’ ile tasarlanmıştır.  Öncelikle ilgili index.js aşağıdaki gibi oluşturulur.

Index.js:

  • Sayfa ilk yüklendiğinde  “$(document).ready()” function’ında telefon formatı ‘mask(“(999) 999-999”)‘ methodu ile belirlenmektedir.
  • [ui.bootstrap]” directive’i angular “app” module’üne injection yapılmıştır.
  • angularJS için tanımlı controller “Controller”‘dır. Ayrıca “$scope ve request,post için $http” directiveleri tanımlanmıştir.
  • “statu” evli, bekar durmunun default’u için true seçilerek atanmıştır.
  • “GetCites” ile şehirler, “GetEducatinLevel” ile eğitim durumu sayfa yüklenme esnasında ilgili modeller sayesinde doldurulmuştur.
  • Şehir seçildiği zaman “GetCounty” function’ı çağrılmakta ve seçilen şehre göre ilçeler getirilmektedir.
  • Save function’ı ile form’dan çekilen tüm datalar “Memebers” tablosuna kaydedilmek üzere “SaveMembers()” action’ına gönderilmektedir.
  • “GetScholls” function’ı seçilen İle göre öğrenim durumu öğrenci ise o ile ait okulları çekmektedir.
  • “toggleMin” değişkeni tarih için minimum zamanı belirler. “maxDate” tarihte seçilebilecek maximum zamanı belirler. “open1” tarihin tıklanınca açılmasını sağlar.  “setDates” ile default başlangıç tarihi(1980-01-01) atanmıştır. “formats” tarih formatını belirler. Default olarak “dd.MM.yyyy” seçilmiştir.

Memebers

Memebers.cshtml:  Yukarıda görüldüğü gibi ilgili üye formu aşağıdaki gibi ‘Angular.js’ sayesinde kodlanır.

  • Öncelikle form’un ‘ng-submit‘inde ‘Save()‘ function’ı çağrılmıştır.
  • ‘Ad Soyad’ alanı ‘ng-model‘ directive’i ile ‘angularJS’deki ‘Name‘ alanına bağlanmıştır.
  • İl combosu ‘ng-model’ ile ‘selectedCites’ modeline bağlanmıştır. Ayrıca ‘Cites’ listesi ‘ng-options’ ile gezilerek ‘Name’ ve ‘AddressId’ alanları ilgili comboya doldurulmaktadır. Son olarak ‘ng-change’ directive ile herhangi bir il seçildiğinde ‘GetCounty()’ methodunun çalışması ve buna bağlı ilçelerin doldurulması sağlanmıştır.
  • İlçe combosu AngularJS ‘Counties’ listesinden doldurulmakta, ilgili ‘Name’ ve ‘AddressId’ alanları ilçe combosuna basılmaktadır. Seçilen ilçe ‘selectedCounties’ alanına ‘ng-model’ ile bağlanmaktadır.

Tel2

  • Telefon ‘ng-model’ ile ‘Phone’ alanına atanmıştır. Ayrıca ‘jquery.maskedinput’ kullanılarak yukarıda görüldüğü gibi formatlama işi yapılmıştır.

Tel

  • Email ‘ng-model’ ile ‘Email’ alanına atanmıştır. ‘type= email’ seçilmiştir. Böylece yukarıda görüldüğü gibi geçerli bir email girilmediği zaman bootstrap tarafından uyarılır. Ve sayfa post olmaz. Uyarılma mesajı bilgisayarın bölgesel ayarlarına bağlıdır.

Date

  • Doğum tarihi ‘ng-model’ ile ‘dateofBirth’ alanına atanmıştır. Görünümü yukarıdaki gibidir.
  • Medeni halin’deki tüm radio elemanların hepsi ‘ng-model’ ile aynı property olan ‘state’e atanmıştır.

Egitim

  • Eğitim durumu ‘EducationLevel’ listesi gezilerek ‘Name’ ve ‘EducationLevelId’ alanları ilgili comboya basılmıştır. ‘ng-model’ ile ‘selectedEducationLevel’ alanına bağlanmıştır.
  • Çalışma Durumu radio alanı ‘ng-model’ ile ‘statu’ alanına bağlanmıştır.
  • Kurum/Firma, Çalışma Durumuna göre ng-show=”statu==1″ yani çalışıyorsa görünmektedir. ‘ng-model’ ile ‘FirmName’ alanına bağlanmıştır.
  • Meslek, Çalışma Durumuna göre ng-show=”statu==1″ yani çalışıyor ise görünmektedir. Ayrıca ‘ng-model’ ile ‘Job’ alanına bağlanmıştır. Bu alan her zaman gözükmediği için zorunlu bir alan değildir.

Okul

  • Okul Seçimi, Çalışma Durumuna göre ng-show=”statu==2″ yani öğrenci ise görünmektedir. Seçilen şehir’e bağlı okullar çekilerek doldurulan ‘Scholls’ listesi, içinde dönülerek ‘Name’ ve ‘SchoolId’ alanları ile ilgili comboya basılmıştır. Bu alan her zaman gözükmediği için zorunlu bir alan değildir.
  • Referans AD-SOYAD ‘ng-model’ ile ‘ReferenceName’ alanına bağlanmıştır.
  • Referans İletişim Bilgisi ‘ng-model’ ile ‘ReferencePhone’ alanına bağlanmıştır.
  • İletişim Türü checkBox nesnesi olarak ‘Haberdar Ol’ ‘ng-model’ ile ‘isKnow’ alanına, ‘Üye Ol’ : ‘isMemeber’ alanına bağlanmıştır.
  • Kaydet adında bir ‘Submit’ buttonu konulmuştur. Post durumunda Form’un ‘ng-submit’ durumunda tanımlanan ‘Save()’ function’ı çağrılmaktadır. Böylece ilgili başvuru kaydı kaydedilmektedir.

Requried

Validation işlemleri ‘Bootstrap’ ile yapılmaktadır. “required” yazan alanlar zorunludur. Örneğin zorunlu olan ilçe alanı yukarı görüldüğü gibi seçilmediği zaman sunucunun bölge ayarlarındaki dile göre uyarı verilmektedir. Önemli bir nokta görünümleri belli bir koşula bağlı olan alanların “requried” yapılması durumunda, ilgili alanlar görünmedikleri durumda uygulama aşağıdaki gibi bir hata verir. Bu hata için Firma bilgisi zorunlu yapılmış ama Durum=Öğrenci olarak seçildiği zaman ilgili combo gizlenmiş ve alttaki konu ile alakası olmayan bir hata alınmıştır. Çünkü zorunlu bir combo görünmemektedir. Çözüm için istenir ise Validation işlemleri için Angular_UI kullanılıp ‘ng-required’ directive’inden belli bir koşula göre(Combonun gözüküp gözükmemesine göre) zorunlu olup olmaması belirlenebilir. Bu örnekde zorunlu hal hiç kullanılmamıştır.

Error

Böylece AngularJS bir Mvc Formu, BootStrap kullanarak oluşturduk. Aynı zamanda  Bootstrap ile tüm validation işlemlerini yaptık. Son olarak angularJS ile aldığımız tüm datayı, Entity Framework kullanarak  MsSql DB’ye kaydettik.

Geldik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere hoşçakalın.

 

Herkes Görsün:

Sevebilirsin...

12 Yanıt

  1. serdar dedi ki:

    Elinize sağlık, uzun ve faydalı bir makale olmuş.
    Bir konuda yorumum olacak:
    kaydet aşamasında var members = {…} diyerek tüm değerleri model’e manuel set etmişsiniz. Burda angular’ın sunduğu two way datbinding’in önemli bir nimetinden vazgeçmiş olduk.

    html kontrollerimde ng-model=”Name” yazmak yerine “members.name” yazarsak, save aşamasında $scope.members otomatik olarak modelimizi içermiş olur.

    Tekrar elinize sağlık.

    • borsoft dedi ki:

      Selam Serder;
      Yorumuna kesinlikle katılıyorum 2 way binding. Ama ben custom control amaçlı bir değişkene atıyorum aslında. Ayrıca bir takım şeyelere de bakıyorum. Sadece makalede yok:) Katıkın için teşekkürler!

      İyi çalışmalar.

    • dsevgiler dedi ki:

      Merhaba 2. yöntemle $scope.members demeden önce membersı nasıl tanımlamak gerekiyor ?

      • borsoft dedi ki:

        Selam dsevgiler,

        Aşağıda görüldüğü gibi tanımlanıp: Yandaki gibi bir atama yapılabilirdi. Çünkü angular’da çift yönlü bağımlılık vardır.

        İyi çalışmalar.

        scope.Memebers={
        Name,
        GeoAdressId,
        Phone,
        EMail,
        .
        .
        IsActive
        };

  2. Hakan Bilgin dedi ki:

    Güzel bir makale olmuş teşekkürler :)

  3. Samet dedi ki:

    Yine çok güzel bir yazı olmuş, teşekkürler. :)

  4. Ümit dedi ki:

    Teşekkürler. Gerçekten faydalı bir yazı olmuş.

  5. Yağmur dedi ki:

    Merhaba, bende il seçtikten sonra ilçeler dolmuyor change çalışmıyor

    • borsoft dedi ki:

      Selamlar,

      Ne hata verdigini consoleda yazani gonderirsen cozum bulabiliriz:) Olmadi kodlari mail atarsan hatani soyliyebilirim:)

      Iyi calismalar.

Bir Cevap Yazın

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