AngularJs / Code First / HTML5 / Jquery / MVC / Web
14

AngulrJS, BootStrap ve CodeFirst Kullanarak Kapsamlı Bir Formu Kaydetme

Yazar: borsoft · 16 Mart 2016

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.

  public partial class Members
    {
        [Key]
        public int MemberId { get; set; }

        [StringLength(100)]
        public string Name { get; set; }

        public long? GeoAdressId { get; set; }

        [StringLength(20)]
        public string Phone { get; set; }

        [StringLength(50)]
        public string EMail { get; set; }

        [Column(TypeName = "date")]
        public DateTime? Birthday { get; set; }

        public bool IsMaritalStatus { get; set; }

        public byte EducationLevelId { get; set; }

        public bool IsWorking { get; set; }

        [StringLength(200)]
        public string FirmName { get; set; }

        [StringLength(200)]
        public string Job { get; set; }

        public bool IsStudent { get; set; }

        public int? SchoolId { get; set; }

        [StringLength(100)]
        public string ReferenceName { get; set; }

        [StringLength(20)]
        public string ReferencePhone { get; set; }

        public bool IsBeaware { get; set; }

        public bool IsSingUp { get; set; }

        public bool IsActive { get; set; }
    }

public partial class Members

{

[Key]

public int MemberId { get; set; }

[StringLength(100)]

public string Name { get; set; }

public long? GeoAdressId { get; set; }

[StringLength(20)]

public string Phone { get; set; }

[StringLength(50)]

public string EMail { get; set; }

[Column(TypeName = "date")]

public DateTime? Birthday { get; set; }

public bool IsMaritalStatus { get; set; }

public byte EducationLevelId { get; set; }

public bool IsWorking { get; set; }

[StringLength(200)]

public string FirmName { get; set; }

[StringLength(200)]

public string Job { get; set; }

public bool IsStudent { get; set; }

public int? SchoolId { get; set; }

[StringLength(100)]

public string ReferenceName { get; set; }

[StringLength(20)]

public string ReferencePhone { get; set; }

public bool IsBeaware { get; set; }

public bool IsSingUp { get; set; }

public bool IsActive { get; set; }

}

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.

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.

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.

using DAL;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace CustomerWebForms.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Members()
        {
            return View();
        }

        public JsonResult GetCites()
        {
            using (CustomerWebFormsDB dbContext = new CustomerWebFormsDB())
            {
                var CityList = dbContext.Address.Where(ad => ad.ParentId == 219).OrderBy(or => or.Name).ToList();
                return Json(CityList, JsonRequestBehavior.AllowGet);
            }
        }
        public JsonResult GetCounties(int CityID)
        {
            using (CustomerWebFormsDB dbContext = new CustomerWebFormsDB())
            {
                var CityList = dbContext.Address.Where(co => co.ParentId == CityID).OrderBy(or => or.Name).ToList();
                return Json(CityList, JsonRequestBehavior.AllowGet);
            }
        }
        public JsonResult GetEducationLevel()
        {
            using (CustomerWebFormsDB dbContext = new CustomerWebFormsDB())
            {
                var EducationLevelList = dbContext.EducationLevel.ToList();
                return Json(EducationLevelList, JsonRequestBehavior.AllowGet);
            }
        }
        public JsonResult GetScholls(int AddressID)
        {
            using (CustomerWebFormsDB dbContext = new CustomerWebFormsDB())
            {
                var SchollList = dbContext.Schools.Where(sc => (sc.Name.Contains("lise") || sc.Name.Contains("üni")) && sc.AddressIdId == AddressID).OrderBy(or => or.Name).ToList();
                return Json(SchollList, JsonRequestBehavior.AllowGet);
            }
        }

        public void SaveMembers(Members members)
        {
            using (CustomerWebFormsDB dbContext = new CustomerWebFormsDB())
            {
                dbContext.Members.Add(members);
                dbContext.SaveChanges();
            }
        }
    }
}

using DAL;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace CustomerWebForms.Controllers

{

public class HomeController : Controller

{

// GET: Home

public ActionResult Members()

{

return View();

}

public JsonResult GetCites()

{

using (CustomerWebFormsDB dbContext = new CustomerWebFormsDB())

{

var CityList = dbContext.Address.Where(ad => ad.ParentId == 219).OrderBy(or => or.Name).ToList();

return Json(CityList, JsonRequestBehavior.AllowGet);

}

public JsonResult GetCounties(int CityID)

{

using (CustomerWebFormsDB dbContext = new CustomerWebFormsDB())

{

var CityList = dbContext.Address.Where(co => co.ParentId == CityID).OrderBy(or => or.Name).ToList();

return Json(CityList, JsonRequestBehavior.AllowGet);

}

public JsonResult GetEducationLevel()

{

using (CustomerWebFormsDB dbContext = new CustomerWebFormsDB())

{

var EducationLevelList = dbContext.EducationLevel.ToList();

return Json(EducationLevelList, JsonRequestBehavior.AllowGet);

}

public JsonResult GetScholls(int AddressID)

{

using (CustomerWebFormsDB dbContext = new CustomerWebFormsDB())

{

var SchollList = dbContext.Schools.Where(sc => (sc.Name.Contains("lise") || sc.Name.Contains("üni")) && sc.AddressIdId == AddressID).OrderBy(or => or.Name).ToList();

return Json(SchollList, JsonRequestBehavior.AllowGet);

}

public void SaveMembers(Members members)

{

using (CustomerWebFormsDB dbContext = new CustomerWebFormsDB())

{

dbContext.Members.Add(members);

dbContext.SaveChanges();

}

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.

[Table("Address")]
    public partial class Address
    {
        [Key]
        [Column(Order = 0)]
        [DatabaseGenerated(DatabaseGeneratedOption.None)]
        public int AddressId { get; set; }

        [Key]
        [Column(Order = 1)]
        public byte AddressTypeId { get; set; }

        [Key]
        [Column(Order = 2)]
        [DatabaseGenerated(DatabaseGeneratedOption.None)]
        public int ParentId { get; set; }

        [Key]
        [Column(Order = 3)]
        [StringLength(100)]
        public string Name { get; set; }

        [StringLength(10)]
        public string AddressCodeA2 { get; set; }

        [StringLength(10)]
        public string AddressCodeA3 { get; set; }

        public int? TelCode { get; set; }
    }

[Table("Address")]

public partial class Address

{

[Key]

[Column(Order = 0)]

[DatabaseGenerated(DatabaseGeneratedOption.None)]

public int AddressId { get; set; }

[Key]

[Column(Order = 1)]

public byte AddressTypeId { get; set; }

[Key]

[Column(Order = 2)]

[DatabaseGenerated(DatabaseGeneratedOption.None)]

public int ParentId { get; set; }

[Key]

[Column(Order = 3)]

[StringLength(100)]

public string Name { get; set; }

[StringLength(10)]

public string AddressCodeA2 { get; set; }

[StringLength(10)]

public string AddressCodeA3 { get; set; }

public int? TelCode { get; set; }

}

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

    [Table("EducationLevel")]
    public partial class EducationLevel
    {
        public byte EducationLevelId { get; set; }

        [StringLength(50)]
        public string Name { get; set; }
    }

[Table("EducationLevel")]

public partial class EducationLevel

{

public byte EducationLevelId { get; set; }

[StringLength(50)]

public string Name { get; set; }

}

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

public partial class Schools
    {
        [Key]
        [Column(Order = 0)]
        [DatabaseGenerated(DatabaseGeneratedOption.None)]
        public int SchoolId { get; set; }

        [Key]
        [Column(Order = 1)]
        public byte SchoolOwnerShipId { get; set; }

        [Key]
        [Column(Order = 2)]
        [StringLength(200)]
        public string Name { get; set; }

        [Key]
        [Column(Order = 3)]
        [StringLength(200)]
        public string CommercialName { get; set; }

        [Key]
        [Column(Order = 4)]
        [DatabaseGenerated(DatabaseGeneratedOption.None)]
        public int AddressIdId { get; set; }
    }

public partial class Schools

{

[Key]

[Column(Order = 0)]

[DatabaseGenerated(DatabaseGeneratedOption.None)]

public int SchoolId { get; set; }

[Key]

[Column(Order = 1)]

public byte SchoolOwnerShipId { get; set; }

[Key]

[Column(Order = 2)]

[StringLength(200)]

public string Name { get; set; }

[Key]

[Column(Order = 3)]

[StringLength(200)]

public string CommercialName { get; set; }

[Key]

[Column(Order = 4)]

[DatabaseGenerated(DatabaseGeneratedOption.None)]

public int AddressIdId { get; set; }

}

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.

<head>
    <script src="~/Scripts/jquery-2.2.0.min.js"></script>
    <script src="~/Scripts/jquery.maskedinput.min.js"></script>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
    <script src="~/Scripts/i18n/angular-locale_tr-tr.js"></script>
    <script src="~/Scripts/index.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width" />
    <title>Members</title>
</head>

<head>

<title>Members</title>

</head>

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.

$(document).ready(function () {
    $("#phone").mask("(999) 999-9999");
});

angular.module('app', ['ui.bootstrap']);
angular.module('app').controller('Controller', function ($scope, $http) {
    $scope.isKnow = true;
    $scope.statu = true;
    $scope.state = 2; //Bekar
    $http({
        method: 'GET',
        url: '/Home/GetCites'
    }).success(function (result) {
        $scope.Cites = result;
    });

    $http({
        method: 'GET',
        url: '/Home/GetEducationLevel',
    }).success(function (result) {
        //console.log(JSON.stringify(result));
        $scope.EducationLevel = result;
    });

    $scope.GetCounty = function () {
        $scope.selectedCounties = null;
        $scope.Counties = [];

        $scope.GetScholls();

        $http({
            method: 'GET',
            url: '/Home/GetCounties',
            params: { CityID: $scope.selectedCites }
        }).success(function (result) {
            $scope.Counties = result;
        });
    }
    $scope.Save = function () {

        var Members = {
            "Name": $scope.Name,
            "GeoAdressId": $scope.selectedCounties,
            "Phone": $scope.Phone,
            "EMail": $scope.Email,
            "Birthday": $scope.dateOfBirth,
            "IsMaritalStatus": $scope.state,
            "EducationLevelId": $scope.selectedEducationLevel,
            "IsWorking": $scope.IsStudent == 2 ? 1 : 0,
            "FirmName": $scope.FirmName,
            "Job": $scope.Job,
            "IsStudent": $scope.IsStudent == 2 ? 0 : 1,
            "SchoolId": $scope.selectedScholl,
            "ReferenceName": $scope.ReferenceName,
            "ReferencePhone": $scope.ReferencePhone,
            "IsBeaware": $scope.isKnow == true ? 1 : 0,
            "IsSingUp": $scope.isMember == true ? 1 : 0,
            "IsActive": 1
        };

        $http({
            method: 'POST',
            url: '/Home/SaveMembers',
            data: Members
        }).success(function () {
            document.location.href = "/Members";
        });

        console.log('Evlilik: ' + $scope.state);
        console.log('Dogum: ' + $scope.dateOfBirth)
        console.log("Save File");

        var day = $scope.dateOfBirth.getDate();
        var month = $scope.dateOfBirth.getMonth() + 1;
        var year = $scope.dateOfBirth.getFullYear();

        console.log(day + '.' + month + '.' + year);

    }

    $scope.GetScholls = function () {
        //console.log('Secili Il: '+$scope.selectedCites)
        $scope.selectedCites = $scope.selectedCites == null ? 0 : $scope.selectedCites;
        $scope.selectedScholl = null;
        $scope.Scholls = [];

        $http({
            method: 'GET',
            url: '/Home/GetScholls',
            params: { AddressID: $scope.selectedCites }
        }).success(function (result) {
            $scope.Scholls = result;
        });
    }

    $scope.toggleMin = function () {
        $scope.minDate = $scope.minDate ? null : new Date();
    };

    // Min value Disabled $scope.toggleMin();
    $scope.maxDate = new Date(2020, 5, 22);

    $scope.open1 = function () {
        $scope.popup1.opened = true;
    };

    $scope.setDate = function (year, month, day) {
        $scope.dateOfBirth = new Date(year, month, day);
    };

    $scope.dateOptions = {
        formatYear: 'yy',
        startingDay: 1
    };

    $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
    $scope.format = $scope.formats[2];
    //$scope.altInputFormats = ['M!/d!/yyyy'];

    $scope.popup1 = {
        opened: false
    };
    $scope.setDate(1980, 00, 01);
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

$(document).ready(function () {

$("#phone").mask("(999) 999-9999");

});

angular.module('app', ['ui.bootstrap']);

angular.module('app').controller('Controller', function ($scope, $http) {

$scope.isKnow = true;

$scope.statu = true;

$scope.state = 2; //Bekar

$http({

method: 'GET',

url: '/Home/GetCites'

}).success(function (result) {

$scope.Cites = result;

});

$http({

method: 'GET',

url: '/Home/GetEducationLevel',

}).success(function (result) {

//console.log(JSON.stringify(result));

$scope.EducationLevel = result;

});

$scope.GetCounty = function () {

$scope.selectedCounties = null;

$scope.Counties = [];

$scope.GetScholls();

$http({

method: 'GET',

url: '/Home/GetCounties',

params: { CityID: $scope.selectedCites }

}).success(function (result) {

$scope.Counties = result;

});

}

$scope.Save = function () {

var Members = {

"Name": $scope.Name,

"GeoAdressId": $scope.selectedCounties,

"Phone": $scope.Phone,

"EMail": $scope.Email,

"Birthday": $scope.dateOfBirth,

"IsMaritalStatus": $scope.state,

"EducationLevelId": $scope.selectedEducationLevel,

"IsWorking": $scope.IsStudent == 2 ? 1 : 0,

"FirmName": $scope.FirmName,

"Job": $scope.Job,

"IsStudent": $scope.IsStudent == 2 ? 0 : 1,

"SchoolId": $scope.selectedScholl,

"ReferenceName": $scope.ReferenceName,

"ReferencePhone": $scope.ReferencePhone,

"IsBeaware": $scope.isKnow == true ? 1 : 0,

"IsSingUp": $scope.isMember == true ? 1 : 0,

"IsActive": 1

};

$http({

method: 'POST',

url: '/Home/SaveMembers',

data: Members

}).success(function () {

document.location.href = "/Members";

});

console.log('Evlilik: ' + $scope.state);

console.log('Dogum: ' + $scope.dateOfBirth)

console.log("Save File");

var day = $scope.dateOfBirth.getDate();

var month = $scope.dateOfBirth.getMonth() + 1;

var year = $scope.dateOfBirth.getFullYear();

console.log(day + '.' + month + '.' + year);

}

$scope.GetScholls = function () {

//console.log('Secili Il: '+$scope.selectedCites)

$scope.selectedCites = $scope.selectedCites == null ? 0 : $scope.selectedCites;

$scope.selectedScholl = null;

$scope.Scholls = [];

$http({

method: 'GET',

url: '/Home/GetScholls',

params: { AddressID: $scope.selectedCites }

}).success(function (result) {

$scope.Scholls = result;

});

}

$scope.toggleMin = function () {

$scope.minDate = $scope.minDate ? null : new Date();

};

// Min value Disabled $scope.toggleMin();

$scope.maxDate = new Date(2020, 5, 22);

$scope.open1 = function () {

$scope.popup1.opened = true;

};

$scope.setDate = function (year, month, day) {

$scope.dateOfBirth = new Date(year, month, day);

};

$scope.dateOptions = {

formatYear: 'yy',

startingDay: 1

};

$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];

$scope.format = $scope.formats[2];

//$scope.altInputFormats = ['M!/d!/yyyy'];

$scope.popup1 = {

opened: false

};

$scope.setDate(1980, 00, 01);

});

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.

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.

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.

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.

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 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.

<body>
    <div class="container" ng-controller="Controller">
        <div class="jumbotron">
            <h1>Üye Haberdar Ol</h1>
            <p>Formu eksiksiz doldurunuz!</p>
        </div>
        <div>
            <form class="form-horizontal" role="form" ng-submit="Save()" name="myForm">
                <div class="form-group">
                    <label class="control-label col-sm-2" for="Name">AD-SOYAD :</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="Name" placeholder="Ad Soyad Giriniz" required ng-model="Name">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="city">İl:</label>
                    <div class="col-sm-3">
                        <select ng-model="selectedCites" ng-options="item.AddressId as item.Name for item in Cites" ng-change="GetCounty()" required>
                            <option value="">İl Seçiniz</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="city">İlçe:</label>
                    <div class="col-sm-3">
                        <select ng-model="selectedCounties" ng-options="item.AddressId as item.Name for item in Counties" required>
                            <option value="">İlçe Seçiniz</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="phone">Telefon :</label>
                    <div class="col-sm-3">
                        <input type="tel" class="form-control" id="phone" placeholder="Telefon Giriniz" ng-model="Phone" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="email">Eposta :</label>
                    <div class="col-sm-3">
                        <input type="email" class="form-control" id="email" placeholder="Eposta Giriniz" ng-model="Email" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="date">Doğum Tarihi :</label>
                    <div class="col-sm-3">
                        <div class="input-group date" data-provide="datepicker">
                            <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dateOfBirth" is-open="popup1.opened" min-date="minDate" max-date="maxDate" Today-text="Bugün" show-button-bar="true" close-text='Kapat' required />
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="state">Medeni Hali :</label>
                    <div class="col-sm-3">
                        <div class="radio">
                            <label><input type="radio" ng-model="state" value="1">Evli</label> 
                            <label><input type="radio" ng-model="state" value="2">Bekar</label>                                                       
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="education">Eğitim Durumu:</label>
                    <div class="col-sm-3">
                        <select ng-model="selectedEducationLevel" ng-options="item.EducationLevelId as item.Name for item in EducationLevel" required>
                            <option value="">Eğitim Durumu</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="statu">Durumu :</label>
                    <div class="col-sm-3">
                        <div class="radio">
                            <label><input type="radio" ng-model="statu" value="1">Çalışıyor</label>
                            <label><input type="radio" ng-model="statu" value="2">Öğrenci</label>
                        </div>
                    </div>
                </div>
                <div class="form-group" ng-show="statu==1" novalidate>
                    <label class="control-label col-sm-2" for="firms">Kurum/Firma :</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="firms" placeholder="Kurum/Firma Giriniz" ng-model="FirmName">                       
                    </div>
                </div>
                <div class="form-group" ng-show="statu==1">
                    <label class="control-label col-sm-2" for="job">Meslek :</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="job" placeholder="Meslek Giriniz" ng-model="Job">
                    </div>
                </div>
                <div class="form-group" ng-show="statu==2">
                    <label class="control-label col-sm-2" for="education">Okul Seçimi:</label>
                    <div class="col-sm-3">
                        <select ng-model="selectedScholl" ng-options="item.SchoolId as item.Name for item in Scholls">
                            <option value="">Okul Seçiniz</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="refName">Referans AD-SOYAD :</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="refName" placeholder="Referans Ad Soyad Giriniz" ng-model="ReferenceName" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="refContact">Ref İletişim Bilgisi :</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="refContact" placeholder="Referans İletişim Bilgisi Giriniz" ng-model="ReferencePhone" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="state">İletişim Türü :</label>
                    <div class="col-sm-3">
                        <div class="checkbox">
                            <label><input type="checkbox" ng-model="isKnow">Haberdar Ol</label>
                            <label><input type="checkbox" ng-model="isMember">Üye ol</label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">Kaydet</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

<body>

<h1>Üye Haberdar Ol</h1>

<p>Formu eksiksiz doldurunuz!</p>

</div>

<div>

<label class="control-label col-sm-2" for="Name">AD-SOYAD :</label>

</div>

<option value="">İl Seçiniz</option>

</select>

</div>

<option value="">İlçe Seçiniz</option>

</select>

</div>

<label class="control-label col-sm-2" for="phone">Telefon :</label>

</div>

<label class="control-label col-sm-2" for="email">Eposta :</label>

</div>

<label class="control-label col-sm-2" for="date">Doğum Tarihi :</label>

</span>

</div>

<label class="control-label col-sm-2" for="state">Medeni Hali :</label>

<label><input type="radio" ng-model="state" value="2">Bekar</label>

</div>

<label class="control-label col-sm-2" for="education">Eğitim Durumu:</label>

<option value="">Eğitim Durumu</option>

</select>

</div>

<label class="control-label col-sm-2" for="statu">Durumu :</label>

<label><input type="radio" ng-model="statu" value="1">Çalışıyor</label>

<label><input type="radio" ng-model="statu" value="2">Öğrenci</label>

</div>

<label class="control-label col-sm-2" for="firms">Kurum/Firma :</label>

</div>

<label class="control-label col-sm-2" for="job">Meslek :</label>

</div>

<label class="control-label col-sm-2" for="education">Okul Seçimi:</label>

<option value="">Okul Seçiniz</option>

</select>

</div>

<label class="control-label col-sm-2" for="refName">Referans AD-SOYAD :</label>

</div>

<label class="control-label col-sm-2" for="refContact">Ref İletişim Bilgisi :</label>

</div>

<label class="control-label col-sm-2" for="state">İletişim Türü :</label>

<label><input type="checkbox" ng-model="isKnow">Haberdar Ol</label>

</div>

<button type="submit" class="btn btn-default">Kaydet</button>

</div>

</form>

</div>

</body>

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.

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.

Etiketler: angularjs ASP.NET MVC 6 bootstrap code first html5

Bunlar da hoşunuza gidebilir...

serdar dedi ki:

16 Mart 2016, 09:47

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.

Cevapla
- borsoft dedi ki:
  
  16 Mart 2016, 18:10
  
  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.
  
  Cevapla
- dsevgiler dedi ki:
  
  22 Nisan 2016, 14:36
  
  Merhaba 2. yöntemle $scope.members demeden önce membersı nasıl tanımlamak gerekiyor ?
  
  Cevapla
  - borsoft dedi ki:
    
    22 Nisan 2016, 23:12
    
    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
    };
    
    Cevapla
Hakan Bilgin dedi ki:

16 Mart 2016, 11:45

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

Cevapla
- borsoft dedi ki:
  
  16 Mart 2016, 18:01
  
  Teşekkürler Hakan…
  
  Cevapla
Samet dedi ki:

16 Mart 2016, 17:07

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

Cevapla
- borsoft dedi ki:
  
  16 Mart 2016, 18:01
  
  Ben teşekkür ederim Samet :)
  
  Cevapla
Ümit dedi ki:

23 Mart 2016, 20:19

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

Cevapla
- borsoft dedi ki:
  
  23 Mart 2016, 22:22
  
  Ben teşekkür ederim.
  İşine yaradı ise ne mutlu bana:)
  
  Cevapla
Yağmur dedi ki:

28 Haziran 2016, 14:24

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

Cevapla
- borsoft dedi ki:
  
  29 Haziran 2016, 19:32
  
  Selamlar,
  
  Ne hata verdigini consoleda yazani gonderirsen cozum bulabiliriz:) Olmadi kodlari mail atarsan hatani soyliyebilirim:)
  
  Iyi calismalar.
  
  Cevapla
serkan dedi ki:

15 Mart 2017, 17:12

bunu angular 2 ile yaparsanız tadından yenmez.

Cevapla
- borsoft dedi ki:
  
  16 Mart 2017, 08:10
  
  Selamlar Serkan,
  Olmadı öyle de bir makale yazarız :)
  
  İyi çalışmalar.
  
  Cevapla

AngulrJS, BootStrap ve CodeFirst Kullanarak Kapsamlı Bir Formu Kaydetme

Bunlar da hoşunuza gidebilir...

14 Cevaplar

Bir cevap yazın Cevabı iptal et

About

Son Yazılar

Kategoriler

Son Yorumlar

Arşivler

AngulrJS, BootStrap ve CodeFirst Kullanarak Kapsamlı Bir Formu Kaydetme

Bunlar da hoşunuza gidebilir...

Ankara Bilge Adam’da 2015’in İlk Semineri Mvc 6.0 ile AngularJs ve SignalR Kullanarak Photo Gallery Yazma

Azure üzerinde Redis ve SignalR ile Tüm Clientlar İçin Data Consistency Sağlamak

AngularJS 2 Nedir? Bölüm 2

14 Cevaplar

Bir cevap yazın Cevabı iptal et

About

Son Yazılar

Kategoriler

Son Yorumlar

Arşivler