نیازمندی
ما به یک جعبه متنی نیاز داریم که وقتی کاربر نام یک کشور را در آن تایپ می کند، به محض اینکه کاربر شروع به تایپ کلمه ای می کند، به طور خودکار پیشنهادات را نشان می دهد. همچنین با پیشنهاد، می خواهیم پرچم کشور در مقابل هر کشور در پیشنهاد ظاهر شود.
مرحله 1: چند نمونه عکس از پرچم برخی کشورها را از اینترنت دانلود کنید. من قبلاً تعدادی از تصاویر را دانلود کرده ام.
مرحله 2: یک جدول در یک پایگاه داده ایجاد کنید که مسیر پرچم ها را همراه با نام کشورها ذخیره می کند. برای رسیدن به این هدف از SQL Script زیر استفاده کنید.
- CREATE DATABASE jQueryUIDemo
- USE jQueryUIDemo
- CREATE TABLE [dbo].[jQueryDemo] (
- [Id] INT IDENTITY (1, 1) NOT NULL,
- [CountryName] NVARCHAR (50) NOT NULL,
- [IconPath] NVARCHAR (MAX) NOT NULL,
- PRIMARY KEY CLUSTERED ([Id] ASC)
- );
- CREATE procedure [dbo].[spGetCountriesDetailsWithIcons]
- @term nvarchar(max)
- as
- begin
- select * from jQueryDemo where CountryName like @term + '%'
- end
- SET IDENTITY_INSERT [dbo].[jQueryDemo] ON
- INSERT INTO [dbo].[jQueryDemo] ([Id], [CountryName], [IconPath]) VALUES (1, N'Australia', N'/Icons/australia.gif')
- INSERT INTO [dbo].[jQueryDemo] ([Id], [CountryName], [IconPath]) VALUES (2, N'Canada', N'/Icons/canada.gif')
- INSERT INTO [dbo].[jQueryDemo] ([Id], [CountryName], [IconPath]) VALUES (3, N'China', N'/Icons/china.gif')
- INSERT INTO [dbo].[jQueryDemo] ([Id], [CountryName], [IconPath]) VALUES (4, N'England', N'/Icons/england.gif')
- INSERT INTO [dbo].[jQueryDemo] ([Id], [CountryName], [IconPath]) VALUES (5, N'India', N'/Icons/india.gif')
- INSERT INTO [dbo].[jQueryDemo] ([Id], [CountryName], [IconPath]) VALUES (6, N'Ireland', N'/Icons/ireland.gif')
- INSERT INTO [dbo].[jQueryDemo] ([Id], [CountryName], [IconPath]) VALUES (7, N'Malaysia', N'/Icons/malaysia.gif')
- INSERT INTO [dbo].[jQueryDemo] ([Id], [CountryName], [IconPath]) VALUES (8, N'Mexico', N'/Icons/mexico.gif')
- INSERT INTO [dbo].[jQueryDemo] ([Id], [CountryName], [IconPath]) VALUES (9, N'Nepal', N'/Icons/nepal.gif')
- INSERT INTO [dbo].[jQueryDemo] ([Id], [CountryName], [IconPath]) VALUES (10, N'Pakistan', N'/Icons/pakistan.gif')
- INSERT INTO [dbo].[jQueryDemo] ([Id], [CountryName], [IconPath]) VALUES (11, N'Poland', N'/Icons/poland.gif')
- INSERT INTO [dbo].[jQueryDemo] ([Id], [CountryName], [IconPath]) VALUES (12, N'Portugal', N'/Icons/portugal.gif')
- INSERT INTO [dbo].[jQueryDemo] ([Id], [CountryName], [IconPath]) VALUES (13, N'Russia', N'/Icons/russia.gif')
- INSERT INTO [dbo].[jQueryDemo] ([Id], [CountryName], [IconPath]) VALUES (14, N'Spain', N'/Icons/spain.gif')
- INSERT INTO [dbo].[jQueryDemo] ([Id], [CountryName], [IconPath]) VALUES (15, N'Sri Lanka', N'/Icons/sri_lanka.gif')
- INSERT INTO [dbo].[jQueryDemo] ([Id], [CountryName], [IconPath]) VALUES (16, N'Turkey', N'/Icons/turkey.gif')
- SET IDENTITY_INSERT [dbo].[jQueryDemo] OFF
مرحله 3: ویژوال استودیو را باز کنید و یک برنامه وب خالی ASP.NET ایجاد کنید.
مرحله 4: یک پوشه به نام "Icons" اضافه کنید و تمام تصاویر دانلود شده را در آن کپی کنید. به یاد داشته باشید که نام پوشه باید با مسیری که در جدول پایگاه داده ذخیره کرده اید یکسان باشد.
مرحله 5: فایل های منبع jQueryUI Autocomplete Widget را از وب سایت رسمی jQueryUI دانلود کنید یا می توانید مراحل دانلود را از مقاله قبلی من در مورد ویجت jQueryUI Autocomplete دنبال کنید. این پوشه دانلود شده را در پوشه اصلی برنامه کپی کنید. ما فقط به مرجع فایل های زیر در آن پوشه دانلود شده نیاز داریم.
مرحله 6: یک فایل کلاس به نام " Countries.cs" اضافه کنید
"و با کد زیر جایگزین کنید.
- namespace jQueryUIAutocompleteWithIcons
- {
- public class Countries
- {
- public int Id { get; set; }
- public string CountryName { get; set; }
- public string IconPath { get; set; }
- }
- }
مرحله 7: رشته های اتصال را برای اتصال به پایگاه داده در فایل web.config اضافه کنید.
- <?xml version="1.0" encoding="utf-8"?>
- <configuration>
- <system.web>
- <compilation debug="true" targetFramework="4.5" />
- <httpRuntime targetFramework="4.5" />
- </system.web>
- <connectionStrings>
- <add connectionString="Data Source=.; Database=jQueryUIDemo; Integrated Security=True" name="DBCS" providerName="System.Data.SqlClient"/>
- </connectionStrings>
- </configuration>
مرحله 8: یک فایل سرویس وب ASP.NET با نام " CountriesService.asmx " اضافه کنید و کد زیر را جایگزین آن کنید.
- using System;
- using System.Collections.Generic;
- using System.Configuration;
- using System.Data;
- using System.Data.SqlClient;
- using System.Web.Script.Serialization;
- using System.Web.Services;
- namespace jQueryUIAutocompleteWithIcons
- {
- [WebService(Namespace = "http://tempuri.org/")]
- [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
- [System.ComponentModel.ToolboxItem(false)]
- [System.Web.Script.Services.ScriptService]
- public class CountriesService : System.Web.Services.WebService
- {
- [WebMethod]
- public void GetCountriesDetails(string term)
- {
- string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
- List<Countries> countries = new List<Countries>();
- using (SqlConnection con = new SqlConnection(CS))
- {
- SqlCommand cmd = new SqlCommand("spGetCountriesDetailsWithIcons", con);
- cmd.CommandType = CommandType.StoredProcedure;
- cmd.Parameters.AddWithValue("@term", term);
- con.Open();
- SqlDataReader dr = cmd.ExecuteReader();
- while (dr.Read())
- {
- Countries country = new Countries();
- country.Id = Convert.ToInt32(dr["Id"]);
- country.CountryName = dr["CountryName"].ToString();
- country.IconPath = dr["IconPath"].ToString();
- countries.Add(country);
- }
- }
- JavaScriptSerializer JS = new JavaScriptSerializer();
- Context.Response.Write(JS.Serialize(countries));
- }
- }
- }
Ctrl + F5 را فشار دهید تا بررسی کنید که سرویس ما مطابق انتظار کار می کند یا خیر. صفحه زیر را مشاهده خواهید کرد.