سبد خرید Angular JS

در این مقاله با جزئیات کامل توضیح خواهیم داد که چگونه یک سبد خرید Angular JS و خدمات WCF  بسازید.

این مقاله شامل مباحث زیر خواهد شد:

چگونه یک خدمات WCF Rest بسازیم و داده ها را از پایگاه داده ها دریافت و به آن وارد کنیم.

گونه بسته ی Angular JS را در یک برنامه ی MVC نصب کنیم و.. همراه ما باشید.

چگونه با استفاده از Angular JS در MVC یک عکس را به فولدر Root آپلود کنیم .

انتخاب و وارد کردن جزئیات اشیاء از یک پایگاه داده با استفاده از Angular JS و WCF Rest.

چگونه از خدمات WCS در Angular JS برای ساخت برنامه ی سبد خرید آنلاین خودمان استفاده کنیم که شامل موارد زیر خواهد بود:

  • نمایش اشیاء با گزینه های فیلتر و مرتب سازی
  • انتخاب و افزودن اشیاء به سبد خرید
  • نمایش مبلغ کل , تعداد کل و قیمت کل در سبد خرید
  • آپلود عکس به فولدر Root سرور
  • انتخاب و وارد کردن داده به پایگاه داده
  • نمایش جزئیات سبد خرید

یادداشت : پیش نیاز های آن Visual Studio 2013 است (اگر آن را ندارید میتوانید از مایکروسافت آن را دانلود کنید)

اینجا ما میتوانیم برخی از پایه ها و لینک های مراجع برای بنیاد ویندوز ارتباطات را ببینیم.

WCF یک چارچوب برای ساخت برنامه های سرویس گرا میباشد.

برنامه های سرویس گرا :

با استفاده از این پروتکل خدمات میتواند از طریق یک شبکه به اشتراک گذاشته شوند.

برای مثال بیایید در نظر بگیریم که ما در حال کار بر روی یک پروژه هستیم و نیاز به ساخت چند تابع پایگاه داده ی معمولی داریم و نیاز داریم که از آن توابع در چندین پروژه استفاده کنیم و پروژه ها در چندین مکان مختلف هستند که از طریق شبکه ای مانند اینترنت به هم متصل هستند.

در این زمینه ما میتوانیم یک خدمات WCF بسازیم و میتوانیم تمام توابع پایگاه داده مان را در کلاس خدمات WCF مان بنویسیم.

میتوانیم WCF مان را در IIS گسترش دهیم و از URL در برنامه هایمان برای انجام توابع پایگاه داده استفاده کنیم.

در قسمت کد ببینیم که چگونه یک خدمات WCF REST بسازیم و از آن در برنامه Angular JS مان استفاده کنیم.

اگر شما مایل به خواندن جزئیات بیشترب در رابطه با WCF هستید میتوانید به لینک زیر بروید :

WCF Rest

سبد خرید Angular JS

ممکن است که ما با Model , View و View Model یا همان MVVM  و Model , View و Controller یا همان MVC آشنا باشیم. Angular JS یک چارچوب جاوا اسکریپت می باشد که به طور خالص بر روی HTML CSS و جاوا اسکریپت پایه گذاری شده است.

مشابه الگوهای MVC و MVVM , Angular JS از الگوی Model , View و Whatever یا همان MVW استفاده میکند.

در مثال ما , من از یک Model , View و Service استفاده کرده ام. حال در بخش کد بیایید ببینیم که چگونه Angular JS را در برنامه ی MVC نصب میکنیم.

بخش کد

ساخت پایگاه داده و جدول

ما یک جدول ItemDetails تحت پایگاه داده ی ShoppingDB می سازیم.

ادامه متنی برای ساخت پایگاه داده , جدول و نمونه Query وارد شده می باشد.

این متن را در سرور SQL خود اجرا کنید. من از SQL Server 2012 استفاده کردم.

--Script to create DB,Table and sample Insert data   
USE MASTER   
GO   
-- ۱) Check for the Database Exists .If the database is exist then drop and create new DB   
IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'ShoppingDB' )   
DROP DATABASE ShoppingDB   
GO   
CREATE DATABASE ShoppingDB   
GO   
USE ShoppingDB   
GO   
-- ۱) //////////// ItemDetails table   
-- Create Table ItemDetails,This table will be used to store the details like Item Information    
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'ItemDetails' )   
DROP TABLE ItemDetails   
GO   
CREATE TABLE ItemDetails   
(   
Item_ID int identity(1,1),   
Item_Name VARCHAR(100) NOT NULL,   
Item_Price int NOT NULL,   
Image_Name VARCHAR(100) NOT NULL,   
Description VARCHAR(100) NOT NULL,   
AddedBy VARCHAR(100) NOT NULL,   
CONSTRAINT [PK_ItemDetails] PRIMARY KEY CLUSTERED    
(    
[Item_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   
-- Insert the sample records to the ItemDetails Table   
Insert into ItemDetails(Item_Name,Description,Item_Price,Image_Name,AddedBy) values('Access Point','Access Point for Wifi use',950,'AccessPoint.png','Shanu')   
Insert into ItemDetails(Item_Name,Description,Item_Price,Image_Name,AddedBy) values('CD','Compact Disk',350,'CD.png','Afraz')   
Insert into ItemDetails(Item_Name,Description,Item_Price,Image_Name,AddedBy) values('Desktop Computer','Desktop Computer',1400,'DesktopComputer.png','Shanu')   
Insert into ItemDetails(Item_Name,Description,Item_Price,Image_Name,AddedBy) values('DVD','Digital Versatile Disc',1390,'DVD.png','Raj')   
Insert into ItemDetails(Item_Name,Description,Item_Price,Image_Name,AddedBy) values('DVD Player','DVD Player',450,'DVDPlayer.png','Afraz')   
Insert into ItemDetails(Item_Name,Description,Item_Price,Image_Name,AddedBy) values('Floppy','Floppy',1250,'Floppy.png','Mak')   
Insert into ItemDetails(Item_Name,Description,Item_Price,Image_Name,AddedBy) values('HDD','Hard Disk',950,'HDD.png','Albert')   
Insert into ItemDetails(Item_Name,Description,Item_Price,Image_Name,AddedBy) values('MobilePhone','Mobile Phone',1150,'MobilePhone.png','Gowri')   
Insert into ItemDetails(Item_Name,Description,Item_Price,Image_Name,AddedBy) values('Mouse','Mouse',399,'Mouse.png','Afraz')   
Insert into ItemDetails(Item_Name,Description,Item_Price,Image_Name,AddedBy) values('MP3 Player ','Multi MediaPlayer',897,'MultimediaPlayer.png','Shanu')   
Insert into ItemDetails(Item_Name,Description,Item_Price,Image_Name,AddedBy) values('Notebook','Notebook',750,'Notebook.png','Shanu')   
Insert into ItemDetails(Item_Name,Description,Item_Price,Image_Name,AddedBy) values('Printer','Printer',675,'Printer.png','Kim')   
Insert into ItemDetails(Item_Name,Description,Item_Price,Image_Name,AddedBy) values('RAM','Random Access Memory ',1950,'RAM.png','Jack')   
Insert into ItemDetails(Item_Name,Description,Item_Price,Image_Name,AddedBy) values('Smart Phone','Smart Phone',679,'SmartPhone.png','Lee')   
Insert into ItemDetails(Item_Name,Description,Item_Price,Image_Name,AddedBy) values('USB','USB',950,'USB.png','Shanu')  
select * from ItemDetails

 ساخت خدمات WCF REST

ویژوال استودیوی ۲۰۱۳ را باز کنید و یک پروژه ی جدید با انتخاب برنامه ی خدمات WCF بسازید و سپس مسیر پروژه تان را انتخاب کنید و نامی برای خدمات WCF خود انتخاب کنید و بر روی OK کلیک کنید.

 ساخت برنامه های وب MVC

زمانی که خدمات WCF مان را ساختیم میتوانیم در قسمت Solution Explorer مان IService.CS و Service1.svc را ببینیم. مانند زیر :

سبد خرید Angular JS

IService.CS : در IService.CS میتوانیم ۳ قرارداد به صورت پیش فرض ببینیم.

[ServiceContract] : توصیف کننده ی متدها یا هر عملیات موجودی برای خدمات است. قرارداد سرور یک رابط کاربری است و متد ها میتوانند درون رابط کاربری خدمات با استفاده از صفت عملیات قرارداد مشخص شوند.

[OperationContract] : مشابه خدمات وب هستند [WEBMETHOD] .

[DataContract] : توصیف کننده ی داده های تبادل شده بین کاربر و سرور میباشد.

[ServiceContract] : کد زیر به صورت خودکار برای تمام فایل های IService.CS ساخته میشود. ما میتوانیم آن ها را تغییر دهیم و کد های خودمان را بنویسیم.

 
public interface IService1 { [OperationContract] string GetData(int value); [OperationContract] CompositeType GetDataUsingDataContract(CompositeType composite); // TODO: Add your service operations here } // Use a data contract as illustrated in the sample below to add composite types to service operations. [DataContract] public class CompositeType { bool boolValue = true; string stringValue = "Hello "; [DataMember] public bool BoolValue { get { return boolValue; } set { boolValue = value; } } [DataMember] public string StringValue { get { return stringValue; } set { stringValue = value; } } }

DataContract :

در مثال؛ ما احتیاج داریم که همه ی جزئیات اشیا را از پایگاه داده دریافت کنیم، پس من یک Data Contract میسازم , “itemDetailsDataContract” .

در اینجا میتوانیم ببینیم که نام تمام ستون های جدول را به عنوان اعضای داده یا Data Member مشخص کرده ایم.

public class shoppingCartDataContract   
{   
[DataContract]   
public class itemDetailsDataContract   
{   
[DataMember]   
public string Item_ID { get; set; }   
 [DataMember]   
public string Item_Name { get; set; }   
 [DataMember]   
public string Description { get; set; }   
 [DataMember]   
public string Item_Price { get; set; }   
 [DataMember]   
public string Image_Name { get; set; }     
[DataMember]   
public string AddedBy { get; set; }   
}   
}

Service Contract

در عملیات قرارداد میتوانیم “WebInvoke” و “WebGet” را ببینیم که داده ها را از پایگاه داده در خدمات REST دریافت میکند.

  • JSON یک فرمت تبادل داده ی بسیار سبک وزن میباشد.
  • UriTemplate : در اینحا نام متد مان را ارائه میدهیم.

حال ما ۳ متد را مشخص کرده ایم :

  • “GetOrderMaster”
  • “SearchOrderMaster”
  • “OrderDetails”

متد “GetOrderMaster” سوابق Order Master را میگیرد. در متد “OrderDetails” دستور بدون پارامتر فیلتر جزئیات دستوری توسط اعداد دستور ارائه میشود.

در اینجا من یک متد “GetItemDetails” مشخص کرده ام و از آن برای دریافت جزئیات تمام اشیا از پایگاه داده استفاده میکنیم. و یک متد “AddItemMaster” و از آن برای وارد کردن اشیای جدید به پایگاه داده استفاده میکنیم.

[ServiceContract]     
public interface IService1     
{     
[OperationContract]     
[WebInvoke(Method = "GET",     
RequestFormat = WebMessageFormat.Json,     
ResponseFormat = WebMessageFormat.Json,     
UriTemplate = "/GetItemDetails/")]     
List<shoppingCartDataContract.itemDetailsDataContract> GetItemDetails();     
// TODO: Add your service operations here            
// to Insert the Item Master     
[OperationContract]     
[WebInvoke(Method = "POST",     
RequestFormat = WebMessageFormat.Json,     
ResponseFormat = WebMessageFormat.Json,     
UriTemplate = "/addItemMaster")]     
bool addItemMaster(shoppingCartDataContract.itemDetailsDataContract itemDetails);  
}

IService.Cs :

سورس کد را تکمیل کنید.

using System;   
using System.Collections.Generic;   
using System.Linq;   
using System.Runtime.Serialization;   
using System.ServiceModel;   
using System.ServiceModel.Web;   
using System.Text;   
namespace ShanuSchoppingCart_WCF   
{   
[ServiceContract]   
public interface IService1   
{   
[OperationContract]   
[WebInvoke(Method = "GET",   
RequestFormat = WebMessageFormat.Json,   
ResponseFormat = WebMessageFormat.Json,   
UriTemplate = "/GetItemDetails/")]   
List<shoppingCartDataContract.itemDetailsDataContract> GetItemDetails();   
// to Insert the Item Master   
[OperationContract]   
[WebInvoke(Method = "POST",   
RequestFormat = WebMessageFormat.Json,   
ResponseFormat = WebMessageFormat.Json,   
UriTemplate = "/addItemMaster")]   
bool addItemMaster(shoppingCartDataContract.itemDetailsDataContract itemDetails);   
}   
public class shoppingCartDataContract   
{   
[DataContract]   
public class itemDetailsDataContract   
{   
[DataMember]   
public string Item_ID { get; set; }   
 [DataMember]   
public string Item_Name { get; set; }   
 [DataMember]   
public string Description { get; set; }   
 [DataMember]   
public string Item_Price { get; set; }   
 [DataMember]   
public string Image_Name { get; set; }   
 [DataMember]   
public string AddedBy { get; set; }   
}   
}   
}

افزودن پایگاه داده با استفاده از مدل ADO.NET نهاد داده

بر روی پروژه ی WCF راست کلیک میکنیم و افزودن شئ جدید را انتخاب میکنیم و سپس مدل ADO.NET Entity Data را انتخاب میکنیم و افزودن را کلیک میکنیم.

 ساخت برنامه های وب MVC

از پایگاه داده EF Designer را انتخاب میکنیم و بر روی Next کلیک میکنیم.

سبد خرید Angular JS

connection جدید را انتخاب کنید.

 سبد خرید با استفاده از MVC

در اینجا میتوانیم نام سرور پایگاه داده مان را انتخاب کنیم و تصدیق آیدی کاربری و رمز عبور سرور DB سرور SQL تان را وارد کنید.

ما قبلا پایگاه داده مان را تحت عنوان “ShoppingDB” ساخته ایم. پس میتوانیم پایگاه داده را انتخاب کنیم و برروی OK کلیک کنیم.

بر روی Next کلیک میکنیم و جدول هایمان را برای استفاده انتخاب میکنیم و بر روی finish کلیک میکنیم. حال میتوانیم ببینیم که ما ShanuItemDetailsModel1 مان را ساخته ایم.

 سبد خرید با استفاده از MVC

Service1.SVC

Service.SVC.CS رابط IService را پیاده سازی میکند و تمامی متد های Operation Contract را مشخص و لغو میکند.

به عنوان مثال در اینجا میتوانیم ببینیم که IService1 را در کلاس Service1 پیاده سازی کرده ام.

ایجاد شئ برای مدل نهاد مان و در GetToyDetails با استفاده از LINQ .

public class Service1 : IService1     
{     
ShanuShoppingDBEntities OME;     
public Service1()     
{     
OME = new ShanuShoppingDBEntities();     
}     
// This method is get the Toys details from Db and bind to list  using the Linq query     
public ListshoppingCartDataContract.itemDetailsDataContractGetItemDetails()     
{     
var query = (from a in OME.ItemDetails     
select a).Distinct();     
ListshoppingCartDataContract.itemDetailsDataContractItemDetailsList = new ListshoppingCartDataContract.itemDetailsDataContract>();     
query.ToList().ForEach(rec =    
{     
ItemDetailsList.Add(new shoppingCartDataContract.itemDetailsDataContract     
{     
Item_ID =  Convert.ToString(rec.Item_ID),     
Item_Name = rec.Item_Name,     
Description=rec.Description,     
Item_Price = Convert.ToString(rec.Item_Price),     
Image_Name = rec.Image_Name,     
AddedBy = rec.AddedBy     
});     
});     
return ItemDetailsList;     
}


 

Service.SVC.CS : سورس کد را کامل کنید.

using System;   
using System.Collections.Generic;   
using System.Linq;   
using System.Runtime.Serialization;   
using System.ServiceModel;   
using System.ServiceModel.Web;   
using System.Text;   
using ShanuSchoppingCart_WCF.Module;   
namespace ShanuSchoppingCart_WCF   
{   
public class Service1 : IService1   
{   
ShanuShoppingDBEntities OME;   
public Service1()   
{   
OME = new ShanuShoppingDBEntities();   
}     
public ListshoppingCartDataContract.itemDetailsDataContract GetItemDetails()   
{   
var query = (from a in OME.ItemDetails   
select a).Distinct();   
ListshoppingCartDataContract.itemDetailsDataContract ItemDetailsList = new ListshoppingCartDataContract.itemDetailsDataContract();   
query.ToList().ForEach(rec =
{   
ItemDetailsList.Add(new shoppingCartDataContract.itemDetailsDataContract   
{   
Item_ID =  Convert.ToString(rec.Item_ID),   
Item_Name = rec.Item_Name,   
Description=rec.Description,   
Item_Price = Convert.ToString(rec.Item_Price),   
Image_Name = rec.Image_Name,   
AddedBy = rec.AddedBy   
});   
});   
return ItemDetailsList;   
}   
public bool addItemMaster(shoppingCartDataContract.itemDetailsDataContract ItmDetails)      
{      
try      
{      
ItemDetails itm = OME.ItemDetails.Create();                     
itm.Item_Name = ItmDetails.Item_Name;   
itm.Description=ItmDetails.Description;   
itm.Item_Price = Convert.ToInt32(ItmDetails.Item_Price);   
itm.Image_Name = ItmDetails.Image_Name;   
itm.AddedBy = ItmDetails.AddedBy;   
OME.ItemDetails.Add(itm);   
OME.SaveChanges();      
}      
catch (Exception ex)      
{      
throw new FaultExceptionstring   
(ex.Message);      
}      
return true;      
}      
}   
}

Web.Config

در Web.Config پروژه های WCF : تغییر

add binding="basicHttpsBinding" scheme="https" to add binding="webHttpBinding" scheme="http" 

جایگزین </behaviors> با :

endpointBehaviors
behavior
webHttp helpEnabled="True"/
/behavior
/endpointBehaviors

اجرای خدمات WCF :

حال که ما خدمات WCF REST مان را ساختیم بیاید خدمات را اجرا و تست کنیم. در خدمات URL میتوانیم نام متد مان را بیافزاییم و داده های نتیجه ی JSON را از پایگاه داده ببینیم.

 سبد خرید آنلاین

ساخت برنامه های وب MVC

پس حالا که ما WCF مان را تکمیل کردیم وقت آن رسیده است که برنامه ی MVC AngularJS مان را بسازیم. میتوانیم یک پروژه جدید به پروژه های پیشین خود بیافزاییم و یک برنامه ی وب MVC جدید نیز همانند زیر بسازیم.

بر روی پروژه در Solution راست کلیک کنید و بر روی ساخت یک پروژه جدید کلیک کنید و سپس نام پروژه تان را وارد کنید و بر روی OK کلیک کنید.

 سبد خرید آنلاین

MVC را انتخاب کنید و بر روی OK کلیک کنید.

 سبد خرید Angular JS

حال ما برنامه ی MVC مان را ساخته ایم و وقت آن است که خدمات WCF مان را اضافه کنیم و بسته ی AngularJS را در Solution مان نصب کنیم.

افزودن خدمات WCF : بر روی MVC Solution راست کلیک کنید و Add را انتخاب کنید و سپس بر روی مرجع خدمات کلیک کنید.

 سبد خرید Angular JS

آدرس WCF تان را وارد نمایید و بر روی GO کلیک کنید. این آدرس WCF من است.

http://localhost:4191/Service1.svc/

نام تان را اضافه کنید و بر روی OK کلیک کنید.

حال ما با موفقیت خدمات WCF مان را به برنامه ی MVC مان افزوده ایم.

 سبد خرید Angular JS

 

روش نصب بسته ی Angular JS

بر روی پروژه ی MVC تان راست کلیک کنید و بر روی مدیریت بسته ی NuGet کلیک کنید.

Shopping Card Angular JS

آنلاین را انتخاب کنید و به دنبال Angular JS بگردید . Angular JS را انتخاب کنید و بر روی نصب کلیک کنید.

 ویژگی های Angular JS

حال ما بسته ی Angular JS را در پروژه ی MVC مان نصب کرده ایم. حال بیاید Angular JS مان را بسازیم.

  • Modules.js
  • Controllers.js
  • shoppingController.js
  • Services.js

توجه داشته باشید من اینجا دوتا کنترلر Angular JS ساختم. “Controller.js” و “shoppingController.js” . من از “ShoppingController.js” برای صفحه ی کارت و “Controller.js” برای افزودن اشیای جدید و آپلود عکس اشیای جدید به فولدر root استفاده میکنم.

روش ساخت فایل های خطی Angular JS :

بر روی فولدر خطی راست کلیک نمایید و فولدر خودتان را برای ساخت کنترلر/مدل Angular JS و خدمات جاوا سکریپت بسازید. در فولدر خطیتان سه فایل جاوا سکریپت اضافه کنید و نام آن ها را Modules.js , Controller.js و Service.js بگذارید . همانند زیر :

 ویژگی های Angular JS

 

Modules.js :

در اینجا ما مراجع را به جاوا اسکریپت Angular JS اضافه میکنیم.

در برنامه ی ما , ما از Angular JS FileUpload از کنترلر MVC مان استفاده میکنیم.

برای استفاده از File Upload ما نیاز به افزودن “angular-file-upload.js” و “angular-file-upload-min.js” داریم. ما نام module مان را “RESTClientModule” ارائه میدهیم.

/// reference path="../angular.js" /
/// reference path="../angular.min.js" /
/// reference path="../angular-animate.js" /
/// reference path="../angular-animate.min.js" /
/// reference path="../angular-file-upload.js" /
/// reference path="../angular-file-upload.min.js" /
var app;
(function () {
app = angular.module("RESTClientModule", []);
})();

کنترلر Angular JS :

در این برنامه من دو کنترلر برای استفاده از صفحه ی ورودی اشیای Master و برای صفحه ی سبد خرید ساخته ام. ما آنها را یک به یک در اینجا چک میکنیم.

shoppingController.js : در اینجا ما مراجع به جاوا سکریپت Angular JS و Module.js مان و Service.js اضافه میکنیم. برای خدمات از همان نام های کنترلر خودشان استفاده میکنیم “AngularJS_ShoppingFController” .

در کنترلر من همه ی کارهای منطقی را اجرا کردم و داده ها را از داده WCF JSON به صفحه ی MVC HTML خودمان بازمیگردانیم. قبل از هر متغیر و متد من یک کامنت درباره ی توضیح آن اضافه کرده ام.

اظهارات متغیر : در ابتدا من همه ی متغیر های محلی را برای استفاده و داده های حال حاضر و ذخیره ی تاریخ با استفاده از $scope.date. مشخص کرده ام.

متد ها: GetItemDetails()

این متد همه ی جزئیات اشیا از JSON را میگیرد و نتیجه را به صفحه ی خرید پیوند میدهد.

$scope.showImage = توابع (imagNm و ItemID و ItemName و ItemPrize و ItemDescription)

این متد تمامی جزئیات را وقتی که کاربر بر روی تصویر درون grid کلیک میکند دریافت میکند و جزئیات افزودن اشیا به سبد را نمایش میدهد.

$scope.showMyCart = توابع ()

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

تابع getItemTotalresult()

این متد مبلغ کل , تعداد کل و جمع کل قیمت را محاسبه میکند.

تابع addItemstoCart()

این متد اشیا را به سبد اضافه میکند و اگر شئ قبلا موجود بود تعداد آن را یک واحد افزایش میدهد.

$scope.removeFromCart = توابع (index)

این متد اشیا را از سبد حذف میکند و هرکدام از اشیای درون سایت میتوانند حذف شوند. از صفحه ی MVC HTML مان شاخص ردیف را به این متد پاس میدهیم تا شئ را از آرایه حذف کند.

shoppingController.js سورس کد کامل

/// reference path="../angular.js" /
/// reference path="../angular.min.js" /
/// reference path="../angular-animate.js" /
/// reference path="../angular-animate.min.js" /
/// reference path="Modules.js" /
/// reference path="Services.js" /
app.controller("AngularJs_ShoppingFController", function ($scope, $http, $timeout, $rootScope, $window, AngularJs_WCFService) {
$scope.date = new Date();
//  To set and get the Item Details values
var firstbool = true;
$scope.Imagename = "";
$scope.Item_ID = "";
$scope.Item_Name = "";
$scope.Description = "";
$scope.Item_Price = "0";
$scope.txtAddedBy = "";
// Item List Arrays.This arrays will be used to Add and Remove Items to the Cart.
$scope.items = [];
//to display the Table for Shopping cart Page.
$scope.showItem = false;
$scope.showDetails = false;
$scope.showCartDetails = false;
//This variable will be used to Increment the item Quantity by every click.
var ItemCountExist = 0;
//This variable will be used to calculate and display the Cat Total Price,Total Qty and GrandTotal result in Cart
$scope.totalPrice = 0;
$scope.totalQty = 0;
$scope.GrandtotalPrice = 0;
// This is publich method which will be called initially and load all the item Details.
GetItemDetails();
//To Get All Records
function GetItemDetails() {
$scope.showItem = false;
$scope.showDetails = true;
$scope.showCartDetails = false;
var promiseGet = AngularJs_WCFService.GetItemDetails();
promiseGet.then(function (pl) {
$scope.getItemDetailsDisp = pl.data
},
function (errorPl) {
});
}
//This method used to get all the details when user clicks on Image Inside the Grid and display the details to add items to the Cart
$scope.showImage = function (imageNm, ItemID, ItemName, ItemPrize, ItemDescription) {
$scope.Imagename = imageNm;
$scope.Item_ID = ItemID;
$scope.Item_Name = ItemName;
$scope.Description = ItemDescription;
$scope.Item_Price = ItemPrize;
$scope.showItem = true;
$scope.showDetails = true;
$scope.showCartDetails = false;
ItemCountExist = 0;
}
//This method will hide the detail table Row and display the Cart Items
$scope.showMyCart = function () {
if ($scope.items.length  0)
{
alert("You have added " +$scope.items.length + " Items in Your Cart !");
$scope.showItem = false;
$scope.showDetails = false;
$scope.showCartDetails = true;
}
else {
alert("Ther is no Items In your Cart.Add Items to view your Cart Details !")
}
}
//This method will hide the detail table Row and display the Cart Items
$scope.showCart = function () {
//alert(shoppingCartList.length);
$scope.showItem = true;
$scope.showDetails = false;
$scope.showCartDetails = true;
addItemstoCart();
}
// This method is to calculate the TotalPrice,TotalQty and Grand Total price
function getItemTotalresult() {
$scope.totalPrice = 0;
$scope.totalQty = 0;
$scope.GrandtotalPrice = 0;
for (count = 0; count  $scope.items.length; count++) {
$scope.totalPrice += parseInt($scope.items[count].Item_Prices );
$scope.totalQty += ($scope.items[count].ItemCounts);
$scope.GrandtotalPrice += ($scope.items[count].Item_Prices * $scope.items[count].ItemCounts);
}
}
//This method will add the Items to the cart and if the Item already exist then the Qty will be incremnet by 1.
function addItemstoCart() {
if ($scope.items.length  0)
{
for (count = 0; count  $scope.items.length; count++) {
if ($scope.items[count].Item_Names == $scope.Item_Name) {
ItemCountExist = $scope.items[count].ItemCounts + 1;
$scope.items[count].ItemCounts = ItemCountExist;
}
}        }
if (ItemCountExist = 0)
{
ItemCountExist = 1;
var ItmDetails = {
Item_IDs: $scope.Item_ID,
Item_Names: $scope.Item_Name,
Descriptions: $scope.Description,
Item_Prices: $scope.Item_Price,
Image_Names: $scope.Imagename,
ItemCounts: ItemCountExist
};
$scope.items.push(ItmDetails);
$scope.item = {};
}
getItemTotalresult();
}
//This method is to remove the Item from the cart.Each Item inside the Cart can be removed.
$scope.removeFromCart = function (index) {
$scope.items.splice(index, 1);
}
//This Method is to hide the Chopping cart details and Show the Item Details to add more items to the cart.
$scope.showItemDetails = function () {
$scope.showItem = false;
$scope.showDetails = true;
$scope.showCartDetails = false;
}
});

Controller.js : در اینجا ما مراجع به جاوا سکریپت Angular JS و Module.js مان و Service.js اضافه میکنیم. نام خدمات را از روی نام کنترلرشان قرار میدهیم “AngularJS_WCFController” .

در کنترلر من همه ی کارهای منطقی را اجرا کردم و داده ها را از داده WCF JSON به صفحه ی MVC HTML خودمان بازمیگردانیم. قبل از هر متغیر و متد من یک کامنت درباره ی توضیح آن اضافه کرده ام.

اظهارات متغیر : در ابتدا من همه ی متغیر های محلی را برای استفاده و داده های حال حاضر و ذخیره ی تاریخ با استفاده از $scope.date. مشخص کرده ام.

متد ها: GetItemDetails()

این متد همه ی جزئیات اشیا از JSON را میگیرد و نتیجه را به صفحه ی خرید پیوند میدهد.

$scope.checkFileValid

این متد فایل عکس های الحاقی را چک میکند که آیا معتبر هستند یا خیر. اگر فایل تصویر نامعتبر بود پیغام خطا نمایش دهد.

$scope.SaveFile = توابع ()

در این متد فایل های تصویری به متد UploadFile پاس داده میشود و زمانی که تصویر با موفقیت به فولدر root آپلود شد جزئیات شئ درون پایگاه داده وارد میشود.

Fac.UploadFile = توابع (فایل) در این متد با استفاده از $http.post ما فایل های تصویری مان را به کنترلر MVC پاس میدهیم و متد HTTPost مان به صورت زیر است :

$http.post("/shanuShopping/UploadFile", formData,

{

withCredentials: true,

headers: { 'Content-Type': undefined },

transformRequest: angular.identity

})

یادداشت $http.post(“”) ما نیاز به ارائه ی نام کنترلر MVC مان و نام متد HTTPost جایی که تصاویر را به فولدر root مان آپلود میکنیم. در ادامه کد آپلود عکس بر روی کنترلر MVC مان را داریم :

[HttpPost]
public JsonResult UploadFile()
{
string Message, fileName;
Message = fileName = string.Empty;
bool flag = false;
if (Request.Files != null)
{
var file = Request.Files[0];
fileName = file.FileName;
try
{
file.SaveAs(Path.Combine(Server.MapPath("~/Images"), fileName));
Message = "File uploaded";
flag = true;
}
catch (Exception)
{
Message = "File upload failed! Please try again";
}
}
return new JsonResult { Data = new { Message = Message, Status = flag } };
}

 

متد وب کنترلر MVC

Controller.js سورس کد کامل

/// reference path="../angular.js" /
/// reference path="../angular.min.js" /
/// reference path="../angular-animate.js" /
/// reference path="../angular-animate.min.js" /
/// reference path="Modules.js" /
/// reference path="Services.js" /
app.controller("AngularJs_WCFController", function ($scope, $timeout, $rootScope, $window, AngularJs_WCFService, FileUploadService) {
$scope.date = new Date();
//  To set and get the Item Details values
var firstbool = true;
$scope.Imagename = "";
$scope.Item_ID = "0";
$scope.Item_Name = "";
$scope.Description = "";
$scope.Item_Price = "0";
$scope.txtAddedBy = "";
// This is publich method which will be called initially and load all the item Details.
GetItemDetails();
//To Get All Records
function GetItemDetails() {
var promiseGet = AngularJs_WCFService.GetItemDetails();
promiseGet.then(function (pl) {
$scope.getItemDetailsDisp = pl.data
},
function (errorPl) {
});
}
//Declarationa and Function for Image Upload and Save Data
//--------------------------------------------
// Variables
$scope.Message = "";
$scope.FileInvalidMessage = "";
$scope.SelectedFileForUpload = null;
$scope.FileDescription_TR = "";
$scope.IsFormSubmitted = false;
$scope.IsFileValid = false;
$scope.IsFormValid = false;
//Form Validation
$scope.$watch("f1.$valid", function (isValid) {
$scope.IsFormValid = isValid;
});
// THIS IS REQUIRED AS File Control is not supported 2 way binding features of Angular
// ------------------------------------------------------------------------------------
//File Validation
$scope.ChechFileValid = function (file) {
var isValid = false;
if ($scope.SelectedFileForUpload != null) {
if ((file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; file.size = (800 * 800)) {
$scope.FileInvalidMessage = "";
isValid = true;
}
else {
$scope.FileInvalidMessage = "Only JPEG/PNG/Gif Image can be upload )";
}
}
else {
$scope.FileInvalidMessage = "Image required!";
}
$scope.IsFileValid = isValid;
};
//File Select event
$scope.selectFileforUpload = function (file) {
var files = file[0];
$scope.Imagename = files.name;
alert($scope.Imagename);
$scope.SelectedFileForUpload = file[0];
}
//----------------------------------------------------------------------------------------
//Save File
$scope.SaveFile = function () {
$scope.IsFormSubmitted = true;
$scope.Message = "";
$scope.ChechFileValid($scope.SelectedFileForUpload);
if ($scope.IsFormValid &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; $scope.IsFileValid) {
FileUploadService.UploadFile($scope.SelectedFileForUpload).then(function (d) {
var ItmDetails = {
Item_ID:$scope.Item_ID,
Item_Name: $scope.Item_Name,
Description: $scope.Description,
Item_Price: $scope.Item_Price,
Image_Name: $scope.Imagename,
AddedBy: $scope.txtAddedBy
};
var promisePost = AngularJs_WCFService.post(ItmDetails);
promisePost.then(function (pl) {
alert(p1.data.Item_Name);
GetItemDetails();
}, function (err) {
// alert("Data Insert Error " + err.Message);
});
alert(d.Message + " Item Saved!");
$scope.IsFormSubmitted = false;
ClearForm();
}, function (e) {
alert(e);
});
}
else {
$scope.Message = "All the fields are required.";
}
};
//Clear form
function ClearForm() {
$scope.Imagename = "";
$scope.Item_ID = "0";
$scope.Item_Name = "";
$scope.Description = "";
$scope.Item_Price = "0";
$scope.txtAddedBy = "";
angular.forEach(angular.element("input[type='file']"), function (inputElem) {
angular.element(inputElem).val(null);
});
$scope.f1.$setPristine();
$scope.IsFormSubmitted = false;
}
})
.factory('FileUploadService', function ($http, $q) {
var fac = {};
fac.UploadFile = function (file) {
var formData = new FormData();
formData.append("file", file);
var defer = $q.defer();
$http.post("/shanuShopping/UploadFile", formData,
{
withCredentials: true,
headers: { 'Content-Type': undefined },
transformRequest: angular.identity
})
.success(function (d) {
defer.resolve(d);
})
.error(function () {
defer.reject("File Upload Failed!");
});
return defer.promise;
}
return fac;
//---------------------------------------------
//End of Image Upload and Insert record
});

//End of Image Upload and Insert record

});

 

لینک مرجع برای آپلود فایل Angular JS با استفاده از MVC :

http://dotnetawesome.blogspot.in/2015/01/how-to-upload-files-with-angularjs-and-mvc4.html

حال ببینید که ما Angular JS Module,Controller , Service خود را ساخته ایم. قدم بعدی چیست ؟

کنترل و مشاهده MVC را بسازید تا نتیجه تان را نمایش دهد.

افزودن کنترلر

بر روی کنترلر ها راست کلیک کنید و گزینه ی افزودن کنترلر را انتخاب کنید سپس کنترلر MVC 5 را انتخاب کنید و سپس بر روی افزودن کلیک کنید.

 ویژگی های Angular JS

نام کنترلر را تغییر دهید و در اینجا من نام آن را shanuShoppingController گذاشته ام و سپس بر روی OK کلیک کنید.

افزودن مشاهده : بر روی شاخص کنترلر راست کلیک کنید و افزودن مشاهده را انتخاب کنید.

کنترلر MVC فایل CS :

در اینجا ما میتوانیم در کنترلر MVC , 2 عدد ActionResults بسازیم.

یکی شاخص و دیگری ItemMaster .

در شاخص من یک مشاهده به عنوان شاخص می سازم و از این صفحه برای نمایش جزئیات کارت خرید مان با اشیا استفاده میشود.

در ItemMaster من یک مشاهده به عنوان ItemMaster ساخته ام و از این صفحه برای نمایش جزئیات اشیا , افزودن یک شئ جدید و آپلود عکس برای یک شئ استفاده میشود. بعد از آن ما متد HttpPost UploadFile() را برای آپلود فایل عکس داریم.

public class shanuShoppingController : Controller

{

// GET: shanuShopping

public ActionResult Index()

{

return View();

}

public ActionResult ItemMaster()

{

return View();

}

[HttpPost]

public JsonResult UploadFile()

{

string Message, fileName;

Message = fileName = string.Empty;

bool flag = false;

if (Request.Files != null)

{

var file = Request.Files[0];

fileName = file.FileName;

try

{

file.SaveAs(Path.Combine(Server.MapPath("~/Images"), fileName));

Message = "File uploaded";

flag = true;

}

catch (Exception)

{

Message = "File upload failed! Please try again";

}

}

return new JsonResult { Data = new { Message = Message, Status = flag } };

}

}

برنامه تان را اجرا کنید

در اینجا میتوانیم ببینیم زمانی که من برنامه را اجرا میکنم ابتدا سوابق Order Master را در جدول نمایش میدهم.

میتوانید در منو ببینید که من آیتم های منوی shanu shopping Cart و Item Master را دارم.

ابتدا ما منوی shanu shopping Cart را میبینیم. زمانی که کاربر بر روی این منو کلیک میکند( Index.html (View را نمایش خواهد داد.

Shanu Shopping Cart Menu :

به صورت پیش فرض من جزئیات تمام اشیا را نمایش میدهم.

کاربر میتواند جست و جویش را با استفاده از کد , نام اشیا و خصوصیات و نام کاربری برای جستجوی شئ از لیست فیلتر کند.

کاربر همچنین میتواند با کلیک کردن بر روی بالای ستون اشیا را مرتب نماید.

کلیک برای اشیای سبد خرید من : این متد جزئیات سبد خرید کاربر را نمایش میدهد. اگر شئ برای کاربر نبود پیام هشدار نمایش داده خواهد شد.

افزودن اشیا به سبد

برای افزودن اشیا به سبد بر روی عکس شئ کلیک کنید.

 آموزش MVC

افزودن شئ به سبد :

زمانی که کاربر بر روی بر روی هر یک از عکس های لیست کلیک میکند , من جزئیات شئ را برای افزودن شئ انتخاب شده به سبد همانند شکل زیر نمایش میدهم :

 آموزش MVC

جزئیات سبد :

هرگاه کاربر بر روی افزودن به سبد کلیک کند , من جزئیات سبد را همانند زیر نمایش خواهم داد.

زمانی که کاربر برای اولین بار یک شئ را اضافه میکند من تعداد را به منظور افزایش آن نمایش میدهم و کاربر میتواند با کلیک دوباره به همان شئ برگردد.

در اینجا من چک میکنم که آیا شئ در سبد خرید وجود دارد یا خیر.

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

 آموزش MVC

جزئیات کامل سبد.

 ویژگی های Angular JS

منوی Item Master :

به صورت پیش فرض من جزئیات تمام اشیا را نمایش میدهم.

کاربر میتواند جستجویش را با استفاده از کد , نام اشیا و خصوصیات و نام کاربری برای جستجوی شئ از لیست فیلتر کند.

کاربر همچنین میتواند با کلیک کردن بر روی بالای ستون اشیا را مرتب نماید.

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

 ویژگی های Angular JS

اشیا را بیاورید و در فولدر root آپلود کنید و شئ را در پایگاه داده ذخیره کنید.

 ویژگی های Angular JSشما میتوانید این برنامه را متناسب با نیازتون گسترش دهید و ویژگی های بیشتری بیافزایید. مانند مدیریت کاربری , جزئیات پرداخت سبد خرید و غیره . جستجو گر های مطمئن : Chrome و Firefox .

داریوش فرخی

داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

    رامین پاسخ

    سلام بسیار عالی ممنون بابت زحمتتون، کلی کمکم کرد. فقط یه سوال امکان دانلود یا ارسال پروژه برام هست؟ هزینشم پرداخت میشه

      مسعود شریفی پاسخ

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

    احسان پاسخ

    یعنی خداییش دمتون گرم خیلی مفید وکامل بود