Angularjs ve ASP.NET MVC ile Javascript Diziler Kullanılarak Dinamik Çoklu Veri Gönderimi - Sending Dynamic Multi Post Data Using Javascript Arrays With Angularjs and ASP.NET MVC

Bu yazıda ASP.NET MVC üzerinde angularjs kullanılarak kullanıcıdan alınan çoklu veri girişlerinin bir dizi içinde tutularak AJAX ile sunucuya gönderilmesi ve sunucuda işlenmesi sağlanacaktır. Bu amaçla oluşturacağımız giriş kontrolünün CSS kodlarını tanımlayalım.

<style>

    .mainContainerAngularExample {

        width:300px;
        margin:10px;
    }

    .detailAngularExample {

        margin-top:10px;
    }

    .detailAngularExample input:focus {

        background-color:lightblue;
    }

    .footerAngularExample {

        margin-top:10px;
        text-align:right;
    }

    .arrayContainerAngularExample {

        margin-top:10px;
        color:coral    
    }

</style>

Sonraki aşamada DOM elementleri ve veri katmanı arasındaki bağlantıyı tanımlamak için angularjs kodlarını yazalım. Aşağıdaki kodlarda "myApp" modulü altında "MainCtrl" kontrolcüsü tanımlanmaktadır. Scope (Kapsam) içinde yer alan "addItem" fonksiyonu ile diziye elemen eklenmekte ve "removeItem" ile diziden eleman silinmektedir. Bu amaçla diziler üzerinde tanımlı "splice" fonksiyonu kullanılmıştır. Scope içinde yer alan "id" değişkeni ile dizi elemanlarının isimlendirilmesi yapılmaktadır. Ayrıca eğer gerekli olursa (dizi içinde yer alan elemanların tekrar ekmesi durumunda) "id" eşsiz anahtar olarak da kullanılabilir. Burada en önemli nokda dizi içinde nesne(object) kullanılmasıdır. "np-repeat" işlemi gerçekleştirirken kendi scope (kavramı) nesnesini yaratmaktadır. Bu sırada javascript prototype yapısından dolayı "primitive (ilkel)" değişkenlerin değeri programlama dillerindeki fonksiyonlara parametre gönderilirken ki durumla benzer olarak kopyalanmaktadır. Bu sebeple dizi içindeki değişikliğin "parentScope" üzerinde geçerli olabilmesi için dizi içinde referans olarak JSON nesnesi kullanılmıştır.

var app = angular.module('myApp', []);

app.controller('MainCtrl', ['$scope','$http',function ($scope, $http) {

    $scope.pages = [
        { val: 'Item 1' }
    ];

    $scope.id = 1;

    $scope.addItem = function (index) {

        $scope.id++;
        $scope.pages.splice(index + 1, 0, { val: 'Item ' + $scope.id });
    }

    $scope.removeItem = function (index) {

        if (index != 0)
            $scope.pages.splice(index, 1);
    }

    $scope.saveData = function () {

        $http.post("./Home/SaveData", $scope.pages).success(function () {

            alert("Veriler Başarıyla Kaydedildi.");

        }).error(function () {
            
            alert("Veriler Kaydedilirken Bir Hata Oluştu!");
        });
    }
}]);

Sonraki aşamada HTML kodlarını tanımlayalım. Aşağıdaki kodlarda "ng-model" niteliği kullanılarak giriş elementiyle dizi elemanı arasındaki ilişki tanımlanmıştır. "ng-click" kullanılarak kontrolcü içinde yer alan ilgili fonksiyonların tıklanma durumunda çalıştırılması sağlanmaktadır. "ng-hide" ile ilk elemandaki sil tuşunun görünmemesi sağlanmaktadır. "saveData" fonksiyonu kullanılarak üzerinde çalıştığımız dizi AJAX POST isteğiyle sunucuya gönderilmektedir.

<div class="mainContainerAngularExample" ng-app="myApp" ng-controller="MainCtrl">
<div class="detailAngularExample" ng-repeat="page in pages">
<input ng-model="page.val" type="text" />
        <button class="btn btn-default btn-xs" ng-click="addItem($index)" type="button"><span class="glyphicon glyphicon-plus"></span>EKLE</button>
        <button class="btn btn-default btn-xs" ng-click="removeItem($index)" ng-hide="$index === 0" type="button"><span class="glyphicon glyphicon-minus"></span>SİL</button>
    </div>
<div class="footerAngularExample">
<button class="btn btn-success" ng-click="saveData()" type="button"><span class="glyphicon glyphicon-save"></span>KAYDET</button>
    </div>
<div class="arrayContainerAngularExample">
CurrentArray = {{pages}}
    </div>
</div>

Sunucu tarafında "postTemplate" ile gelen verinin bağlanacağı yapı tanımlanmaktadır. Son olarak "SaveData" fonksiyonu ile aşağıdaki gibi AJAX ile gönderilen dizi işlenebilmektedir.

public struct postTemplate
{
     public string val { get; set; }
}

[HttpPost]
public ActionResult SaveData(List<postTemplate> Datas)
{
    return Json("OK");
}

Yukarıdaki kodların çalıştırılması sonucunda aşağıdaki sonuç elde edilmektedir:

CurrentArray = {{pages}}