ساخت منو پویا AngularJS با MVC و WCF

547 بازدید

دسته بندی: آموزش MVC - آموزش طراحی سایت منتشر شده در تیر ۲۸, ۱۳۹۴ نویسنده: داریوش فرخی زمان مطالعه: 43 دقیقه 0 نظر به روز شده در اردیبهشت ۲۵, ۱۳۹۸

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

همچنین میتوانید مقاله های قبلی من در رابطه با AngularJS با MVC و WCF Rest Service را نیزمشاهده کنید.با من در ادامه ی این مقاله همراه باشید …

چرا به ساخت منو پویا AngularJS احتیاج داریم :

اگر ما بر روی ساخت یک وب سایت ساده با تعداد صفحات اندک کار میکنیم و تنها یک برنامه نویس بر روی ساخت وب سایت کار میکند , میتوانیم از منو های ایستا استفاده کنیم.

حال در نظر بگیرید که ما احتیاج به کار بر روی پروژه وب بزرگی داریم. بیاید یک برنامه ی وب ERP را در نظر بگیریم.

در این مورد بیش از ۲ برنامه نویس بر روی پروژه کار میکنند و هیچ یک از صفحات بیش از ۵۰ تا ۱۰۰ نخواهد بود. در این مورد کار استفاده از منو های پویا سخت میباشد.

و همچنین شانس بیشتری برای حذف یا افزودن اشیای منوی جدید به پروژه ی وب مان است به عنوان مثال کاربر ما میتواند افزودن ۵ منوی جدید یا حذف یک شئ منو را درخواست کند.

در این زمینه حذف اشیای منویی که هنوز زنده است کار سخت و دشواری است.

و همچنین برای پروژه های بزرگ مانند ERP احتیاج به نمایش منو بر اساس نقش کاربر است.

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

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

چه کسی میتواند این منو را مدیریت کند ؟

این یک بخش بسیار مهم است که admin و یا ابر کاربر میتواند کاربران را اضافه/ویرایش/حذف کند.

زمانی که admin وارد شد میتواند یک منوی جدید بسازد یا منو های قبلی را ویرایش و یا اشیایی از آن را برای نمایش حذف کند.

این مقاله بر روی مدیریت منو تمرکر ندارد اما در این مقاله طریقه ی ساخت یک Master Menu وMenu Detail Table , وارد کردن تعدادی نمونه اشیای منو به جدول پایگاه داده مان را به همراه جزئیات خواهیم دید.

نمایش منو از پایگاه داده به صورت پویا در صفحات وب MVC با استفاده از AngularJS و WCF Rest Service.

این مقاله توضیح میدهد که :

چگونه یک WCF Rest Service بسازیم و داد ها را از پایگاه دریافت کنیم؟
چگونه بسته ی AngularJS را در برنامه ی MVC خود نصب کنیم؟
چگونه برنامه ی AngularJS خودمان را برای منو های ساخته شده ی پویا بسازیم؟
چگونه از یک WCF Service برای نمایش منو های پویا در AngularJS استفاده کنیم؟

یادداشت: پیش نیاز ها ویژوال استودیوی ۲۰۱۳ هستند.

در اینجا میتوانیم برخی از لینک های مرجع وپایه برای Windows Communication Foundation ) WCF) را مشاهده کنیم.

WCF یک چارچوب برای ساخت برنامه های سرویس محور است.

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

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

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

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

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

در قسمت کد ببینیم که چگونه میتوانیم یک WCF Rest Service بسازیم و در برنامه AngularJS مان استفاده کنیم.

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

https://msdn.microsoft.com/en-in/library/dd203052.aspx

AngularJS

ممکن است با Model , View و View Model) MVVM) و Model , View و Controlle) rMVC) آشنا باشیم. AngularJS یک چارچوب JavaScript است که به طور خالص بر پایه ی HTML , CSS و JavaScript برقرار است.

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

در این مثال من از یک Model , View و Service استفاده کرده ام. در قسمت کد ببینیم که چگونه میتوانیم AngularJS را در برنامه ی MVC مان نصب و ایجاد کنیم.

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

https://msdn.microsoft.com/en-in/library/dd203052.aspx

استفاده از کد

ما یک MenuMaster و جدول MenuDetails تخت پایگاه داده MenuDB میسازیم.

یادداشت : MenuMaster و MenuDetails یا جدول های مهم را که برای بارگذاری منو های پویای ما استفاده میشود.

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

در این مقاله من نمایش سطح ۳ از منو را نمایش میدهم. در اینجا میتوانید یک نمونه سطح ۳ را ببینید.

در اینجا میتوانیم سطح ۱ را ببینیم ß Inventory ;

سطح دوم ß Inventory Details

سطح سوم ß رسید های خوب و موضوع های خوب به اتمام رسیده

حال بیاید ببینیم که چگونه میتوانیم جدول ارتباطات را برای ساخت Master و منوی جزئیات ایجاد کنیم.

Menu Master Table

وارد کردن سطح۱

Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('Root','Inventory','Shanu',getdate()-23)

وارد کردن سطح۲

Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('Inventory','INV001','Shanu',getdate()-23)

وارد کردن سطح۳

Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('INV001','FG001','Shanu',getdate()-23)
Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('INV001','FG002','Shanu',getdate()-23)

جدول جزئیات منو

وارد کردن سطح ۱

Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,

MenuURL,UserID,CreatedDate)

values('Inventory','Inventory','Inventory','Index','Inventory',

'Shanu',getdate()-23)

وارد کردن سطح ۲

Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,

MenuURL,UserID,CreatedDate)

values('INV001','Inventory','Inventory Details','Index','Inventory',

'Shanu',getdate()-23)

وارد کردن سطح ۳

Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,

MenuURL,UserID,CreatedDate)

values('FG001','FGIN','FG Receipt','FGIN','Inventory','Shanu',getdate()-43)


Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,

MenuURL,UserID,CreatedDate)

values('FG002','FGOUT','FG Issue','FGOUT','Inventory','Shanu',getdate()-13)

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

در اینجا میتوانیم زمینه هایی که برای Menu Master استفاده شده است را ببینیم.

در ادامه Script ای برای ساخت یک پایگاه داده , جدول و نمونه Query وارد شده. این Script را در سرور 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] = 'MenuDB' )
DROP DATABASE MenuDB
GO

CREATE DATABASE MenuDB
GO
USE MenuDB
GO

-- ۱) //////////// ToysDetails table
-- Create Table  ToysDetails ,This table will be used to store the details like Toys Information

IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'MenuMaster' )
DROP TABLE MenuMaster
GO
CREATE TABLE MenuMaster
(
   Menu_ID int identity(1,1),
   Menu_RootID VARCHAR(30)  NOT NULL,
   Menu_ChildID VARCHAR(30)  NOT NULL,
   UserID varchar(50),
   CreatedDate datetime
CONSTRAINT [PK_MenuMaster] PRIMARY KEY CLUSTERED      
(    
  [Menu_ID] ASC   ,
  [Menu_RootID] ASC,
  [Menu_ChildID] 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
--delete from MenuMaster
-- Insert the sample records to the ToysDetails Table
Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('Root','Home','Shanu',getdate()-23)
--Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('Home','Home','Shanu',getdate()-23)
Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('Home','About','Shanu',getdate()-23)
Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('Home','Contact','Shanu',getdate()-23)
Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('Root','Masters','Shanu',getdate()-23)
Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('Masters','ITM001','Shanu',getdate()-23)
--Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('ITM001','ITM001','Shanu',getdate()-23)
Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('ITM001','ITM002','Shanu',getdate()-23)
Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('ITM001','ITM003','Shanu',getdate()-23)
Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('Masters','CAT001','Shanu',getdate()-23)
Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('CAT001','CAT001','Shanu',getdate()-23)
Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('CAT001','CAT002','Shanu',getdate()-23)
Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('CAT001','CAT003','Shanu',getdate()-23)
Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('Root','Inventory','Shanu',getdate()-23)
Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('Inventory','INV001','Shanu',getdate()-23)
Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('INV001','FG001','Shanu',getdate()-23)
Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('INV001','FG002','Shanu',getdate()-23)


select * from MenuMaster
-- ۱) END //

-- ۲) Cart Details Table
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'MenuDetails' )
DROP TABLE MenuDetails
GO

CREATE TABLE MenuDetails
(
   MDetail_ID int identity(1,1),
   Menu_ChildID VARCHAR(20) NOT NULL,
   MenuName VARCHAR(100) NOT NULL,
   MenuDisplayTxt VARCHAR(200) NOT NULL,
   MenuFileName VARCHAR(100) NOT NULL,
   MenuURL VARCHAR(500) NOT NULL,
   USE_YN Char(1) DEFAULT 'Y',
   UserID varchar(50),
   CreatedDate datetime
CONSTRAINT [PK_MenuDetails] PRIMARY KEY CLUSTERED     
(    
  [MDetail_ID] ASC,
  [Menu_ChildID] 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

----delete from MenuDetails

Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate)
values('Root','Home','Shanu Home','Index','Home','Shanu',getdate()-23)

Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate)
values('Home','Home','Shanu Home','Index','Home','Shanu',getdate()-23)

Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate)
values('About','About','About Shanu','About','Home','Shanu',getdate()-43)

Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate)
values('Contact','Contact','Contact Shanu','Contact','Home','Shanu',getdate()-13)

Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate)
values('Masters','Masters','Masters','ItemDetails','Masters','Shanu',getdate()-13)

Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate)
values('ITM001','ItemMaster','Item Master','ItemDetails','Masters','Shanu',getdate()-13)

Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate)
values('ITM002','ItemDetail','Item Details','ItemDetails','Masters','Shanu',getdate()-13)

Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate)
values('ITM003','ItemManage','Item Manage','ItemManage','Masters','Shanu',getdate()-13)

Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate)
values('CAT001','CatMaster','Category Masters','CATDetails','Masters','Shanu',getdate()-13)

Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate)
values('CAT002','CATDetail','Category Details','CATDetails','Masters','Shanu',getdate()-13)

Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate)
values('CAT003','CATManage','Category Manage','CATManage','Masters','Shanu',getdate()-13)


Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate)
values('Inventory','Inventory','Inventory','Index','Inventory','Shanu',getdate()-23)

Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate)
values('INV001','Inventory','Inventory Details','Index','Inventory','Shanu',getdate()-23)

Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate)
values('FG001','FGIN','FG Receipt','FGIN','Inventory','Shanu',getdate()-43)

Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate)
values('FG002','FGOUT','FG Issue','FGOUT','Inventory','Shanu',getdate()-13)

select * from MenuMaster

select * from MenuDetails

             select   A.Menu_RootID,
                 B.MDetail_ID,
                 B.Menu_ChildID,
                 B.MenuName,
                 B.MenuDisplayTxt,
                 B.MenuFileName,        
                 B.MenuURL ,          
                 B.UserID                                                     
                 FROM
                 MenuMaster A
                 INNER JOIN MenuDetails B
                 ON A.Menu_ChildID=B.Menu_ChildID

۲ ساخت WCF Rest Service

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

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

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

[ServiceContract]: متد ها و هر عملیات موجود را برای سرویس بررسی میکند. Service Contract یک رابط است و متد ها میتوانند در داخل سرویس اعلام شوند.
[OperationContract]: مشابه وب سرویس است [WEBMRTHOD].
[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 ساخته ام بنام MenuDataContract. در اینجا میتوانیم ببینیم که همه ی نام ستون های جدول مان را به عنوان عضو داده اعلام کرده ایم.

public class MenuDataContract    {
        [DataContract]
        public class MenuMasterDataContract
        {
            [DataMember]
            public string Menu_ID { get; set; }

            [DataMember]
            public string Menu_RootID { get; set; }

            [DataMember]
            public string Menu_ChildID { get; set; }

            [DataMember]
            public string UserID { get; set; }
        }

        [DataContract]
        public class MenuDetailDataContract
        {
            [DataMember]
            public string MDetail_ID { get; set; }

            [DataMember]
            public string Menu_RootID { get; set; }

            [DataMember]
            public string Menu_ChildID { get; set; }

            [DataMember]
            public string MenuName { get; set; }

            [DataMember]
            public string MenuDisplayTxt { get; set; }

            [DataMember]
            public string MenuFileName { get; set; }

            [DataMember]
            public string MenuURL { get; set; }

            [DataMember]
            public string UserID { get; set; }
        }
    }

[OperationContract]

در OperationContract میتوانیم WebInvoke و WebGet را برای دریافت داده از پایگاه داده درRest Service ببینیم.

RequestFormat = WebMessageFormat.Json,
           ResponseFormat = WebMessageFormat.Json,

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

JSON یک فرمت تغییرپذیر داده ای سبک وزن است.

UriTemplate: در اینجا ما نام متد مان را ارائه میدهیم.

در اینجا من ۳ متد GetMenuDetails را مشخص کرده ام. متد GetMenuDetails همه ی Menu Master و جزئیات را که در AngularJS مان در حال استفاده است , میگیرد تا منو را با استفاده از فیلتر برای هر تکرار نمایش دهد.

[ServiceContract]

    public interface IService1

    {

[OperationContract]

        [WebInvoke(Method = "GET",

           RequestFormat = WebMessageFormat.Json,

           ResponseFormat = WebMessageFormat.Json,

           UriTemplate = "/GetMenuDetails/")]

        List&lt;MenuDataContract.MenuDetailDataContractGetMenuDetails();

 }

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 ShanuMenuCreation_WCF
{
    // NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IService1" in both code and config file together.
    [ServiceContract]
    public interface IService1
    {
        [OperationContract]
        [WebInvoke(Method = "GET",
           RequestFormat = WebMessageFormat.Json,
           ResponseFormat = WebMessageFormat.Json,
           UriTemplate = "/GetMenuDetails/")]
        ListMenuDataContract.MenuDetailDataContract&gt; GetMenuDetails();
        // TODO: Add your service operations here
    }

 // Use a data contract as illustrated in the sample below to add composite types to service operations.
    public class MenuDataContract
    {
        [DataContract]
        public class MenuMasterDataContract
        {
            [DataMember]
            public string Menu_ID { get; set; }

            [DataMember]
            public string Menu_RootID { get; set; }

            [DataMember]
            public string Menu_ChildID { get; set; }

            [DataMember]
            public string UserID { get; set; }
        }

        [DataContract]
        public class MenuDetailDataContract
        {
            [DataMember]
            public string MDetail_ID { get; set; }

            [DataMember]
            public string Menu_RootID { get; set; }

            [DataMember]
            public string Menu_ChildID { get; set; }

            [DataMember]
            public string MenuName { get; set; }

            [DataMember]
            public string MenuDisplayTxt { get; set; }

            [DataMember]
            public string MenuFileName { get; set; }

            [DataMember]
            public string MenuURL { get; set; }

            [DataMember]
            public string UserID { get; set; }
        }
    }
}

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

بر روی پروژه ی WCF خود راست کلیک کنید و گزینه ی Add New Item و سپس گزینه ی ADO.NET Entity Data Model را انتخاب و بر روی Add کلیک کنید.

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

بر روی New Connection کلیک کنید.

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

ما پایگاه داده ی خود را تحت نام MenuDB ساخته ایم. پس پایگاه داده را انتخاب میکنیم و بر روی OK کلیک میکنیم.

بر روی Next کلیک کنید و جدول های مورد نیاز را انتخاب کرده و بر روی Finish کلیک کنید.

در اینجا میتوانیم ببینیم که ShanuMenuModel خود را ساخته ایم.

Service1.SVC

Service.SVC.CS رابط IServicev را اجرا میکند و همه ی متد های عملیات Contract را معرفی میکند.

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

ساخت اشیا برای مدل Entity مان و در GetMenuDetails استفاده از یک LINQ برای ایجاد ارتباط بین Query هایی که من از هر دو Menu Master و Detail Datas گرفته ام.

public class Service1 : IService1
    {
        ShanuMenuCreation_WCF.MenuDBEntities OME;

        public Service1()
        {
            OME = new ShanuMenuCreation_WCF.MenuDBEntities();
        }

        public List&lt;MenuDataContract.MenuDetailDataContract&gt; GetMenuDetails()
        {
            ////var query = (from a in OME.MenuDetails
            ////             select a).Distinct();
             var query = (from A in OME.MenuMaster  
                         join B in OME.MenuDetails on A.Menu_ChildID equals B.Menu_ChildID
                         select new  
                         {  
                            A.Menu_RootID,
                            B.MDetail_ID,
                            B.Menu_ChildID,
                            B.MenuName,
                            B.MenuDisplayTxt,
                            B.MenuFileName,
                            B.MenuURL ,
                            B.UserID
                         }).ToList().OrderBy(q =&gt; q.MDetail_ID); 

            List&lt;MenuDataContract.MenuDetailDataContract&gt; MenuList = new List&lt;MenuDataContract.MenuDetailDataContract&gt;();

            query.ToList().ForEach(rec =&gt;
            {
                MenuList.Add(new MenuDataContract.MenuDetailDataContract
                {
                    MDetail_ID = Convert.ToString(rec.MDetail_ID),
                    Menu_RootID = rec.Menu_RootID,
                    Menu_ChildID = rec.Menu_ChildID,
                    MenuName = rec.MenuName,
                    MenuDisplayTxt = rec.MenuDisplayTxt,
                    MenuFileName = rec.MenuFileName,
                    MenuURL = rec.MenuURL,
                    UserID = rec.UserID,
                });
            });
            return MenuList;
       }    
    }

Web.Config:

در پروژه های WCF موارد زیر را تغییر میدهد :

۱ تغییر :

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

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

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

اجرای WCF Service:

حال ما WCF Rest Service خود را ساخته ایم. بیاید آن را اجرا و تست کنیم. در آدرس سرویس مان میتوانیم نام متد مان را اضافه کنیم و نتایج داده های JSON از پایگاه داده را ببینیم.

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

اکنون ما WCF مان را تمام کرده ایم و وقت آن است که برنامه ی MVC AngularJS مان را ایجاد کنیم.

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

بر روی پروژه در قسمت Solution راست کلیک کنید و بر روی Add New Project کلیک کرده و نام پروژه تان را وارد کرده و بر روی OK کلیک کنید.

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

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

افزودن WCF Service:

بر روی Solution قسمت MVC راست کلیک کرده و گزینه ی Add سپس Service Refrence را انتخاب کنید.

آدرس WCF خود را وارد کنید و بر GO کلیک کنید. در اینجا آدرس WCF من http://localhost:3514/Service1.svc/ است.

نام خود را بیافزاید و بر روی OK کلیک کنید.

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

گام هایی برای نصب بسته ی AngularJS

بر روی پروژه ی MVC تان راست کلیک کنید و گزینه ی Manage NuGet Packages را انتخاب کنید.

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

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

Modules.js

Controller.js

Services.js

روش ساخت فایل های AngularJS Script

بر روی فولر Script راست کلیک کنید و فولدر خودتان را برای ساخت جاوا اسکریپت های AngularJS Module/controller/Services ایجاد کنید.

در فولدر script خود سه فایل JavaScript به نام های Module.js , Controller.js و Services.js همانند زیر ایجاد کنید :

Modules.js: در اینجا مراجع Angular.js JavaScript مان را اضافه میکنیم. نام module مان را RESTClientModule قرار میدهیم.

/// reference path="../angular.js" /
/// reference path="../angular.min.js" /  

var app;
(function () {
    app = angular.module("RESTClientModule", []);
})();

Services.js:

در اینجا نامی برای Service مان ارائه میدهیم واز این نام در shanucontroller.js استفاده میکنیم.

در اینجا من برای Angular service نام AngularJS_WCFService را برگزیده ام.

میتوانید نام مورد نظر خودتان را نیز وارد کنید اما مراقب باشید که باید آن را در Controller.js نیز تغییر دهید.

Angularjs میتواند داده های json را دریافت کند; در اینجا میتوانید ببینید که من آدرس WCF Service مان را برای دریافت جزئیات اشیا به عنوان داده های JSON ارائه میدهیم.

برای وارد کردن نتایج اطلاعات شئ وارد شده به پایگاه داده ما اشیا را به عنوان داده های JSON به عنوان پارامتر به متد WCF insert پاس میدهیم.

/// reference path="../angular.js" / 
/// reference path="../angular.min.js" /  
/// reference path="Modules.js" /    

app.service("AngularJs_WCFService", function ($http) {
    //Get Order Master Records 
    this.geMenuDetails = function () {
        return $http.get("http://localhost:3514/Service1.svc/GetMenuDetails");
    };    
});

AngularJS Controller :

در اینجا ما مراجع را به AngularJS JavaScript , Module.js و Service.js مان اضافه میکنیم.

برای کنترلر من نام AngularJsShanu_WCFController را در نظر گرفته ام.

در قسمت Controller منطق همه ی کار ها را انجام داده ام و داده را از داده ی WCF JSON به صفحه ی MVC HTML مان بازمیگردانیم.

۱ ) مقداردهی متغیر ها

در ابتدا من تمام متغیر های محلی را که به آن ها نیاز داریم به همراه تاریخ کنونی مقداردهی کرده ام و تاریخ را با استفاده از $scope.date ذخیره میکنم.

یادداشت: $scope.subChildIDS = “ITM001”; از این متغیر برای فیلترکردن سطح ۲ استفاده میشود.

۲ ) متد ها

getAllMenuDetails() : در این متد من همه ی جزئیات منو را به عنوان JSON دریافت میکنم و نتیجه را به صفحه ی اصلی bind میدهیم.

$scope.showsubMenu = function (showMenus,ids) { } : در این متد , بر روی اتمام mouse من سطح ۲ جزئیات منو را فیلتر کرده ام و اشیای منو را به این لیست اضافه کرده ام.

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

/// reference path="../angular.js" / 
/// reference path="../angular.min.js" /  
/// reference path="Modules.js" /  
/// reference path="Services.js" /  

app.controller("AngularJsShanu_WCFController", function ($scope, $window, AngularJs_WCFService) {
    $scope.date = new Date();
    $scope.showDetails = false;
    $scope.showSubDetails = false;
    $scope.subChildIDS = "ITM001";
    $scope.Imagename = "R1.png";
    getAllMenuDetails();
    //To Get All Records  
    function getAllMenuDetails() {
        var promiseGet = AngularJs_WCFService.geMenuDetails();
        promiseGet.then(function (pl) {
            $scope.MenuDetailsDisp = pl.data
        },
             function (errorPl) {
             });
    }

    $scope.showMenu = function (showMenus) {

        if (showMenus == 1) {
            $scope.Imagename = "R2.png"
            $scope.showDetails = true;
        }
        else {
            $scope.Imagename = "R1.png"
            $scope.showDetails = false;
        }
    }

    $scope.showsubMenu = function (showMenus,ids) {    

        if (showMenus == 1) {
            $scope.subChildIDS = ids;        
            $scope.showSubDetails = true;       
        }
        else if(showMenus == 0) {
            $scope.showSubDetails = false;        
        }    
        else {       
           $scope.showSubDetails = true;       
        }      
    }
});

پس حالا ما AngularJS Module/Controller/Service را ساخته ایم. پس از آن چه باید کرد؟

ساخت کنترل MVC و View برای نمایش نتایج مان

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

بر روی کنترلر راست کلیک کنید و سپس Add Controller را انتخاب کنید سپس MVC 5 Controller –Empty را انتخاب کرده و سپس بر روی افزودن کلیک کنید.

public class MastersController : Controller
    {
        // GET: Masters
        public ActionResult Index()
        { return View(); }

        public ActionResult ItemDetails()
        { return View(); }

        public ActionResult ItemManage()
        { return View(); }
        public ActionResult CATDetails()
        { return View(); }

        public ActionResult CATManage()
        { return View(); }
    }

یک کنترلر دیگر به عنوان InventoryController اضافه کنید.

public class InventoryController : Controller
    {
        // GET: Inventory
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult FGIN()
        {
            return View();
        }
        public ActionResult FGOUT()
        {
            return View();
        }

    }

۱ ) Index View

نام View را Index بگذارید.

در قسمت View صفحه تان را design کنید و Angular.js , Module.js , Services.js و Controller.js را به آن ارجاع دهید.

در AngularJS ما از {{ }} برای bind یا نمایش داده ها استفاده میکنیم.

در اینجا میتوانیم ببینیم که من ابتدا یک جدول ساخته ام و چیزی برای آن جدول.

ابتدا در جدول من از data-ng-controller=”AngularJsShanu_WCFController” و در اینجا میتوانیم data-ng-controller را ببینیم که برای bind کردن داده های کنترلر به جدول HTML استفاده میشود.

با استفاده از < li data-ng-repeat=”menus in MenaDetailsDisp | filter:{Menu_RootID:’Root’}” > میتوانیم همه ی جزئیات های منو را دریافت و در سطح ۱ جزئیات منو به عنوان top menu نمایش دهیم.

در اینجا میتوانیم ببینیم که من منو را به همراه rootID با Root فیلتر کرده ام.

در طول وارد کردن query من برای هر یک از سطوح بالایی منو Rootid را به عنوان Root تعریف کرده ام.

ابتدا همه ی منو های سطح بالا را اضافه میکنیم و برای هریک از منو های سطح بالا در صورت وجود سطح ۲ , فیلتر جزئیات منوی سطح ۲ را به همراه سطح ۱ RootUD همانند زیر بارگذاری میکنیم.


li data-ng-repeat="menus in MenuDetailsDisp | filter:{Menu_RootID:'Root'}"
                                        @{
                                            var url = Url.Action("{{menus.MenuFileName}}", "{{menus.MenuURL}}", new { id = "{{id=menus.MenuURL}}" });
                                            url = HttpUtility.UrlDecode(url);
                                        }
                                        a data-ng-href="@url"{{menus.MenuDisplayTxt}}/a
                                        ul class="sub-menu"
                                            li data-ng-repeat="submenus in MenuDetailsDisp | filter:{Menu_RootID:menus.Menu_ChildID}" ng-mouseover="showsubMenu(1,submenus.Menu_ChildID);" ng-mouseout="showsubMenu(0,submenus.Menu_ChildID);"
                                                @{
                                                    var url1 = Url.Action("{{submenus.MenuFileName}}", "{{submenus.MenuURL}}", new { id = "{{id=submenus.MenuURL}}" });
                                                    url1 = HttpUtility.UrlDecode(url1);
                                                }
                                                a data-ng-href="@url1"{{submenus.MenuDisplayTxt}}/a
li data-ng-repeat="menus in MenuDetailsDisp | filter:{Menu_RootID:'Root'}"
                                        @{
                                            var url = Url.Action("{{menus.MenuFileName}}", "{{menus.MenuURL}}", new { id = "{{id=menus.MenuURL}}" });
                                            url = HttpUtility.UrlDecode(url);
                                        }
                                        a data-ng-href="@url"{{menus.MenuDisplayTxt}}/a
                                        ul class="sub-menu"
                                            li data-ng-repeat="submenus in MenuDetailsDisp | filter:{Menu_RootID:menus.Menu_ChildID}" ng-mouseover="showsubMenu(1,submenus.Menu_ChildID);" ng-mouseout="showsubMenu(0,submenus.Menu_ChildID);"
                                                @{
                                                    var url1 = Url.Action("{{submenus.MenuFileName}}", "{{submenus.MenuURL}}", new { id = "{{id=submenus.MenuURL}}" });
                                                    url1 = HttpUtility.UrlDecode(url1);
                                                }
                                                a data-ng-href="@url1"{{submenus.MenuDisplayTxt}}/a

در اینجا میتوانیم یک سطح ۲ را که من توسط data-ng-repeat=”submenus in MenuDetailsDisp | filter: {Menu_RootID:menus.Meni_ChildID} فیلتر کرده ام ببینیم. جایی که menus.Menu_ChildID یک id منو سطح بالا است.

همانند همین برای سطح ۳ , من سطح ۲ root id را همانند زیر میدهم :


div style="overflow:visible;height:100px;"
                                ul class="menu"
                       li data-ng-repeat="menus in MenuDetailsDisp | filter:{Menu_RootID:'Root'}"
                                        @{
                                            var url = Url.Action("{{menus.MenuFileName}}", "{{menus.MenuURL}}", new { id = "{{id=menus.MenuURL}}" });
                                            url = HttpUtility.UrlDecode(url);
                                        }
                                        a data-ng-href="@url"{{menus.MenuDisplayTxt}}/a
                                        ul class="sub-menu"
                                            li data-ng-repeat="submenus in MenuDetailsDisp | filter:{Menu_RootID:menus.Menu_ChildID}" ng-mouseover="showsubMenu(1,submenus.Menu_ChildID);" ng-mouseout="showsubMenu(0,submenus.Menu_ChildID);"
                                                @{
                                                    var url1 = Url.Action("{{submenus.MenuFileName}}", "{{submenus.MenuURL}}", new { id = "{{id=submenus.MenuURL}}" });
                                                    url1 = HttpUtility.UrlDecode(url1);
                                                }
                                                a data-ng-href="@url1"{{submenus.MenuDisplayTxt}}/a
                                                ul ng-show="showSubDetails" class="sub-menu2"
                                                    li data-ng-repeat="sub1menus in MenuDetailsDisp  | filter:{Menu_RootID:subChildIDS}" ng-mouseover="showsubMenu(3,9);"
                                                        @{
                                                            var url2 = Url.Action("{{sub1menus.MenuFileName}}", "{{sub1menus.MenuURL}}", new { id = "{{id=sub1menus.MenuURL}}" });
                                                            url2 = HttpUtility.UrlDecode(url2);
                                                        }
                                                        a data-ng-href="@url2"{{sub1menus.MenuDisplayTxt}}/a
                                                    /li
                                                /ul
                                            /li
                                        /ul
                                    /li
                                /ul
                            /div

اجرای برنامه

(خروجی منو نوع اول)

(خروجی منو نوع دوم)

یادداشت : این کد میتواند در صفحه MVC View مان نیز استفاده شود یا این کد میتواند در Layout.Cshtml و غیره به اشتراک گذاشته شود.

منو میتواند یک منوی معمول باشد. در حدی که بتواند برای همه ی صفحات به صورت عمومی استفاده شود.

در اینجا میتوانیم ببینیم که همان منوی مشابه بالا را ببینیم که در صفحه ی Layout.cshtml اضافه شده است که با این کار منو به صورت عمومی اضافه شده و میتواند از همه ی صفحات قابل دسترسی باشد.

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

مرورگر های پشتیبان : کروم و فایرفاکس

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

آیا این مطلب را می پسندید؟

https://www.mspsoft.com/?p=14559

داریوش فرخی

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

مطالب بیشتر

نظرات

0 نظر در مورد ساخت منو پویا AngularJS با MVC و WCF

دیدگاهتان را بنویسید لغو پاسخ

هیچ دیدگاهی نوشته نشده است.