Angular Js Pop Up

 

  Aşağıdaki kod bloğunda , MVC controller dan donen liste verisinin bir bölümünde angular js kullanılarak işlem yapılması gerçekleştirilmiştir. 

 

@model List<Ders>


<style>
    @@media (min-width: 1400px) {

        .my-modal-popup .modal-lg {
            width: 85%;
            margin-top: 100px;
        }
    }
</style>

<div ng-app="myModule">
    <div ng-controller="myController">
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <i class="icon-share font-dark"></i>
                    <span class="caption-subject font-dark bold uppercase">Ders Seçimi Tarih Yönetimi</span>
                </div>
                <div class="actions">
                   
                </div>
            </div>
        </div>

        @using (Html.BeginForm())
        {<div class="portlet light bordered">

                <table class="table table-sm table-bordered table-hover">
                    <thead>
                        <tr>
                            <th class="col-lg-10">Dönem Ad</th>
                            <th class="col-lg-1">Dersler</th>
                            <th class="col-lg-1">Aktif Mi?</th>
                            <th class="col-lg-1">Başlama Tarihi</th>
                            <th class="col-lg-1">Bitiş Tarihi</th>
                        </tr>
                    </thead>
                    <tbody>

                        @for (int i = 0; i < Model.Count; i++)
                        {


                            @Html.HiddenFor(x => x[i].DonemAd.Id)
                            @Html.HiddenFor(x => x[i].DonemAd.DonemAdi)
                            @Html.HiddenFor(x => x[i].DonemAd.ObsSinifNo)
                            @Html.HiddenFor(x => x[i].DersSecimiTarih.DonemAdId)
                            
                            <tr class="@(Model[i].DersSecimiTarih.Baslama>Model[i].DersSecimiTarih.Bitis?"bg-warning":"")">

                                <td>@Model[i].DonemAd.DonemAdi</td>
                                <td>
                                    <button type="button" ng-click="loadEditForm('@Model[i].DonemAd.Id')"  >
                                             Dersler
                                    </button>
                                </td>
                                <td>
                                    @Html.CheckBoxFor(x => x[i].DersSecimiTarih.AktifMi)
                                </td>
                                <td>
                                    @Html.TextBoxFor(x => x[i].DersSecimiTarih.Baslama, "{0:yyyy-MM-dd HH:mm}", new
                               {
                                   @class = "form-control",
                                   style = "width: 180px; ",
                                   type = "datetime-local"
                               })


                                </td>
                                <td>
                                    @Html.TextBoxFor(x => x[i].DersSecimiTarih.Bitis, "{0:yyyy-MM-dd HH:mm}", new
                               {
                                   @class = "form-control",
                                   style = "width: 180px; ",
                                   type = "datetime-local"
                               })


                                </td>
                            </tr>
                        }
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="5">
                                <button type="submit"
                                        class="btn btn-success pull-right">
                                    Kaydet
                                </button>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        }

    </div>
</div>


@section scripts{

    <script src="~/Scripts/Angular/ui-bootstrap-tpls-0.12.1.min.js"></script>
    <script>


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

        angular.module('myModule').controller('myController', ["$rootScope", "$scope", "$filter", "$modal", function ($rootScope, $scope, $filter, $modal) {

            $scope.checkItem = "";
            $scope.donemId = ""

            $scope.loadEditForm = function (donemId) {
                $scope.checkItem = "yes";
                $scope.donemId = donemId;
                $modal.open({
                    templateUrl: '@Url.Action("DonemDersSecim", "DersSecimTarih")/' + donemId,
                    controller: 'modalController',
                    scope: $scope,
                    size: 'lg',
                    windowClass: 'my-modal-popup'
                })
                    .result.then(function () {
                        //alert('closed');
                        //location.reload();
                    }, function () {
                        //alert('canceled');
                        //location.reload();
                    });
            };

        }]);

        angular.module('myModule').controller('modalController', ['$scope','$http', function ($scope, $http) {


                    $scope.initPage = function () {
                        //loadingSweet(1);

                        //müfredat derslerini listeler
                        var url = '@Url.Action("GetDersLists", "DersSecimTarih")/' + $scope.donemId;

                        $http({
                            method: "POST",
                            url: url
                        }).then(function (response) {
                           //console.log(JSON.stringify(response.data.data));
                            if (response.data.sonuc) {
                                $scope.SecilebilenDersler = response.data.data.secilebilenDersler;
                                $scope.AktifDersler = response.data.data.aktifDersler;
                               
                                loadingSweet(0);
                            } else {
                                toastr.warning(response.data.mesaj);
                                loadingSweet(0);
                            }
                        }, function (ex) {
                            alert(ex);

                        });
            }


         

            $scope.dersEkle = function (ders) {

                var index = $scope.SecilebilenDersler.map(item => item.DersKodu).indexOf(ders.DersKodu);
                if (index < 0) {
                    $scope.SecilebilenDersler.push(ders);
                } else {
                    toastr.warning(ders.DersAdi+ " dersi ekli");
                }
            }

            $scope.dersSil = function (ders) {
                var index = $scope.SecilebilenDersler.indexOf(ders);
                $scope.SecilebilenDersler.splice(index, 1);
            }



            $scope.dersleriKaydet = function () {

                var _data = {

                    secilebilenDersler: $scope.SecilebilenDersler,
                    donemId: $scope.donemId
                
                };
                loadingSweet(1);
                var url = '@Url.Action("SaveDersList")';

                console.log(_data);

                $http({
                    method: "POST",
                    url: url,
                    data:_data
                }).then(function (response) {
                   console.log(JSON.stringify(response.data.data));
                    if (response.data.sonuc) {
                        toastr.success(response.data.mesaj);
                     
                        loadingSweet(0);
                    } else {
                        toastr.warning(response.data.mesaj);
                        loadingSweet(0);
                    }
                }, function (ex) {
                    alert(ex);

                });

            }



}]);

    </script>









}

 

Modal Pop Up ile açlıan sayfa , ilgili actionn result sonucu aşağıdaki sayfa popup üzerinde açılmakta ve base sayfa üzerindeki angular controller nesnesi ile çalışmaktadır.

 

@{
    if (IsAjax)
    { }
    Layout = null;
}

<style>
    .bosluk {
        margin: 0 5px 0 5px;
    }
</style>


<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" ng-click="$dismiss()" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Secilebilir Dersler</h4>
</div>
<div class="modal-body" ng-init="initPage()">
    <div class="row">
        <div class="col-md-6 col-lg-6">
            <div class="portlet box red">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="fa fa-cogs"></i>Kayitli Dersler
                    </div>
                    <div class="tools">
                        <input type="text" style="color:black" ng-model="test">
                    </div>
                </div>
                <div class="portlet-body" style="height: 57vh; overflow: auto">

                    <table class="table table-bordered table-sm">
                        <thead>
                            <tr>
                                <th>Ders Kodu</th>
                                <th>Ders Adı</th>
                                <th>İşlem</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr   ng-repeat="ders in AktifDersler  | orderBy:'DersKodu' | filter:test">
                                <td>
                                    {{ders.DersKodu}}
                                </td>
                                <td>
                                    {{ders.DersAdi}}
                                </td>
                                <td>
                                    <button type="button" ng-click="dersEkle(ders)" class="btn btn-sm btn-success">
                                        +
                                    </button>
                                </td>
                            </tr>

                        </tbody>
                    </table>

                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-6">

            <div class="portlet box green bosluk">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="fa fa-cogs"></i>Secilebilen Dersler
                    </div>
                    <div class="tools">

                    </div>
                </div>
                <div class="portlet-body" style="height: 57vh; overflow: auto">

                    <table class="table table-bordered table-sm">
                        <tr ng-repeat="ders in SecilebilenDersler | orderBy:'DersKodu'">
                            <td>
                                {{ders.DersKodu}}
                            </td>
                            <td>
                                {{ders.DersAdi}}
                            </td>
                            <td>
                                <button class="btn btn-sm btn-danger" ng-click="dersSil(ders)" >
                                    -
                                </button>
                            </td>
                        </tr>
                    </table>

                </div>
            </div>
        </div>
    </div>
   
</div>

<div class="modal-footer">
    <button type="button" class="btn btn-default" ng-click="$dismiss()">Kapat</button>
    @*<button type="button" class="btn btn-primary" ng-click="$close()">Save changes</button>*@
    <button type="button" class="btn btn-primary" ng-click="dersleriKaydet()">Kaydet</button>
</div>




 

 

 

Müellifi: Hüsrev YILDIZ
Yayın Tarihi : 27.8.2022

Hüsrev YILDIZ