پیاده سازی بازی Mind Reader با استفاده از WCF و AngularJS در MVC
شنبه 24 بهمن 1394در این مقاله نحوه ایجاد بازی مسابقه ذهن خوان(Mind Reader Quiz) را با استفاده از AngularJS و سرویس WCF Rest آموزش می دهیم.
بازی Mind Reader Quiz چگونه کار می کند؟
Mind Reader Quiz یک بازی است که کاربر می تواند نام یکی از افراد در لیست را به خاطر بسپارد و توسط سوالاتی که پرسیده می شود برنامه، نام آن شخص را حدس می زند. در این بازی آنلاین تعدادی سوال وجود دارد که فقط پاسخ های بله یا خیر دارندکه کاربر با توجه به سوال پرسیده شده آنها را پاسخ می دهد. بسته به پاسخ کاربر سیستم در نهایت شخصی که در ذهن کاربر است را پیدا کرده و نتیجه را نشان می دهد.
در صورت تمایل میتوانید به صورت رایگان آموزش WCF به همراه پروژه عملی را در سایت تاپ لرن مشاهده کنید .
شما می توانید فرد مورد نظر خود را از لیست نشان داده شده انتخاب کنید. شخص مورد نظر می تواند خواننده بازیگر یا ورزشکار باشد. سپس از شما سوالاتی پرسیده خواهد شد که پاسخ های بله یا خیر را به آنها می دهید. در نهایت سیستم نام شخص مورد نظر را به شما نشان می دهد.
در ادامه مراحل ایجاد این برنامه را به شما نشان می دهیم.
مراحل کار به شرح زیر است:
ایجاد سرویس WCF Rest و بازیابی داده از پایگاه داده.
نصب Angular JS در اپلیکیشن MVC
نحوه ایجاد اپلیکیشن Angular JS برای ایجاد Master Detail Grid
نحوه استفاده از سرویس WCS در Angular JS برای ایجاد بازی آنلاین Mind Reader
در ادامه می توانیم برخی اصول اولیه و رفرنس ها را برای Windows Communication Foundation (WCF) را مشاهده کنیم. WCF در واقع یک فریم ورک برای ساخت اپلیکیشن های سرویس گرا می باشد.
اپلیکیشن های سرویس گرا
با استفاده از یک پروتکل، سرویس می تواند در سطح شبکه به اشتراک گذاشته شده و مورد استفاده قرار گیرد.
برای مثال کار روی یک پروژه را مثال می زنیم که در آن باید یک تابع پایگاه داده مشترک ایجاد کرد و این توابع باید در پروژه های متعدد استفاده شود، این پروژه ها در مکانهای مختلف قرار دارند و از طریق اینترنت با هم در تماس هستند. در این صورت ما می توانیم یک سرویس WCF ایجاد کرده و می توانیم تمام توابع پایگاه داده مشترک را در کلاس WCF service خود بنویسیم. همچنین می توانیم WCF خود را در IIS مستقر کرده و URL را در اپلیکیشن خود در توابع پایگاه داده انجام دهیم. در بخش کد نشان می دهیم که چگونه می توان یک سرویس WCF REST ایجادکرد و از آن در اپلیکیشن Angular JS استفاده کرد.
Angular JS
در اینجا باید با مفاهیم Model، View، View Model (MVVM) آشنا باشیم. Angular JS یک فریم ورک جاوا اسکریپتی است که صرفا بر اساس HTML، CSS و جاوا اسکریپت می باشد.
الگوی Model View Whatever (MVW) در Angular JS بسیار شبیه به الگو های MVC و MVVM می باشد. در این نمونه برنامه ما از Model، View و Service استفاده کرده ایم. در قسمت کد نشان می دهیم که چگونه Angular JS را در برنامه نصب و ایجاد کنیم.
قسمت کد:
ایجاد پایگاه داده و جدول
ما فایل اسکریپت پایگاه داده را در این مقاله ضمیمه کرده ایم آن را در SQL SERVER اجرا کرده و جداول استفاده شده ایجاد می شوند.
-- =============================================
-- Author : Shanu
-- Create date : 2015-03-16
-- Description : To Create Database,Table and Sample Insert Query
-- Latest
-- Modifier : Shanu
-- Modify date : 2015-03-16
-- =============================================
--Script to create DB,Table and sample Insert data
USE MASTER
GO
-- 1) 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] = 'MindReader' )
DROP DATABASE MindReader
GO
CREATE DATABASE MindReader
GO
USE MindReader
GO
-- 1) //////////// Professional_Type table
-- Create Table Professional_Type ,This table will be used to store the details like Professional type as Sports,Bollywood Movie Star,kollywood Movie Star
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'Professional_Type' )
DROP TABLE Professional_Type
GO
CREATE TABLE Professional_Type
(
Profes_ID VARCHAR(10) NOT NULL,
Profes_Type VARCHAR(50)
CONSTRAINT [PK_Professional_Type] PRIMARY KEY CLUSTERED
(
[Profes_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 Character_Type Table
Insert into Professional_Type(Profes_ID,Profes_Type) values('1','Sports')
Insert into Professional_Type(Profes_ID,Profes_Type) values('2','Bollywood Movie Star')
Insert into Professional_Type(Profes_ID,Profes_Type) values('3','kollywood Movie Star')
-- 1) END //
-- 2) //////////// Character_type table
-- Create Table Character_Type ,This table will be used to store the details like Character type as Cricket,Bollywood Actor,kollywood Actor
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'Character_Type' )
DROP TABLE Character_Type
GO
CREATE TABLE Character_Type
(
Char_ID VARCHAR(10) NOT NULL,
Profes_ID VARCHAR(10) NOT NULL CONSTRAINT fk_Professional_Type FOREIGN KEY REFERENCES Professional_Type,
Char_Type VARCHAR(50)
CONSTRAINT [PK_Character_Type] PRIMARY KEY CLUSTERED
(
[Char_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 Character_Type Table
Insert into Character_Type(Char_ID,Profes_ID,Char_Type) values('1','1','Cricket')
Insert into Character_Type(Char_ID,Profes_ID,Char_Type) values('2','2','Bollywood Actor')
--Insert into Character_Type(Char_ID,Profes_ID,Char_Type) values('3','2','Bollywood Actress')
Insert into Character_Type(Char_ID,Profes_ID,Char_Type) values('4','3','kollywood Actor')
--Insert into Character_Type(Char_ID,Profes_ID,Char_Type) values('5','3','kollywood Actress')
-- 2) END //
-- 3) //////////// Character_Name
-- Create Table Character_Name ,This table will be used to store the details of Character Names
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'Character_Name' )
DROP TABLE Character_Name
GO
CREATE TABLE Character_Name
(
Char_Name_ID VARCHAR(10) NOT NULL,
Char_ID VARCHAR(10) NOT NULL CONSTRAINT fk_Character_Type FOREIGN KEY REFERENCES Character_Type,
Char_Name VARCHAR(50),
Char_Status VARCHAR(20)
CONSTRAINT [PK_Char_Name] PRIMARY KEY CLUSTERED
(
[Char_Name_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 Character_Type Table
--Sports
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('1','1','Sachin Tendulkar','Past')
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('2','1','Sunil Gavaskar' ,'Past')
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('3','1','Mohammed Azharuddin','Past')
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('4','1','Mahender Singh Dhoni','Present')
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('5','1','Shikhar Dhawan','Present')
--Bollywood Actor
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('6','2','Amitabh Bachchan','Present')
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('7','2','Shah Rukh Khan' ,'Present')
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('8','2','Aamir Khan','Present')
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('9','2','Salman Khan','Present')
--kollywood Actor
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('10','4','Rajini Kanth','Present')
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('11','4','Ajith Kumar' ,'Present')
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('12','4','Kamala Hasan','Present')
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('13','4','Vijay','Present')
-- 3) END //
--//test Select
--select * from Professional_Type
--select * from Character_Type
--select * from Character_Name
--////end test select
-- 4) //////////// Questions
-- Create Table Questions ,This table will be used to store the details of Character Names
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'Questions' )
DROP TABLE Questions
GO
CREATE TABLE Questions
(
Question_ID VARCHAR(10) NOT NULL,
Char_Name_ID VARCHAR(10) NOT NULL CONSTRAINT fk_Character_Name FOREIGN KEY REFERENCES Character_Name,
Question VARCHAR(300),
Answer VARCHAR(100)
CONSTRAINT [PK_Questions] PRIMARY KEY CLUSTERED
(
[Question_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 Character_Type Table
--Sports
--// Sachin
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('1','1','Is he Present Player?','No')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('2','1','Is he born in Mumbai, Maharastra?' ,'Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('3','1','Is he also called as nick name Little Master?','Yes')
--// Sunil Gavaskar
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('4','2','Is he Present Player?','No')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('5','2','Is he born in Mumbai, Maharastra?' ,'Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('6','2','Is he also called as nickname Sunny?','Yes')
--// Mohammed Azharuddin
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('7','3','Is he Present Player?','No')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('8','3','Is he born in Hyderabad, Andhra Pradesh?' ,'Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('9','3','Is he also called as nickname Ajju?','Yes')
--// Mahender Singh Dhoni
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('10','4','Is he Present Player?','Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('11','4','Is he born in Ranchi, Jharkhand?' ,'Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('12','4','Is he also called as nickname Mahi?','Yes')
--// Shikhar Dhawan
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('13','5','Is he Present Player?','Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('14','5','Is he born in Delhi?' ,'Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('15','5','Is he also called as nickname Gabbar?','Yes')
--Bollywood Actor
--// Amitabh Bachchan
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('16','6','Is Your Actor Born in Allahabad, Uttar Pradesh?','Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('17','6','Is Your Actor Father Was a Hindi Poet?' ,'Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('18','6','Is your Actor married to a Actress named Jaya Bhaduri?','Yes')
--// Shah Rukh Khan
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('19','7','Is your Actor born in New Delhi?','Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('20','7','Is one of his Famous film runs in a Theatre for nearly 20 Years?' ,'Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('21','7','Is your Actor is called as King Khan?','Yes')
--// Aamir Khan
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('22','8','Is your Actor born in Mumbai?','Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('23','8','Is his father was a producer?' ,'Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('24','8','Is he acted in a movie which has Cricket Matches and that movie got so many awards?','Yes')
--// Salman Khan
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('25','9','Is your Actor born in Indore?','Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('26','9','Is his father was a screenwriter?' ,'Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('27','9',') Is your Actor brothers name is Arbaaz khan?','Yes')
--kollywood Actor
--// Rajini Kanth
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('28','10','Is your Actor born in Karnataka?','Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('29','10','Is your Actor is called as Super Star?' ,'Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('30','10','Is your Actor is called as Thalapathy?','Yes')
--// Ajith Kumar
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('31','11','Is Your Actor Born in Hyderabad?','Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('32','11','Is Your Actor Motor Bike racer?' ,'Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('33','11','Is your Actor nick name is Thala?','Yes')
--// Kamala Hasan
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('34','12','Is your Actor born in Paramakudi?','Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('35','12','Is your Actor received padma shri award during 1990?' ,'Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('36','12','Is your Actor acted in a file with 10 Characters Roles?','Yes')
--// Vijay
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('37','13','Is your Actor born in Chennai?','Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('38','13','Is his father producer/Director?' ,'Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('39','13','Is your Actor Called as Ilaya Thalapathy?','Yes')
-- 4) END //
--//test Select
select * from Professional_Type
select * from Character_Type
select * from Character_Name
select * from Questions order by Question_ID,Char_Name_ID
--////end test select
--// this is sample join query which i will be used in WCF function for Linq query
select A.Question_ID,
A.Char_Name_ID,
B.Char_ID,
A.Question,
A.Answer,
B.Char_Name,
B.Char_Status
FROM
Questions A
Inner JOIN Character_Name B
ON A.Char_Name_ID=B.Char_Name_ID
WHERE
B.Char_ID='1'
order by cast(A.Question_ID as INT)
ایجاد سرویس WCF REST
در اینجا Visual Studio خود را باز کرده و "File" -> "New" -> "Project را انتخاب و WCF Service Application را بزنید و نام آن را WCF service قرار داده و سپس بر روی OK کلیک کنید.
زمانی که ما WCF Service را ایجاد می کنیم می توانیم IService.CS و Service1.svc را در Solution Explorer را به صورت زیر ببینیم.
در IService.CS می توانیم 3 قرارداد به صورت پیش فرض به صورت زیر مشاهده کنیم:
[ServiceContract] متدها یا هرنوع عملگر در دسترس برای سرویس را توصیف می کند. این قرارداد سرویس یک اینترفیس است و متدها می توانند داخل این سرویس با استفاده از صفت Operation Contract اعلان شوند.
[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; }
}
}
Data Contract
در این مثال نیاز داریم که هردو نوع کاراکتر و نام کاراکتر را از پایگاه داده بگیریم، بنابراین ما در اینجا سه قرارداد داده ای ایجاد کرده ایم:
“CharacterTypeDataContract”,
“CharacterNameDataContract”
“questionAnswersDataContract”
در اینجا ما کل نام ستون های جدول را به عنوان عضو داده ای تعریف کرده ایم:
public class whosInYourMinDataContract
{
[DataContract]
public class CharacterTypeDataContract
{
[DataMember]
public string Char_ID { get; set; }
[DataMember]
public string Character_Type { get; set; }
}
[DataContract]
public class CharacterNameDataContract
{
[DataMember]
public string Char_Name_ID { get; set; }
[DataMember]
public string Char_ID { get; set; }
[DataMember]
public string Char_Name { get; set; }
[DataMember]
public string Char_Status { get; set; }
}
[DataContract]
public class questionAnswersDataContract
{
[DataMember]
public string Question_ID { get; set; }
[DataMember]
public string Char_Name_ID { get; set; }
[DataMember]
public string Char_ID { get; set; }
[DataMember]
public string Question { get; set; }
[DataMember]
public string Answer { get; set; }
[DataMember]
public string Char_Name { get; set; }
[DataMember]
public string Char_Status { get; set; }
}
}
Service Contract
در قرارداد عملگر می توانیم WebInvoke و WebGet را مشاهده کنیم که داده را از پایگاه داده در سرویس REST بازیابی می کند.
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
در اینجا می توانیم هردو فرمت درخواست و پاسخ را ببینیم. در اینجا ما از فرمت Json استفاده کرده ایم.
JavaScript Object Notation (JSON) یک فرمت تبادل اطلاعات سبک وزن است.
UriTemplate نام متد ما است و در اینجا این متد نوعی از لیست را برمی گرداند.
در اینجا ما سه متد GetCharacterType، getCharacterNames و questionAnswers را تعریف کرده ایم. متد GetOrderMaster شغل شخص را می گیرد متد getCharacterNames نام شخص را از پایگاه داده می گیرد و متد questionAnswers تمام سوالات را از پایگاه داده واکشی می کند.
[ServiceContract]
public interface IService1
{
[OperationContract]
[WebInvoke(Method = "GET",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/GetCharacterType/")]
List<whosInYourMinDataContract.CharacterTypeDataContract> GetCharacterType();
[OperationContract]
[WebGet(RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/getCharacterNames/")]
List<whosInYourMinDataContract.CharacterNameDataContract> getCharacterNames();
[OperationContract]
[WebInvoke(Method = "GET",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/questionAnswers/{Char_ID}")]
List<whosInYourMinDataContract.questionAnswersDataContract> questionAnswers(string Char_ID);
}
کد کامل 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 Shanu_QuizWcfService
{
// 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 = "/GetCharacterType/")]
List<whosInYourMinDataContract.CharacterTypeDataContract> GetCharacterType();
[OperationContract]
[WebGet(RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/getCharacterNames/")]
List<whosInYourMinDataContract.CharacterNameDataContract> getCharacterNames();
[OperationContract]
[WebInvoke(Method = "GET",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/questionAnswers/{Char_ID}")]
List<whosInYourMinDataContract.questionAnswersDataContract> questionAnswers(string Char_ID);
}
// Use a data contract as illustrated in the sample below to add composite types to service operations.
public class whosInYourMinDataContract
{
[DataContract]
public class CharacterTypeDataContract
{
[DataMember]
public string Char_ID { get; set; }
[DataMember]
public string Character_Type { get; set; }
}
[DataContract]
public class CharacterNameDataContract
{
[DataMember]
public string Char_Name_ID { get; set; }
[DataMember]
public string Char_ID { get; set; }
[DataMember]
public string Char_Name { get; set; }
[DataMember]
public string Char_Status { get; set; }
}
[DataContract]
public class questionAnswersDataContract
{
[DataMember]
public string Question_ID { get; set; }
[DataMember]
public string Char_Name_ID { get; set; }
[DataMember]
public string Char_ID { get; set; }
[DataMember]
public string Question { get; set; }
[DataMember]
public string Answer { get; set; }
[DataMember]
public string Char_Name { get; set; }
[DataMember]
public string Char_Status { get; set; }
}
}
}
اضافه کردن پایگاه داده با استفاده از ADO.NET Entity Data Model
بر روی WCF project راست کلیک کرده و Add New Item را انتخاب کنید سپس ADO.NET Entity Data Model را انتخاب و بر روی ADD کلیک کنید.
Designer from database را انتخاب و بر روی Next کلیک کنید.
بر روی New Connection کلیک کنید:
در اینجا می توانیم نام Database Server، SQL Server Authentication، User ID و پسورد را وارد کنید. ما از قبل پایگاه داده خود را به عنوان OrderManagement ایجاد کرده ایم پس بنابراین در اینجا می توانیم پایگاه داده را انتخاب و بر روی OK کلیک کنید.
حالا بر روی Next کلیک کرده و جداولی که نیاز داریم را انتخاب و بر روی Finish کلیک می کنیم. در اینجا می توانیم ببینیم که Model بانک اطلاعاتی ما ایجاد شده است.
Service1.SVC
Service.SVC.CS اینترفیس IService را پیاده سازی و بازنویسی می کند و تمام متدهای Operation Contract را تعریف می کند. برای مثال در اینجا می توانیم ببینیم که IService1 را در کلاس Service1 پیاده سازی کرده ایم. ما یک شیئ برای مدل Entity خود ایجاد کرده ایم و در questionAnswers از LINQ Query استفاده کرده ایم:
public class Service1 : IService1
{
shanuQuizEntities OME;
public Service1()
{
OME = new shanuQuizEntities();
}
public List<whosInYourMinDataContract.questionAnswersDataContract> questionAnswers(string Char_ID)
{
var query = (from A in OME.Questions
join B in OME.Character_Name on A.Char_Name_ID equals B.Char_Name_ID
where B.Char_ID.Equals(Char_ID)
select new
{
A.Question_ID,
A.Char_Name_ID,
B.Char_ID,
A.Question,
A.Answer,
B.Char_Name,
B.Char_Status
}).ToList().OrderBy(q => Int32.Parse(q.Question_ID));
List<whosInYourMinDataContract.questionAnswersDataContract> questionAnswersList = new List<whosInYourMinDataContract.questionAnswersDataContract>();
query.ToList().ForEach(rec =>
{
questionAnswersList.Add(new whosInYourMinDataContract.questionAnswersDataContract
{
Question_ID =rec.Question_ID,
Char_Name_ID = rec.Char_Name_ID,
Char_ID = rec.Char_ID,
Question = rec.Question,
Answer = rec.Answer,
Char_Name = rec.Char_Name,
Char_Status = rec.Char_Status
});
});
return questionAnswersList;
}
}
کد کامل شده 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 Shanu_QuizWcfService.Model;
namespace Shanu_QuizWcfService
{
// NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "Service1" in code, svc and config file together.
// NOTE: In order to launch WCF Test Client for testing this service, please select Service1.svc or Service1.svc.cs at the Solution Explorer and start debugging.
public class Service1 : IService1
{
shanuQuizEntities OME;
public Service1()
{
OME = new shanuQuizEntities();
}
public List<whosInYourMinDataContract.CharacterTypeDataContract> GetCharacterType()
{
var query = (from a in OME.Character_Type
select a).Distinct();
List<whosInYourMinDataContract.CharacterTypeDataContract> CharacterTypeList = new List<whosInYourMinDataContract.CharacterTypeDataContract>();
query.ToList().ForEach(rec =>
{
CharacterTypeList.Add(new whosInYourMinDataContract.CharacterTypeDataContract
{
Char_ID = rec.Char_ID,
Character_Type = rec.Char_Type
});
});
return CharacterTypeList;
}
public List<whosInYourMinDataContract.CharacterNameDataContract> getCharacterNames()
{
List<whosInYourMinDataContract.CharacterNameDataContract> CharacterNameList = new List<whosInYourMinDataContract.CharacterNameDataContract>();
try
{
var query = (from a in OME.Character_Name
select a).ToList().OrderBy(q => Int32.Parse(q.Char_Name_ID));
query.ToList().ForEach(rec =>
{
CharacterNameList.Add(new whosInYourMinDataContract.CharacterNameDataContract
{
Char_Name_ID = rec.Char_Name_ID,
Char_ID = rec.Char_ID,
Char_Name = rec.Char_Name,
Char_Status = rec.Char_Status
});
});
return CharacterNameList;
}
catch (Exception ex)
{
throw new FaultException<string>
(ex.Message);
}
}
public List<whosInYourMinDataContract.questionAnswersDataContract> questionAnswers(string Char_ID)
{
var query = (from A in OME.Questions
join B in OME.Character_Name on A.Char_Name_ID equals B.Char_Name_ID
where B.Char_ID.Equals(Char_ID)
select new
{
A.Question_ID,
A.Char_Name_ID,
B.Char_ID,
A.Question,
A.Answer,
B.Char_Name,
B.Char_Status
}).ToList().OrderBy(q => Int32.Parse(q.Question_ID));
List<whosInYourMinDataContract.questionAnswersDataContract> questionAnswersList = new List<whosInYourMinDataContract.questionAnswersDataContract>();
query.ToList().ForEach(rec =>
{
questionAnswersList.Add(new whosInYourMinDataContract.questionAnswersDataContract
{
Question_ID =rec.Question_ID,
Char_Name_ID = rec.Char_Name_ID,
Char_ID = rec.Char_ID,
Question = rec.Question,
Answer = rec.Answer,
Char_Name = rec.Char_Name,
Char_Status = rec.Char_Status
});
});
return questionAnswersList;
}
}
}
در فایل Web.Config پروژه تغییرات زیر را اعمل کنید.
تغییرات:
<add binding="basicHttpsBinding" scheme="https" /> to <add binding="webHttpBinding" scheme="http" />
قسمتی که باید جایگزین کنیم به صورت زیر است:
</behaviors>
<endpointBehaviors>
<behavior>
<webHttp helpEnabled="True"/>
</behavior>
</endpointBehaviors>
</behaviors>
سرویس WCF را اجرا کنید.
در اینجا ما سرویس WCF Rest خود را ایجاد می کنیم. سپس آن را اجرا می کنیم.در service URL می توانیم نام متد خود را اضافه کرده و می توانیم نتیجه به صورت JSON را از پایگاه داده ببینیم.
ایجاد اپلیکیشن MVC
تا اینجا ما WCF را تکمیل کرده و حالا وقت آن است که اپلکیشن MVC Angular JS را ایجاد کنیم. ما می توانیم یک پروژه جدید به پروژه موجود خود اضافه کنیم و یک اپلیکیشن MVC web جدید ایجاد کنیم.
بر روی solution راست کلیک کرده و نام پروژه خود را وارد کنید و سپس OK رابزنید.
قالب MVC را انتخاب کنید.
حالا وقت آن است که یک سرویس WCF اضافه کرده و Angular JS را نصب کنید.
اضافه کردن سرویس WCF
بر روی Solution راست کلیک کرده و بر روی Add کلیک کرده و Service Reference را انتخاب کنید.
WCF URL خود را وارد کرده و بر روی GO کلیک کنید. در اینجا WCF URL ما به صورت http://localhost:4194/Service1.svc می باشد.
نام مورد نظر را اضافه و بر روی OK کلیک کنید.
حالا در اینجا ما با موفقیت سرویس WCF خود را به اپلیکیشن MVC اضافه کرده ایم.
روش نصب Angular JS
بر روی پروژه راست کلیک کرده و بر روی Manage NuGet Packages کلیک کنید.
Online را انتخاب کرده و Angular JS را جستجو کرده و آن را نصب کنید.
حالا ما Angular Js خود را ایجاد می کنیم.
Modules.js
Controllers.js
Services.js
روش ایجاد فایل های اسکریپت Angular Js
بر روی پوشه Script راست کلیک کرده و فولدر خود را برای ایجاد Angular Js Model/Controller بسازید. در این فولدر اسکریپت سه فایل JavaScript ایجاد می کنیم و نام آنها را Modules.js، Controllers.js و Services,js به صورت زیر قرار می دهیم.
Modules.js
در اینجا ما رفرنس را به Angular.js JavaScript اضافه کرده و نام Angular Module را RESTClientModule قرار می دهیم.
/// <reference path="../angular.js" />
/// <reference path="../angular.min.js" />
var app;
(function () {
app = angular.module("RESTClientModule", []);
})();
Services.js
در اینجا ما رفرنس را به Angular.js JavaScript و Module.js خود اضافه می کنیم.
در اینجا نامی برای سرویس خود انتخاب می کنیم ما در اینجا نام AngularJs_WCFService را انتخاب کرده ایم. شما می توانید نام مورد نظر خود را انتخاب کنید اما در مورد تغییر نام در Controllers.js دقت کنید. در اینجا می توانیم در این متد ببینیم که URL را برای WCF Service URL خود ارسال کرده ایم.
/// <reference path="../angular.js" />
/// <reference path="../angular.min.js" />
/// <reference path="Modules.js" />
app.service("AngularJs_WCFService", function ($http) {
//Get Order Master Records
this.GetCharacterType = function () {
return $http.get("http://localhost:4194/Service1.svc/GetCharacterType");
};
//Search Order Master Records
this.getCharacterNames = function () {
return $http.get("http://localhost:4194/Service1.svc/getCharacterNames/");
}
this.getquestionAnswers = function (Char_ID) {
return $http.get("http://localhost:4194/Service1.svc/questionAnswers/" + Char_ID);
}
});
Controllers.js
در اینجا رفرنس را به Angular.js JavaScript و Module.js و Services.js اضافه کرده ایم. همانند کاری که برای سرویس ها انجام می دهیم. برای کنترلر نام AngularJs_WCFController را قرار داده ایم. در کنترلر تمام business logic را انجام داده و داده را از WCF JSON به صفحه MVC HTML خود برگردانده ایم.
تعریف متغیرها
ابتدا ما تمام متغیرهای محلی که استفاده می شود را تعریف می کنیم و داده را با استفاده از $scope.date ذخیره می کنیم.
نکته : scope.finalresultCount = 3
این یک متغییر بسیار مهم است. در اینجا ما به طور پیش فرض مقدار 3 را قرار داده ایم. در این نمونه برنامه برای هر فرد سه سوال را قرار داده ایم. اگر بخواهیم تعداد سوالات را افزایش دهیم باید به طور مشابه یک Count تعریف کنیم.
متدها
Hidetables
این متد برای مخفی کردن و نشان دادن نمایش جدول TR برای بخش حرفه ی شخص می باشد و برای پاسخ به سوال و نمایش نتیجه نهایی در همان صفحه استفاده می شود.
getCharacterNames
در این متد نام تمام افراد را از JSON گرفته ونتایج را به صفحه اصلی متصل می کنیم. در اینجا کاربر نام یک شخص را در ذهن خود انتخاب کرده و گزینه شروع را می زند.
GetCharacterType
در این متد نوع شغل شخص از JSON گرفته شده و نتیجه نهایی در صفحه خودش به صورت Radio Button نشان داده می شود.
در اینجا کاربر می تواند پاسخ سوال را به صورت بله یا خیر بدهدو دکمه submit را بزند تا سوال بعدی نمایش داده شود.
findYourAnswer
این متد سوالات را به صورت یک به یک گرفته و سوالات را به پاسخ کاربران متصل می کند:
scope.findAnswers = function
این متد زمانی فراخوانی می شود که کاربر بر روی دکمه Submit کلیک کند. در این متد ما تمام business logic برای نمایش سوالات بعدی را انجام می دهیم نتیجه را بررسی و نام شخص به عنوان نتیجه نهایی نمایش داده می شود.
کد کامل Controller.js
/// <reference path="../angular.js" />
/// <reference path="../angular.min.js" />
/// <reference path="Modules.js" />
/// <reference path="Services.js" />
app.controller("AngularJs_WCFController", function ($scope, $rootScope, $window, AngularJs_WCFService) {
$scope.date = new Date();
// 1) To Store the user selected Character Profession
$scope.CharacterID = 4;
$scope.CharacterType = 'kollywood Actor';
// 2) To show and Hide the Table to display Character Type Selection and Question
var firstbool = true;
var secondbool = false;
var thirdbool = false;
// * 3) Question and Answer final Judgement Local Variables
$scope.Question_ID;
$scope.Char_Name_ID;
$scope.Char_ID;
$scope.Question;
$scope.Answer;
$scope.Char_Name;
$scope.Char_Status;
$scope.User_Selected_Result = 'Yes';
$scope.loopCount = 0;
$scope.resultCount = 0;
$scope.finalresultCount = 3;
$scope.NextStar = 0;
$scope.totalQuestionCount = 0;
$scope.QuestionIncrement = 0;
$scope.YourDreamStarName = "";
// end 3)
Hidetables()
function Hidetables() {
if ($scope.firstbool == false) {
$scope.firstbool = true;
$scope.secondbool = false;
$scope.thirdbool = true
}
else
{
$scope.firstbool = false;
$scope.secondbool = true;
$scope.thirdbool = true;
}
}
hideresult()
function hideresult() {
if ($scope.thirdbool == false) {
$scope.thirdbool = true;
}
}
GetCharacterType();
getCharacterNames();
//To Get All Records
function GetCharacterType() {
var promiseGet = AngularJs_WCFService.GetCharacterType();
promiseGet.then(function (pl) {
$scope.getCharacterTypeDisp = pl.data
},
function (errorPl) {
});
}
//To Get Student Detail on the Base of Student ID
function getCharacterNames() {
var promiseGet = AngularJs_WCFService.getCharacterNames();
promiseGet.then(function (pl) {
$scope.getCharacterNamesDisp = pl.data;
// alert(res.Char_Name);
},
function (errorPl) {
});
}
$scope.radioCheckValue = function (CharID, CharType) {
$scope.CharacterID = CharID;
$scope.CharacterType = CharType;
};
$scope.get = function () {
$scope.firstbool = true;
$scope.secondbool = false;
$scope.NextStar = 0;
$scope.loopCount = 0;
findYourAnswer();
}
function findYourAnswer()
{
var promiseGet = AngularJs_WCFService.getquestionAnswers($scope.CharacterID);
promiseGet.then(function (pl) {
$scope.questionAnswersDisp = pl.data
$scope.totalQuestionCount = $scope.questionAnswersDisp.length;
for (x in $scope.questionAnswersDisp) {
if (x == $scope.loopCount) {
$scope.Question_ID = $scope.questionAnswersDisp[x].Question_ID;
$scope.Char_Name_ID = $scope.questionAnswersDisp[x].Char_Name_ID;
$scope.Char_ID = $scope.questionAnswersDisp[x].Char_ID;
$scope.Question = $scope.questionAnswersDisp[x].Question;
$scope.Answer = $scope.questionAnswersDisp[x].Answer;
$scope.Char_Name = $scope.questionAnswersDisp[x].Char_Name;
$scope.Char_Status = $scope.questionAnswersDisp[x].Char_Status;
$scope.QuestionIncrement = $scope.QuestionIncrement + 1;
}
}
},
function (errorPl) {
});
}
$scope.rdoAnschk = function (chkResult) {
$scope.User_Selected_Result = chkResult;
};
$scope.findAnswers = function () {
if ($scope.User_Selected_Result == 'Yes')
{
$scope.resultCount = $scope.resultCount + 1;
}
else
{
if ($scope.Answer == 'No') {
$scope.resultCount = $scope.resultCount + 1;
if ($scope.NextStar > 0) {
$scope.NextStar = $scope.NextStar - 1;
}
}
else {
if ($scope.resultCount > 0) {
$scope.resultCount = $scope.resultCount - 1;
}
$scope.NextStar = $scope.NextStar + 1;
}
}
if ($scope.NextStar == $scope.finalresultCount)
{
alert('Hope my guess was Wrong! lets start for other Star ')
$scope.NextStar = 0;
}
if ($scope.resultCount == $scope.finalresultCount) {
$scope.secondbool = true;
$scope.thirdbool = false;
$scope.YourDreamStarName = $scope.Char_Name;
alert('Your Dream Star in your mind is ' + $scope.YourDreamStarName)
return;
}
$scope.loopCount = $scope.loopCount + 1;
findYourAnswer();
if($scope.QuestionIncrement>= $scope.totalQuestionCount)
{
$scope.secondbool = true;
$scope.thirdbool = false;
$scope.YourDreamStarName = "Sorry My Dear Friend.All the Questions are Completed. I cont find your answer. Shall we try again"
alert($scope.YourDreamStarName);
return;
}
}
});
بنابراین حالا ما Angular Js Module /Controlle و Service خود را ایجاد کرده ایم.
Controller و View مورد نظر را برای نمایش نتیجه ایجاد می کنیم.
اضافه کردن Controller
بر روی پوشه Controller راست کلیک کرده و Add Controller را انتخاب می کنیم و بر روی MVC 5 Controller – Empty کلیک و Add را انتخاب می کنیم.
نام کنترلر را WhosinYourMindController قرار دهید. سپس بر روی OK کلیک کنید.
اضافه کردن View
بر روی Controller Index راست کلیک کرده و Add View را انتخاب کنید.
View مربوط به Index
نام View را Index قرار دهید . در این View صفحه خود را طراحی کرده و angular.Js، Modules.js، Services.js و Controllers.js را رفرنس دهید.
در Angular JS ما از {{ }} برای bind کردن یا نمایش داده استفاده می کنیم.
در اینجا ما می توانیم ببینیم که ما در ابتدا یک جدول و برخی موارد برای جدول ها را ایجاد کرده ایم. در ابتدا در جدول ما از data-ng-controller="AngularJs_WCFController" استفاده کرده ایم و در اینجا می توانیم ببینیم data-ng-controller برای bind کردن داده از controller به جدول HTML استفاده شده است.
با استفاده از <tbody data-ng-repeat=" detail in getCharacterNamesDisp"> می توانیم تمام رکوردها را بگیریم و و با استفاده از <td><span>{{ detail.Char_Name}}</span></td> تمام داده ها را داخل جدول ثبت کنیم.
<html data-ng-app="RESTClientModule">
@{
ViewBag.Title = "Who is in Your Mind Reader";
}
<body>
<img src="~/Images/blank.gif" alt="" width="1" height="10" />
<table width="99%" style=" border-bottom:3px solid #3273d5;">
<tr>
<td width=" 250">
<table width="99%">
<tr>
<td>
Welcome Mr. {{'SHANU'}} .
</td>
</tr>
</table>
</td>
<td class="style1" align="center">
<h3>Who is in Your Mind Reader Quiz :)</h3>
</td>
<td align="right">
<div ng-controller="AngularJs_WCFController">
Today Date is :
{{date | date:'yyyy-MM-dd'}}
</div>
</td>
</tr>
</table>
<img src="~/Images/blank.gif" alt="" width="1" height="10" />
<table id="tblContainer" data-ng-controller="AngularJs_WCFController" style='width: 99%;table-layout:fixed;'>
<tr>
<td>
<table style=" background-color:#ECF3F4; border: solid 2px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;">
<tr>
<th style=" background-color:#98AFC7; border-bottom: solid 4px #FFFFFF; padding: 5px;width: 99%;table-layout:fixed;">
<h3>Think Any one of your Dream Star in your mind from the list Below.</h3>
</th>
</tr>
<tbody data-ng-repeat="detail in getCharacterNamesDisp">
<tr>
<td style=" border: dashed 2px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;">
<b> <span style="color:#9F000F">{{detail.Char_Name}}</span></b>
</td>
</tr>
</table>
</td>
</tr>
</tr>
</table>
<img src="~/Images/blank.gif" alt="" width="1" height="10" />
<table id="tblContainers" style='width: 20%;table-layout:fixed;' align="center">
<tr>
<td align="center">
<table style=" background-color:#F0F8FF;color:#566D7E; border: dashed 2px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;">
<tr>
<td align="center" style="color:#9F000F;">
<h3>@Html.ActionLink("Get Ready to Play!", "CharacterTypeView", "WhosinYourMind")</h3>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/shanuAngularScript/Modules.js"></script>
<script src="~/Scripts/shanuAngularScript/Services.js"></script>
<script src="~/Scripts/shanuAngularScript/Controllers.js"></script>
View مربوط به CharacterTypeView
یک View دیگر با نام CharacterTypeView اضافه کنید. این View اصلی ما می باشد.در اینجا ما نوع شغل رادر اینجال نشان می دهیم و کاربر می تواند هر نوع شغلی را که میخواهد از صفحه index انتخاب کند. کاربر می تواند بازی را شروع کند.
<html data-ng-app="RESTClientModule">
@{
ViewBag.Title = "Select Your Character Profession";
}
<body>
<img src="~/Images/blank.gif" alt="" width="1" height="10" />
<table width="99%" style=" border-bottom:3px solid #3273d5;">
<tr>
<td width=" 250">
<table width="99%">
<tr>
<td>
Welcome Mr. {{'SHANU'}} .
</td>
</tr>
</table>
</td>
<td class="style1" align="center">
<h3>Who is in Your Mind Reader Quiz :)</h3>
</td>
<td align="right">
<div ng-controller="AngularJs_WCFController">
Today Date is :
{{date | date:'yyyy-MM-dd'}}
</div>
</td>
</tr>
</table>
<img src="~/Images/blank.gif" alt="" width="1" height="10" />
<table width="100%" data-ng-controller="AngularJs_WCFController">
<tr ng-hide="firstbool" ng-init="Hidetables()">
<td>
<table id="tblContainer" style='width: 99%;table-layout:fixed;'>
<tr>
<td>
<table style=" background-color:#ECF3F4; border: solid 2px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;">
<tr>
<th style=" background-color:#98AFC7; border-bottom: solid 4px #FFFFFF; padding: 5px;width: 99%;table-layout:fixed;">
<h3>Select Your Character Profession which you have think in your mind.</h3>
</th>
</tr>
<tbody data-ng-repeat="detail in getCharacterTypeDisp">
<tr>
<td style=" border: dashed 2px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;">
<b>
<input type="radio" name="rdoCharType" ng-model="detail.Character_Type" value="detail.Character_Type" ng-value="detail.Character_Type" ng-click="radioCheckValue(detail.Char_ID,detail.Character_Type)" />
<span style="color:#9F000F">{{detail.Character_Type}}</span>
</b>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="~/Images/blank.gif" alt="" width="1" height="10" />
<table id="tblContainers" style='width: 60%;table-layout:fixed;' align="center">
<tr>
<td align="center">
<table style=" background-color:#F0F8FF;color:#566D7E; border: dashed 2px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;">
<tr>
<td align="center" style="color:#566d7e;">
You have selected <div><h3 style="color:#9F000F">{{CharacterType}} </h3></div> as you have think in mind.
Now its time to read your mind lets start now.<br />
<h4> Time to Begin :)"</h4>
<input type="button" id="Detail" value="lets Start" data-ng-click="get()" style="background-color:#2B547E;color:#FFFFFF;width:100px;height:30px">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr ng-hide="secondbool" ng-init="Hidetables()">
<td>
<table>
<tr>
<td>
<table id="tblContainer" style='width: 100%;table-layout:fixed;'>
<tr>
<td align="right">
<table id="tblContainers" style='width: 20%;table-layout:fixed;' align="right">
<tr>
<td align="center">
<table style=" background-color:#F0F8FF;color:#566D7E; border: dashed 2px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;">
<tr>
<td align="center" style="color:#566d7e;">
<div>You have selected <h4 style="color:#9F000F">{{CharacterType}} </h4></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style=" background-color:#ECF3F4; border: solid 2px #6D7B8D; padding: 5px;width: 100%;table-layout:fixed;">
<tr>
<th style=" background-color:#98AFC7; border-bottom: solid 4px #FFFFFF; padding: 5px;width: 99%;table-layout:fixed;">
<h3>Answer Yes or No to the below Questions ,this will help me to read your mind Star !.</h3>
</th>
</tr>
<tr>
<td style=" border: dashed 2px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;">
<b>
{{Question}}
</b>
<br />
<input type="radio" name="rdoAns" value="Yes" ng-click="rdoAnschk('Yes')" checked='checked' />YES
<input type="radio" name="rdoAns" value="No" ng-click="rdoAnschk('No')" />No
</td>
</tr>
</table>
</td>
</tr>
</table>
<tr>
<td>
<img src="~/Images/blank.gif" alt="" width="1" height="10" />
</td>
</tr>
<tr>
<td align="center">
<table style=" background-color:#F0F8FF;color:#566D7E; border: dashed 2px #6D7B8D; padding: 5px;width: 14%;table-layout:fixed;">
<tr>
<td align="center" style="color:#566d7e;">
<input type="button" id="Detail" value="Submit" data-ng-click="findAnswers()" style="background-color:#2B547E;color:#FFFFFF;width:100px;height:30px">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr ng-hide="thirdbool" ng-init="hideresult()">
<td>
<table>
<tr>
<td align="center">
<table style=" background-color:#F0F8FF;color:#566D7E; border: dashed 2px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;">
<tr>
<td align="center" style="color:#566d7e;">
<div> I hope so this is your Star <h3 style="color:#9F000F">{{YourDreamStarName}} </h3> whom you think in your Mind. </div>
<h3 style="color:#566D7E;">@Html.ActionLink("Shall we play again :)", "Index", "WhosinYourMind")</h3>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/shanuAngularScript/Modules.js"></script>
<script src="~/Scripts/shanuAngularScript/Services.js"></script>
<script src="~/Scripts/shanuAngularScript/Controllers.js"></script>
برنامه را اجرا کنید.
در اینجا بعد از کلیک بر روش شروع به صفحه بعدی می رویم
حالا نام شخص مورد نظر را به خاطر بسپارید:
در اینجا شما می توانید از لیست زیر شغل شخص را انتخاب کنید و سپس بازی را شروع کنید.
در مرحله بعد، می توانیم به سوالات با پاسخ بله یا خیر جواب دهیم و بعد Submit را بزنیم تا سوال بعدی نمایش داده شود.
توجه کنید که ما در اینجا فقط 3 سوال را برای هر شخص در نظر گرفته ایم . می توانید سوالات را بر اساس نیاز خود به پایگاه داده اضافه کنید و در Controler.js تعداد سوالات را به طور مشابه در “scope.finalresultCount = 3” اضافه کنید.
- ASP.net MVC
- 1k بازدید
- 4 تشکر