AngularJS, Asp.net Mvc 5 ve Web Api ile Crud İşlemlerinin Gerçekleştirilmesi

  • Visual studiomuzu başlatıyoruz.
  • Create a new project.
  • Web template seçiyoruz ve ardından ASP.NET Web Application seçiyoruz.
  • Projeye isim verip, projenin oluşturalacağı dizini seçiyoruz.
  • Next tıklıyoruz.
  • MVC seçiyoruz ve code referanslardan Web Apiyi seçip projemize dahil ediyoruz.

MVC template

Kolay bir örnek olması açısından education adında bir entity type oluşturuyorum.

public partial class Education
    {
        public Education()
        {
            this.Members = new List<Member>();
        }

        public int ID { get; set; }
        public string Education1 { get; set; }
        public virtual ICollection<Member> Members { get; set; }
    }

Yeni bir context class oluşturalım.

public class EducationContext : DbContext
{
     public EducationContext()
         : base("name=DefaultConnection")
     {
         base.Configuration.ProxyCreationEnabled = false;
     }
     public DbSet<Education> Education{ get; set; }
     public DbSet<Member> Member{ get; set; }
}

Şimdi ise tüm entity classlar için tek tek repository oluşturmaktansa Generic Repository oluşturacağız ve her bir poco classlar için tek bir repository yeterli olacak.

public class GenericRepository<TEntity> : IGenericRepository<TEntity> where TEntity : class
    {
        private readonly EducationContext _context;
        private readonly DbSet<TEntity> _dbSet;

        public GenericRepository(EducationContext context)
        {
            _context = context;
            _dbSet = context.Set<TEntity>();
        }

        /// <summary>
        /// Tüm kayıtlar.
        /// </summary>
        /// <returns></returns>
        public virtual IQueryable<TEntity> GetAll()
        {
            return _dbSet;
        }

        /// <summary>
        /// Kayıt bul.
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public virtual TEntity Find(int id)
        {
            return _dbSet.Find(id);
        }

        /// <summary>
        /// Kayıt ekle.
        /// </summary>
        /// <param name="entity"></param>
        public virtual void Insert(TEntity entity)
        {
            _dbSet.Add(entity);
            _context.SaveChanges();
        }

        /// <summary>
        /// Kayıt güncelle.
        /// </summary>
        /// <param name="entity"></param>
        public virtual void Update(TEntity entity)
        {
            _dbSet.Attach(entity);
            _context.Entry(entity).State = EntityState.Modified;
            _context.SaveChanges();
        }

        /// <summary>
        /// Kayıt sil.
        /// </summary>
        /// <param name="entity">Kayıt</param>
        public virtual void Delete(TEntity entity)
        {
            if (_context.Entry(entity).State == EntityState.Detached)
            {
                _dbSet.Attach(entity);
            }
            _dbSet.Remove(entity);
            _context.SaveChanges();
        }
    }

Generic Repository’i türettiğimiz IGenericRepository interfacesini oluşturalım.

public interface IGenericRepository where TEntity : class
{
/// Tüm kayıtlar.
IQueryable GetAll(); ///
/// Kayıt bul. ///
TEntity Find(int id); ///
/// Kayıt ekle. ///
void Insert(TEntity entity); ///
/// Kayıt güncelle. ///
void Update(TEntity entityToUpdate); ///
/// Kayıt sil. ///
void Delete(TEntity entityToDelete);
}

Web api controller oluşturmadan önce education bilgileriyle işlem yapabilmek için service oluşturalım.

public class EducationService : IEducationService
    {
        private readonly IGenericRepository<Education> _educationRepository;

        public EducationService(IGenericRepository<Education> educationRepository)
        {
            _educationRepository = educationRepository;
        }
        public IQueryable<Education> GetAll()
        {
            var educations = _educationRepository.GetAll();
            return educations;
        }
        public Education Find(int id)
        {
            var educations = _educationRepository.GetAll().FirstOrDefault(a => a.ID == id);
            return educations;
        }

        public void Insert(Education education)
        {
            _educationRepository.Insert(education);
        }

        public void Update(Education education)
        {
            _educationRepository.Update(education);
        }

        public void Delete(Education education)
        {
            _educationRepository.Delete(education);
        }
    }

Şimdi ise servisimizin türetildiği IEducationService interfacesini oluşturalım

public interface IEducationService
{
IQueryable GetAll(); ///
Education Find(int id); ///
void Insert(Education education);
void Update(Education education);
void Delete(Education education); 

}

Şimdi sıra geldi web apiyi oluşturmaya. Web api controllerin içerisinde tüm transactionları gerçekleştirmek için tüm http methodları kullanacağız. Bunlar: GET, POST, PUT, DELETE methodlarıdır.

public class EducationApiController : ApiController
    {
        private readonly IEducationService service =  ServiceFactory.Get<IEducationService>();

        [HttpGet()]
        //[Route("api/educations")]
        public IEnumerable<Education> Get()
        {
                var list = service.GetAll().ToList().AsEnumerable();
                return list;
            
        }
        //[Route("api/education/{id}")]
        public Education Get(int id)
        {
            try
            {
                var education = service.GetAll().FirstOrDefault(p => p.ID == id);
                if(education == null)
                {
                    throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound));
                }
                return education;
            }
            catch(Exception ex)
            {
                return null;
            }
        }

        public HttpResponseMessage Post(Education education)
        {

                try
                {
                    var education1 = new Education();
                    service.Insert(education);

                    HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, education1);
                    response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = education1.ID }));
                    return response;
                }
                catch(Exception ex)
                {
                    return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
                    //unitofwork.Rollback();
                }
                
        }

        public HttpResponseMessage Put(Education education)
        {
            if (!ModelState.IsValid)
            {
                return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
            }

            try
            {
                service.Update(education);
            }
            catch (DbUpdateConcurrencyException ex)
            {
                return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);
            }

            return Request.CreateResponse(HttpStatusCode.OK);
        }

        public HttpResponseMessage Delete(int id)
        {
            var education1 = new Education();
            education1 = service.Find(id);
            if (education1 == null)
            {
                return Request.CreateResponse(HttpStatusCode.NotFound);
            }
            try
            {
                service.Delete(education1);
            }
            catch (DbUpdateConcurrencyException ex)
            {
                return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);
            }
            return Request.CreateResponse(HttpStatusCode.OK, education1);
        }


    }

Web api controllerda dependency injection kullanamadığımız için Service Factory adında generic bir helper ekleyeceğiz ve bu helper web api controllera Education Servicein enjekte edilmesini sağlayacak.

public static class ServiceFactory
    {
        public static THelper Get<THelper>()
        {
            if (HttpContext.Current != null)
            {
                var key = string.Concat("factory-", typeof(THelper).Name);
                if (!HttpContext.Current.Items.Contains(key))
                {
                    var resolvedService = DependencyResolver.Current.GetService<THelper>();
                    HttpContext.Current.Items.Add(key, resolvedService);
                }
                return (THelper)HttpContext.Current.Items[key];
            }
            return DependencyResolver.Current.GetService<THelper>();
        }
    }

Şimdi ise Manage Nuget Package Manager kullanarak Angular JS kütüphanelerini solutiona ekleyelim.

search AngularJS

Şimdi yeni bir javascript dosyası oluşturalım ve angular functionları ekleyelim. Bu angular controllerının adına educationController koyduk. İlerde oluşturacağımız view sayfasında controllerı bu isimle çağıracağız.

var myApp = angular.module('myApp', []).controller('educationController',
['$scope', '$http', function ($scope, $http) {
    $scope.loading = true;
    $scope.addMode = false;

    function GetEducations()
    {
        $http.get('/api/EducationApi/').success(function (data) {
            $scope.educations = data;
            $scope.loading = false;
        })
            .error(function () {
                $scope.error = "An Error has occured while loading posts!";
                $scope.loading = false;
            });
    }
    //Used to display the data
    GetEducations();

    $scope.toggleEdit = function () {
        this.education.editMode = !this.education.editMode;
    };
    $scope.toggleAdd = function () {
        $scope.addMode = !$scope.addMode;
    };

    //Used to save a record after edit
    $scope.save = function () {
        $scope.loading = true;
        var educate = this.education;
        $http.put('/api/EducationApi/put',  educate).success(function (data) {
            alert("Saved Successfully!!");
            educate.editMode = false;
            $scope.loading = false;
            GetEducations();
        }).error(function (data) {
            $scope.error = "An Error has occured while Saving Friend! " + data;
            $scope.loading = false;

        });
    };

    //Used to add a new record
    $scope.add = function () {
        $scope.loading = true;
        $http.post('/api/EducationApi/post', this.neweducation).success(function (data) {
            alert("Added Successfully!!");
            $scope.addMode = false;
            $scope.educations.push(data);
            $scope.loading = false;
            GetEducations();
        }).error(function (data) {
            $scope.error = "An Error has occured while Adding Friend! " + data;
            $scope.loading = false;

        });
    };

    //Used to edit a record
    $scope.deleteeducation = function () {
        $scope.loading = true;
        var educationid = this.education.id;
        $http.delete('/api/EducationApi/delete' + educationid).success(function (data) {
            alert("Deleted Successfully!!");
            $.each($scope.educations, function (i) {
                if ($scope.educations[i].ID === educationid) {
                    $scope.educations.splice(i, 1);
                    return false;
                }
            });
            $scope.loading = false;
            GetEducations();
        }).error(function (data) {
            $scope.error = "An Error has occured while Saving Friend! " + data;
            $scope.loading = false;

        });
    };

}]);

Shared klasörü altındaki _Layout.cshtml sayfasını açıp 2 farklı scripti render etmemiz gerekiyor.

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/angularjs")
    @Scripts.Render("~/bundles/education")

Sıradaki işlemimiz view oluşturup bunun üzerinde çalışmak.



@{
    ViewBag.Title = "EducationIndex";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Education </h2>
<style>
    #mydiv {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        background-color: grey;
        opacity: .8;
    }

    .ajax-loader {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -32px; /* -1 * image width / 2 */
        margin-top: -32px; /* -1 * image height / 2 */
        display: block;
    }
</style>
@*<script src="~/Scripts/EducationController.js"></script>*@
<div data-ng-app="myApp">
<div data-ng-controller="educationController" class="container">
    <strong class="error">{{ error }}</strong>
    <div id="mydiv" data-ng-show="loading">
        <img src="~/Images/ajax-loader.gif" class="ajax-loader" />
    </div>
    <p data-ng-hide="addMode"><a data-ng-click="toggleAdd()" href="javascript:;" class="btn btn-primary">Add New</a></p>
    <form name="addEducation" data-ng-show="addMode" style="width:600px;margin:0px auto;">
        <label>Education:</label><input type="text" data-ng-model="neweducation.Education1" required />

        <br />
        <br />
        <input type="submit" value="Add" data-ng-click="add()" data-ng-disabled="!addEducation.$valid" class="btn btn-primary" />
        <input type="button" value="Cancel" data-ng-click="toggleAdd()" class="btn btn-primary" />
        <br /><br />
    </form>
    <table class="table table-bordered table-hover" style="width:800px">
        <tr>
            <th>#</th>
            <td>Education</td>

        </tr>

        <tr data-ng-repeat="education in educations track by $index">
            <td><strong data-ng-hide="education.editMode">{{ education.id }}</strong></td>
            <td>
                <p data-ng-hide="education.editMode">{{ education.education1 }}</p>
                <input data-ng-show="education.editMode" type="text" data-ng-model="education.education1" />
            </td>
            <td>
                <p data-ng-hide="education.editMode"><a data-ng-click="toggleEdit(education)" href="javascript:;">Edit</a> | <a data-ng-click="deleteeducation(education)" href="javascript:;">Delete</a></p>
                <p data-ng-show="education.editMode"><a data-ng-click="save(education)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(education)" href="javascript:;">Cancel</a></p>
            </td>
        </tr>
    </table>
    <hr />


</div>
</div>

Şimdi uygulamamızı çalıştıralım.

Ekran Alıntısı1

Ekran Alıntısı2

Ekran Alıntısı3

Ekran Alıntısı4

Bu makalede MVC 5 ile AngularJS ve Web Api ile CRUD işlemleri nasıl yapılır onu öğrendik. Bir dahaki makalede görüşmek dileğiyle..