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

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

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

www.barnamenevisan.org [email protected]

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

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

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

http://www.barnamenevisan.org/




. را انتخاب می کنیم 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>

<table cellpadding="12" class="table table-bordered table-hover"> <tr> <td>

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

</td> <td>

<b>نام</b>

</td> <td>

<b>شهر</b>

</td> <td>

<b>سن</b>

</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">

<label class="col-md-4 control-label">نام:</label>

<div class="col-md-8"> <input type="text" class="form-control" id="inputEmail" placeholder="Name" ng-model="EmpName"> </div> </div> </div> <div class="col-sm-6 col-lg-4"> <div class="form-group">

<label class="col-md-4 control-label">شهر:</label>

<div class="col-md-8"> <input type="text" class="form-control" id="inputPassword" placeholder="City" ng-model="EmpCity"> </div> </div> </div>





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

<label class="col-md-4 control-label">سن:</label>

<div class="col-md-8"> <input type="text" class="form-control" id="inputLabel3" placeholder="Age" ng-model="EmpAge"> </div> </div> </div> </div> <div class="row"> <div class="col-sm-6 col-lg-4">

<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) })


http://localhost:62933/Employee/Insert_Employee

http://localhost:62933/Employee/Update_Employee




.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;


http://localhost:62933/Employee/Get_AllEmployee

http://localhost:62933/Employee/Delete_Employee




$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داده می شود.شما میتوان مشاهده کنید که در دایرکتیو

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

<div ng-controller="myCtrl" ng-init="GetAllData()" class="divList">

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()


http://localhost:62933/Employee/Get_AllEmployee




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

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

Employeeافزودن





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

<div class="row"> <div class="col-sm-6 col-lg-4">

<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;


http://localhost:62933/Employee/Insert_Employee




$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);


http://localhost:62933/Employee/Delete_Employee




$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 تایلمع یزاس هایپ هلاقم ... ·...