MVC CRUD(Create-Read-Update-Delete) Functions with JSON

Merhabalar arkadaşlar bu gün sizlere MVC(Model-View-Controller)’de JSON(Javascript Object Natation) kullanarak CRUD( Create – Read – Update – Delete) fonsiyonlarını Model First Mimarisini kullanarak anlatacağım. Yapacağız uygulama bir Personel uygulaması olacak. PersonelApp’de, Personelin Departmanı, Personelin Bilgileri, Personel Maaşlarının tutulduğu tablolar olacaktır. Uygulamamızı adım adım geliştirelim. İlk olarak veritabanımızı oluşturuyoruz.

Veritabanı tasarımımızı aşağıdaki resimdeki tasarlanmış şekilde oluşturunuz. Database ilişkileri aşağıda verilmiştir.

Veritabanı kodları aşağıda verilmiştir. Aşağıdaki kodları MSSQL Servere New Query ‘den yapıştırınız. Tablolar otomatik olarak oluşturulacaktır.

USE [PersonelAppDB]
GO
/****** Object: Table [dbo].[Department] Script Date: 8/2/2016 8:46:43 AM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Department](
[DepartmentID] [int] IDENTITY(1,1) NOT NULL,
[DepartmentName] [nvarchar](250) NULL,
CONSTRAINT [PK_Department] PRIMARY KEY CLUSTERED
(
[DepartmentID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO
/****** Object: Table [dbo].[Personel] Script Date: 8/2/2016 8:46:43 AM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Personel](
[id] [int] IDENTITY(1,1) NOT NULL,
[Name] [nvarchar](150) NULL,
[Surname] [nvarchar](150) NULL,
[DepartmentID] [int] NULL,
CONSTRAINT [PK_Personel] PRIMARY KEY CLUSTERED
(
[id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO
/****** Object: Table [dbo].[SalaryList] Script Date: 8/2/2016 8:46:43 AM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[SalaryList](
[SalaryID] [int] IDENTITY(1,1) NOT NULL,
[SalaryPrice] [decimal](18, 0) NULL,
[PersonelID] [int] NULL,
[SalaryDate] [datetime] NULL,
CONSTRAINT [PK_SalaryList] PRIMARY KEY CLUSTERED
(
[SalaryID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO
ALTER TABLE [dbo].[Personel] WITH CHECK ADD CONSTRAINT [FK_Personel_Department] FOREIGN KEY([DepartmentID])
REFERENCES [dbo].[Department] ([DepartmentID])
GO
ALTER TABLE [dbo].[Personel] CHECK CONSTRAINT [FK_Personel_Department]
GO
ALTER TABLE [dbo].[SalaryList] WITH CHECK ADD CONSTRAINT [FK_SalaryList_Personel] FOREIGN KEY([PersonelID])
REFERENCES [dbo].[Personel] ([id])
GO
ALTER TABLE [dbo].[SalaryList] CHECK CONSTRAINT [FK_SalaryList_Personel]
GO

Veritabanımızı oluşturduktan sonra şimdi uygulamamıza geçelim, File / New / Project tıklıyoruz, projenin ismi PersonelApp veriyoruz.

Projemizi oluşturduktan sonra Veritabanı modellerimizi oluşturacağız. Modelleri oluşturmadan önce SolutionExplorer’dan Projemiz PersonelApp’ye sağ tıklayıp, Add / New Folder diyoruz. Yeni Oluşan klosörümüzün ismine Entity diyoruz.Modellerimizi bu klosöre entegre edicez.

Entity Klosörüne sağ tıklayıp, Add / New Item diyoruz. Sol tarafta bulunan Visual C# sekmesinden Data Sekmesine geliyoruz. Sağ Taraftadaki panelden ADO.NET Entity Data Model’i seçiyoruz. İsminede PersonelModel diyoruz.

Add butonuna tıkladıkta sonra karşımıza Sihirbaz çıkacaktır. Bizim veritabanımız zaten hali hazırda olduğu için EF Designer from Database Diyoruz. Yani biz veritabanı modelini sisteme entegre edicez.

Daha sonra Next diyoruz devam ediyoruz.Karşınıza aşağıdaki gibi ekran çıkacaktır. “Yes Include the sensitive data in connection string” radiobutonuna tıklıyoruz. New Connection sekmesini tıklıyoruz, resimdeki gibi bilgileri giriyoruz.

Next diyoruz. Daha sonra açılan sihirbazda tablolarımızı seçiyoruz.

Puralize or singularize generated object names sekmesini kaldırıyoruz. Finish diyoruz. Veritabanı modelimiz Entity Klosörümüze oluşmuştur. Şimdi projemizin kodlamasına geçelim.

Projemizi açtıktan sonra Controller Sekmesine sağ tıklayıp Add / Contoller diyoruz karşımıza çıkan ekrandan MVC Controller Empty’i seçiyoruz. İsminede DepartmentList verdik. DepartmentListController.cs kodları aşağıdaki gibi olacaktır.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using PersonelApp.Entity;

namespace PersonelApp.Controllers
{
public class DepartmentListController : Controller
{
//CRUD Fonksiyonlarının Çekilmesi (CREATE-READ-UPDATE-DELETE)
// GET: DepartmentList
PersonelAppDBEntities4 _context = new PersonelAppDBEntities4();
public ActionResult Index()
{
//List model;
//DataGetir(out model); Modeli de return View’inin içine yazıcaz. return View(model).Bu iki satur DataGetir methodu ile alakalı

var Daplist = GetAll().Data;
return View(Daplist);
}

public void DataGet(out List list) // Method çağırarak yapma ama illa list tipinde olmak zorunda
{
list = _context.Department.ToList();
}
public List DataAl()
{
var Datalist = _context.Department.ToList();
return Datalist;
} // Methodun View de List olarak Datanın Listlenmesi sadece Index View’ine merthodun ismini çağırıyoruz.
public JsonResult GetbyID(int DepartmentID)
{
var q = _context.Department.SingleOrDefault(x => x.DepartmentID == DepartmentID);
return Json(q, JsonRequestBehavior.AllowGet);
} //READ
public JsonResult GetAll()
{

return Json(_context.Department.ToList(), JsonRequestBehavior.AllowGet);
}//GetAll Data
public JsonResult Create(Department data)
{
_context.Department.Add(data);
_context.SaveChanges();
return Json(1, JsonRequestBehavior.AllowGet);
} //Create Function
public JsonResult Update(Department data)
{
var result = 0;
var q = _context.Department.SingleOrDefault(x => x.DepartmentID == data.DepartmentID);
if (q != null)
{
q.DepartmentName = data.DepartmentName;
_context.SaveChanges();
result = 1;

}

return Json(result, JsonRequestBehavior.AllowGet);
}//Update Function
public JsonResult Delete(int DepartmentID)
{
var result = 0;
var q = _context.Department.SingleOrDefault(x => x.DepartmentID == DepartmentID);
if (q != null)
{
_context.Department.Remove(q);
_context.SaveChanges();
result = 1;
}
return Json(result, JsonRequestBehavior.AllowGet);
} // Delete Function
}
}

DepartmentList’in Index ActionResult’una sağ tıklayıp, Add View Diyoruz. Daha sonra Add butonuna tıklıyoruz.

Index kodları aşağıdaki gibidir.

@using PersonelApp.Entity;
@{
Layout = null;

}
@model List

Index

$(function () {
Sil();
Guncelle();
YeniEkle();
});

function YeniEkle() {
$(“#yeniekle”).click(function () {
$(“#depid”).val(“0”);
$(“#depadi”).val(“”);
$(‘.deptablo’).fadeIn();
});
}

// Json Kodları
function Sil() {
$(‘.depsil’).click(function () {

if (confirm(“Silmek istediğinizden Emin misiniz?”)) {

var Id = parseInt($(this).parent().parent().data(“id”));

$.ajax({
type: “POST”,
url: “@Url.Action(“Delete”,”DepartmentList”)”,
data: { DepartmentID: Id },
success: function () {
$(‘tr[data-id=”‘ + Id + ‘”]’).fadeOut(750);
},
dataType: “JSON”
});
}
});

};

//
function Guncelle() {
$(‘.depgun’).click(function () {

var Id = parseInt($(this).parent().parent().data(“id”));

$.ajax({
type: “POST”,
url: “@Url.Action(“GetbyID”,”DepartmentList”)”,
data: { DepartmentID: Id },
success: function (e) {
$(“#depid”).val(e.DepartmentID);
$(“#depadi”).val(e.DepartmentName);
$(‘.deptablo’).fadeIn();

},
dataType: “JSON”
});
});
$(‘.depguncelle’).click(function () {

var seturl = “@Url.Action(“Update”,”DepartmentList”)”;

if ($(“#depid”).val()==”0″)
{

seturl = “@Url.Action(“Create”,”DepartmentList”)”;
}
if(confirm(“Emin misin?”))
{
$.ajax({
type: “POST”,
url: seturl,
data: { DepartmentID: parseInt($(“#depid”).val()), DepartmentName:$(“#depadi”).val()},
success: function (e) {
// $(‘.deptablo’).fadeOut();
window.location.reload(false);
},
dataType: “JSON”
});

}
});

};