MVCر AngularJS زا هافتسا اب CRUD تایلمع یزاس هایپ هلاقم ... ·...

MVC در AngularJS استفاده از با CRUD پیاده سازی عملیات :عنوان مقاله

وتنظیم کننده : مرجع تخصصی برنامه نویسانتهیه

www.barnamenevisan.org info@barnamenevisan.org

آشنا شویم و عملیات حذف ، ویرایش ، افزودن را با AngularJS در این مقاله قصد داریم با فریم ورک قدرتمند

.پیاده سازی کنیم ASP.NET MVC استفاده از آن بر روی

ایجاد می کنیم . MVCابتدا یک برنامه از نوع

. را انتخاب می کنیم MVCدر این قسمت

. کنیم می مشاهده را پروژه ، ساختار Solution Explorerحال میتوان در

در بانک اطالعاتی ایجاد می Employee را به پروژه اضافه کنیم ، یک جدول به نام Model های کالس حال میخواهیم

. را بر روی آن انجام دهیم CRUD عملیات تا کنیم

CREATE TABLE [dbo].[Employee]( [Emp_Id] [int] IDENTITY(1,1) NOT NULL, [Emp_Name] [varchar](max) NULL, [Emp_City] [varchar](max) NULL, [Emp_Age] [int] NULL, CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED ( [Emp_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] TEXTIMAGE_ON [PRIMARY] GO

این برای. استفاده کنیم Entity Framework Data Firstپایگاه داده ، میخواهیم از روش CRUDبرای عملیات

. را انتخاب می کنیم New Item و کرده راست کلیک مدل روی بر ، کار

قرار EmployeeModel را آن نام و را انتخاب می کنیم ADO.NET Entity Data Modelحال در پنجره باز شده

. می دهیم

. SQL Server اطالعاتی بانک با ارتباط کردن برقرار

. کلیک می کنیم Finishرا انتخاب می کنیم و بر روی Employeeدر این قسمت جدول

ا بانک ساخته شده است . حال ارتباط ب Employeeمراجعه کنید مشاهده می کنید که مدل Modelحال به پوشه

. اطالعاتی برقرار شده است

Manage Nuget و را نصب می کنیم . بر روی پروژه راست کلیک کرده AngularJSبعد از این کار بسته

Packages را انتخاب می کنیم .

. را مشاهده کنید AngularJSمیتوان فایل Scriptsدر پوشه

کلیک راست کرده و یک Controllerمی کنیم ، برای این کار بر رو پوشه را ایجاد Employeeحال کنترلر

Controller خالی ایجاد می کنیم .

وارد کنید Controllerکد های زیر را در

using System.Collections.Generic; using System.Linq; using System.Web.Mvc; using AngularJSCURD.Models; namespace AngularJSCURD.Controllers { public class EmployeeController : Controller { // GET: Employee public ActionResult Index() { return View(); } /// <summary> /// /// Get All Employee /// </summary> /// <returns></returns> public JsonResult Get_AllEmployee() { using (AngularDBEntities Obj = new AngularDBEntities()) { List<Employee> Emp = Obj.Employees.ToList(); return Json(Emp, JsonRequestBehavior.AllowGet); } } /// <summary> /// Get Employee With Id /// </summary> /// <param name="Id"></param> /// <returns></returns> public JsonResult Get_EmployeeById(string Id) { using (AngularDBEntities Obj = new AngularDBEntities()) { int EmpId = int.Parse(Id);

return Json(Obj.Employees.Find(EmpId), JsonRequestBehavior.AllowGet); } } /// <summary> /// Insert New Employee /// </summary> /// <param name="Employe"></param> /// <returns></returns> public string Insert_Employee(Employee Employe) { if (Employe != null) { using (AngularDBEntities Obj = new AngularDBEntities()) { Obj.Employees.Add(Employe); Obj.SaveChanges();

return "افزودن با موفقیت انجام شد ";

} } else {

return "لطفا دوباره امتحان کنید";

} } /// <summary> /// Delete Employee Information /// </summary> /// <param name="Emp"></param> /// <returns></returns> public string Delete_Employee(Employee Emp) { if (Emp != null) { using (AngularDBEntities Obj = new AngularDBEntities()) { var Emp_ = Obj.Entry(Emp); if (Emp_.State == System.Data.Entity.EntityState.Detached) {

Obj.Employees.Attach(Emp); Obj.Employees.Remove(Emp); } Obj.SaveChanges();

return "حذف با موفیقت انجام شد";

} } else {

return "دوباره امتحان کنید ";

} } /// <summary> /// Update Employee Information /// </summary> /// <param name="Emp"></param> /// <returns></returns> public string Update_Employee(Employee Emp) { if (Emp != null) { using (AngularDBEntities Obj = new AngularDBEntities()) { var Emp_ = Obj.Entry(Emp); Employee EmpObj = Obj.Employees.Where(x => x.Emp_Id == Emp.Emp_Id).FirstOrDefault(); EmpObj.Emp_Age = Emp.Emp_Age; EmpObj.Emp_City = Emp.Emp_City; EmpObj.Emp_Name = Emp.Emp_Name; Obj.SaveChanges();

return " شدبروز رسانی با موفقیت انجام ";

} } else {

return "لطفا دوباره امتحان کنید ";

خالی ایجاد می Viewکلیک راست کرده و یک Indexرا ایجاد کرده ایم ، بر روی متد Controllerبعد از این که

. یمکن

. وارد می کنیم Indexکد های زیر را در

@{ ViewBag.Title = "Index"; } <script src="~/Scripts/angular.min.js"></script> <script src="~/Scripts/app.js"></script> <style> .btn-space { margin-left: -5%;

background-color: cornflowerblue; font-size: large; } </style> <div ng-app="myApp"> <div ng-controller="myCtrl" ng-init="GetAllData()" class="divList">

<p class="divHead">لیست کاربران</p>

<b>شماره</b>

</td> <td>

</td> <td>

</td> <td>

</td> <td>

<b>تنظیمات</b>

</td> </tr> <tr ng-repeat="Emp in employees"> <td> {{Emp.Emp_Id}} </td> <td> {{Emp.Emp_Name}} </td> <td> {{Emp.Emp_City}}

</td> <td> {{Emp.Emp_Age}} </td> <td> <input type="button" class="btn btn-warning" value="Update" ng-click="UpdateEmp(Emp)" /> <input type="button" class="btn btn-danger" value="Delete" ng-click="DeleteEmp(Emp)" /> </td> </tr> </table> <div class="form-horizontal" role="form"> <div class="container"> <div class="row"> <h2>

<span id="spn">افزودن</span>

</h2> </div> <div class="row"> <div class="col-sm-6 col-lg-4"> <div class="form-group">

<input type="button" id="btnSave" class="form-control btn-space" value="ارسال"

ng-click="InsertData()" /> </div> </div> </div> </div> </div> @Html.Hidden("EmpID_") </div>

ن آن کد های ایجاد کنیم ، و درو Java Script، نیاز است یک فایل AngularJSدر CURDبرای پیاده سازی عملیات

. ابتدا ، فایل اسکریپت ایجاد می کنیم و کدهای زیر را در آن وارد می کنیم.الزم را وارد کنید

کد جاوااسکریپت

var app = angular.module("myApp", []); app.controller("myCtrl", function($scope, $http) { $scope.InsertData = function() { var Action = document.getElementById("btnSave").getAttribute("value");

if (Action === "ارسال") {

$scope.Employe = {}; $scope.Employe.Emp_Name = $scope.EmpName; $scope.Employe.Emp_City = $scope.EmpCity; $scope.Employe.Emp_Age = $scope.EmpAge; $http({ method: "post",

",http://localhost:62933/Employee/Insert_Employeeurl: " datatype: "json", data: JSON.stringify($scope.Employe) }) .then(function(response) { alert(response.data); $scope.GetAllData(); $scope.EmpName = ""; $scope.EmpCity = ""; $scope.EmpAge = ""; }); } else { $scope.Employe = {}; $scope.Employe.Emp_Name = $scope.EmpName; $scope.Employe.Emp_City = $scope.EmpCity; $scope.Employe.Emp_Age = $scope.EmpAge; $scope.Employe.Emp_Id = document.getElementById("EmpID_").value; $http({ method: "post",

",http://localhost:62933/Employee/Update_Employeeurl: " datatype: "json", data: JSON.stringify($scope.Employe) })

.then(function(response) { alert(response.data); $scope.GetAllData(); $scope.EmpName = ""; $scope.EmpCity = ""; $scope.EmpAge = "";

document.getElementById("btnSave").setAttribute("value", "ارسال");

document.getElementById("btnSave").style.backgroundColor = "cornflowerblue";

document.getElementById("spn").innerHTML = "افزودن کاربر";

}); } } $scope.GetAllData = function() { $http({ method: "get",

"e/Get_AllEmployeehttp://localhost:62933/Employeurl: " }) .then(function(response) { $scope.employees = response.data; }, function() { alert("Error Occur"); }); }; $scope.DeleteEmp = function(Emp) { $http({ method: "post",

",http://localhost:62933/Employee/Delete_Employeeurl: " datatype: "json", data: JSON.stringify(Emp) }) .then(function(response) { alert(response.data); $scope.GetAllData(); }); }; $scope.UpdateEmp = function(Emp) { document.getElementById("EmpID_").value = Emp.Emp_Id;

$scope.EmpName = Emp.Emp_Name; $scope.EmpCity = Emp.Emp_City; $scope.EmpAge = Emp.Emp_Age;

document.getElementById("btnSave").setAttribute("value", "ویرایش");

document.getElementById("btnSave").style.backgroundColor = "Yellow";

document.getElementById("spn").innerHTML = "ویرایش کاربر";

. اضافه کنیم Indexرا به AngularCode و Angularحال رفرنس های

. ار پروژه تکمیل شده است حال میخواهیم آن را اجرا کنیمتا اینجای ک

. کنید درک را آن کردن کار نحوه تا توضیح دهیم CRUDحال میخواهیم درباره عملیات

Employeeدریافت رکود های

نمایش Gridرا دریافت می شود و در قالب یک Employeeزمانی که برنامه اجرا می شود ، ابتدا تمامی رکورد های

فراخوانی شده است . این متد تمامی ng-init ،getAllDataداده می شود.شما میتوان مشاهده کنید که در دایرکتیو

. رکورد ها را دریافت می کند

app.js کد درون فایل

$scope.GetAllData = function() { $http({ method: "get",

"http://localhost:62933/Employee/Get_AllEmployeeurl: " }) .then(function(response) { $scope.employees = response.data; }, function() { alert("Error Occur"); }); };

در کنترلر Get_AllEmployee ، متد AngularJSدر http$ سرویس با استفاده از ، GetAllDataدر متد

Employee فراخوانی می شود . کد زیر شامل متدGet_AllEmployee است :

/// <summary> /// /// Get All Employee /// </summary> /// <returns></returns> public JsonResult Get_AllEmployee()

{ using (AngularDBEntities Obj = new AngularDBEntities()) { List<Employee> Emp = Obj.Employees.ToList(); return Json(Emp, JsonRequestBehavior.AllowGet); } }

. ارسال می کنیم JSON resultدریافت کرده و به عنوان Employeeها را از employeeدر این متد ما تمام

Employeeافزودن

. فراخوانی می شود InsertDataزمانی بر روی کلیک ارسال کلیک کنید ، متد

<input type="button" id="btnSave" class="form-control btn-space" value="ارسال" ng-

click="InsertData()" /> </div> </div>

در کنترلر Insert_Employeeافزوده می شود و متد Employeeدر این متد ، داده ها درون فرم دریافت شد و به شی

. ه عنوان پارامتر ارسال می شودب Employeeفرخوانی می شود و

$scope.InsertData = function() { var Action = document.getElementById("btnSave").getAttribute("value");

if (Action === "ارسال") {

$scope.Employe = {}; $scope.Employe.Emp_Name = $scope.EmpName; $scope.Employe.Emp_City = $scope.EmpCity; $scope.Employe.Emp_Age = $scope.EmpAge; $http({ method: "post",

",http://localhost:62933/Employee/Insert_Employeeurl: " datatype: "json", data: JSON.stringify($scope.Employe) }) .then(function(response) { alert(response.data); $scope.GetAllData(); $scope.EmpName = ""; $scope.EmpCity = ""; $scope.EmpAge = ""; }); } else { $scope.Employe = {}; $scope.Employe.Emp_Name = $scope.EmpName; $scope.Employe.Emp_City = $scope.EmpCity; $scope.Employe.Emp_Age = $scope.EmpAge;

$scope.Employe.Emp_Id = document.getElementById("EmpID_").value; $http({ method: "post",

",//localhost:62933/Employee/Update_Employeehttp:url: " datatype: "json", data: JSON.stringify($scope.Employe) }) .then(function(response) { alert(response.data); $scope.GetAllData(); $scope.EmpName = ""; $scope.EmpCity = ""; $scope.EmpAge = "";

}); } }

. اضافه می شود Employee entityدر Employeeدر این قسمت از کنترلر ، شی

/// <summary> /// Insert New Employee /// </summary> /// <param name="Employe"></param> /// <returns></returns> public string Insert_Employee(Employee Employe) { if (Employe != null) { using (AngularDBEntities Obj = new AngularDBEntities()) { Obj.Employees.Add(Employe); Obj.SaveChanges();

return "افزودن با موفقیت انجام شد ";

else {

return "لطفا دوباره امتحان کنید";

. می شودپس از انجام عملیات یک پیام نمایش داده می شود و یک رکورد به جدول اضافه

Employeeحذف یکی از رکورد های

مشاهده که طور همان. را به جدول ها اضافه می کنیم Cityو ng-repeat ، Name, Age, Idما با استفاده از دایرکتیو

-ng دایرکتیو با و ایم داده قرار "ویرایش" و "حذف" برای دستور های Buttonچند ”تنظیمات “ ستون در کنید می

clik متد ،DeleteEmp وUpdateEmp را برای حذف و ویرایش فراخوانی می کنیم . در این دو متد

. را ارسال می کنیم Employee شی

فراخوانی می http$ از استفاده با ، قرار دارد Controllerکه در Delete_Employee، متد DeleteEmpدر متد

. شود

$scope.DeleteEmp = function(Emp) { $http({ method: "post",

",http://localhost:62933/Employee/Delete_Employeeurl: " datatype: "json", data: JSON.stringify(Emp) }) .then(function(response) { alert(response.data);

$scope.GetAllData(); }); };

.رکورد مورد نظر را حذف می کند Delete_Employeeمتد

public string Delete_Employee(Employee Emp) { if (Emp != null) { using (AngularDBEntities Obj = new AngularDBEntities()) { var Emp_ = Obj.Entry(Emp); if (Emp_.State == System.Data.Entity.EntityState.Detached) { Obj.Employees.Attach(Emp); Obj.Employees.Remove(Emp); } Obj.SaveChanges();

return "حذف با موفیقت انجام شد";

} } else {

return "دوباره امتحان کنید ";

. شود می پس از انجام عملیات حذف یک پیغام نمایش داده

Employee ویرایش یکی از رکورد های

ها قرار می دهد تا تغیرات اعمال Textbox درون د و اطالعات رارا فراخوانی می کن UpdateEmpدستور ویرایش ،

. شوند

$scope.UpdateEmp = function(Emp) { document.getElementById("EmpID_").value = Emp.Emp_Id; $scope.EmpName = Emp.Emp_Name; $scope.EmpCity = Emp.Emp_City; $scope.EmpAge = Emp.Emp_Age;

document.getElementById("btnSave").setAttribute("value", "ویرایش");

document.getElementById("btnSave").style.backgroundColor = "Yellow";

document.getElementById("spn").innerHTML = "ویرایش کاربر";

. حال میخواهیم یکی از رکورد ها را تغییر دهیم و بر روی ویرایش کلیک کنیم

. را تغییر می دهیم "شهر"به عنوان مثال

ویرایش دکمه تا اجرا شود else قسمت و شده فراخوانی InssertDataزمانی که بر روی ویرایش کلیک شود ، متد

. کند تغییر ارسال به

else { $scope.Employe = {}; $scope.Employe.Emp_Name = $scope.EmpName; $scope.Employe.Emp_City = $scope.EmpCity; $scope.Employe.Emp_Age = $scope.EmpAge; $scope.Employe.Emp_Id = document.getElementById("EmpID_").value;

$http({ method: "post",

",alhost:62933/Employee/Update_Employeehttp://locurl: " datatype: "json", data: JSON.stringify($scope.Employe) }) .then(function(response) { alert(response.data); $scope.GetAllData(); $scope.EmpName = ""; $scope.EmpCity = ""; $scope.EmpAge = "";

فراخوانی می شود . در متد Controllerدر Update_Employeeزیر مشاهده می کنید ، متد همان طور که در

Update_Employee رکورد مورد نظر ویرایش می شود و اگر عملیات با موفقیت انجام شود یک پیغام نمایش داده

. می شود

/// <summary> /// Update Employee Information /// </summary> /// <param name="Emp"></param> /// <returns></returns> public string Update_Employee(Employee Emp) { if (Emp != null) { using (AngularDBEntities Obj = new AngularDBEntities()) { var Emp_ = Obj.Entry(Emp); Employee EmpObj = Obj.Employees.Where(x => x.Emp_Id == Emp.Emp_Id).FirstOrDefault(); EmpObj.Emp_Age = Emp.Emp_Age;

EmpObj.Emp_City = Emp.Emp_City; EmpObj.Emp_Name = Emp.Emp_Name; Obj.SaveChanges();

return "بروز رسانی با موفقیت انجام شد ";

} } else {

return "لطفا دوباره امتحان کنید ";

. همان طور که مشاهده می کنید عملیات ویرایش با موفقیت انجام شده است

MVCر AngularJS زا هافتسا اب CRUD تایلمع یزاس هایپ هلاقم ... ·...

Documents

Transcript of MVCر AngularJS زا هافتسا اب CRUD تایلمع یزاس هایپ هلاقم ... ·...

Woordenlijst / هژاو همان TaalCompleet A2Woordenlijst Nederlands - Perzisch de voornaam, de voornamen لا مسا ٬مان de vriendin, de vriendinnen نز تسد 1.5 Kindje,

CCRRIITTEERRIIOONN –– 11 · Simple,Object-Oriented,Portable,Platform ... CRUD Operation J2EE Introduction to J2EE Overview of J2EE,Architecture of J2EE servlets Introduction of

My CRUD functions - TeLeCo-IT · Daarom wil ik u zelf aan de slag laten gaan om uw eigen CRUD functies te maken in PHP, dit voor het benaderen van een MySQL databank. Voor het valideren

یشزومآو یشهوژپ -یملع قباوس یخرب نارهم : مان ...ent.ut.ac.ir/Images/UserFiles/4/file/C_V Dr Rezvani elmi... · 2018-11-13 · 1 اناد رگناوت

یشهوژپ و یشزومآ ،یملع قباوسurm.sbmu.ac.ir/uploads/CV_Dr_Zayeri.pdf · یشهوژپ و یشزومآ ،یملع قباوس دیرف مان یریاز یگداوناخ

08thBeerhallMvcCRUDEen eerste data-driven MVC applicatieBedoeling Volledige CRUD voor brouwers TDD van het Domein (zoals in hoofdstuk 3) Controller Interacties met de databank …

nora.kamoen 2016 EP2 FINAAL!!!! - ScriptieBank · API Application Programming Interface CD Continuous Delivery CI Continuous Integration CRUD Create, Read, Update, Delete DDD Domain

yx · لاﻮﺳ ﻒﻳدر مرﺎﺑ 3 A(,)85ﻪـــﻄﻘﻧ نآ سار ﻚـــﻳ و 272 6x yyx, تﻻدﺎـــﻌﻣ ﻪـــﺑ ﻂـــﺧ ود ...

QuranUrdu by Syed...1 ا ا ا د و با م ا با ن ز ىر و نآ س ا ۔ فر روا و د ا ا تد

AW100-Gunahon Se Bachney Ka Rasta...۔ےتا د (ت مان (کیے ہو (بنسوب (ػرفکیؿا (کیںوںتاب (ؾمام (ہدکر (یعشا (کیٗہقدرللہا (رنوبصا

azad.ac.ir - ادخ مان هبazad.ac.ir/file/download/page/1488707000-1483355797... · Email: msheikhn@azad.ac.ir, يلغش قباوس خيرات ات خيرات زا روشك و

fateme-zahra.comfateme-zahra.com/wp-content/uploads/2016/03/01.pdf · لو ا ﺶﺨﺑ ١٥ / نآ زا ﺲﭘ و ﯽﻨﯾﻮﮑﺗ ﺖﻘﻠﺧ زا ﺶﯿﭘ اﺮﻫز ﮥ ﻤﻃﺎﻓ