پیاده سازی Auto Complete TextBox با استفاده از AngularJS در MVC

در بسیاری از موتورهای جستجو و وب سایت ها زمانی که یک یا دوتا از حرف از کلمه را تایپ می کنیم ، به ما لیستی از کلمات را برای انتخاب پیشنهاد می کند. پر شدن خودکار text boxها معمولا در پروژه های بلادرنگ برای افزایش تعامل کاربر با سایت، استفاده می شود.حال در این مقاله یاد خواهیم گرفت که چگونه این کار با AngularJS پیاده سازی می شود.

برای مثال ، ما می خواهیم در مورد پر شدن خودکار textbox جستجوی گوگل ،صحبت کنیم.

در اینجا ، نتیجه های پیشنهادی براساس نتیجه های جستجوی قبلی یا بیشترین نتیجه های جستجو شده می باشند.

پیاده سازی پر شدن خودکار Textbox در Angular:

برای پیاده سازی پر شدن خودکار در Angular ، ما به دستور angucomplete-alt نیاز داریم.وابستگی Angucomplete ، باید به برنامه Angular اضافه شود.در این برنامه ،داده های پیشنهادی را از جدول دیتابیس می گیریم.

مراحل پیاده سازی پر شدن خودکار textbox به صورت زیر است:

مرحله1:

یک پروژه جدید ایجاد کنید.

به قسمت File بروید-> New->Project -> Asp.NET Web Application زیر قسمت Web -> نام برنامه را وارد کنید-> oK-> قالب Empty-> تیک MVC را بزنید -> ok

مرحله 2 :

یک دیتابیس به پروژه خود اضافه کنید.

به Solution Explorer بروید-> روی پوشه ی App_Data راست کلیک کنید -> Add -> New -> New item -> SQL Server Database را از زیرمجموعه Data انتخاب کنید->نام دیتابیس را وارد کنید-> Add.

مرحله 3:

یک جدول برای ذخیره ی داده ها ایجاد کنید.

دیتابیس را باز کنید-> روی پوشه ی Table راست کلیک کنید -> Add New Table -> Add Columns -> Save -> نام جدول را وارد کنید ->OK.

در این مقاله ، ما یک جدول (Country) برای ذخیره ی لیست کشورها که به عنوان لیست پیشنهادی به صورت خودکار ظاهر می شود(این جدول شامل ستون های CountryID و CountryName می باشد.) ایجاد کرده ایم.

مرحله 4:

Entity Data Model را اضافه کنید.

1. به Solution Explorer بروید -> روی نام پروژه در Soloution Explorer راست کلیک کنید -> Add -> New item -> ADO.net Entity Data Model را از زیر مجموعه Data انتخاب کنید -> نام model را وارد کنید-> Add .

2. یک پنجره Popup می آید (Entity Data Model Wizard) ->Generate را از دیتابیس انتخاب کنید-> روی Next کلیک کنید.

3. data connection خود را انتخاب کنید -> دیتابیس را انتخاب کنید -> Entity framework version (5.0 or 6.0) را انتخاب کنید next -> جداول را انتخاب کنید-> نام Model Namespace را وارد کنید -> روی Finish کلیک کنید.

مرحله 5:

Reference فایل های Angular را اضافه کنید.

.1 فایل های reference در صفحه ی_Layout.cshtml ، در زیر داده شده است.(شما می توانید فایل ها را از angucomplete-alt.css و angucomplete-alt.js دانلود کنید.)

2. این فایل ها را به تگ <head> اضافه کنید.

	<!--Angualr refrence file for auto complete text box starts->  
	<script src="~/Scripts/angular.min.js"></script>  
        <script src = "~/Scripts/angular-route.min.js" > < /script>   
	<script src = "~/Scripts/angucomplete-alt.js" > < /script>   
	<link href = "~/Content/angucomplete-alt.css" rel = "stylesheet" / >  
	<script src = "~/Scripts/app.js" > < /script>  
	<!--Angualr refrence file for auto complete text box starts->

مرحله 6:

اضافه کردن Controller

1. با راست کلیک کردن بر روی پوشه ی Controllers -> Add -> Controller-> به نام Home Controller یک controller اضافه کنید.

2. کدهای زیر را در آن جایگزین کنید.

3.	using System;  
4.	using System.Collections.Generic;  
5.	using System.Linq;  
6.	using System.Web;  
7.	using System.Web.Mvc;  
	namespace AngularAutoCompleteTextbox.Controllers  
	{  
	    public class HomeController: Controller  
	    {  
	        public ActionResult Index()  
	        {  
	            return View();  
	        }  
	        public ActionResult getAllCountries()  
	        {  
	            using(DatabaseEntities db = new DatabaseEntities())  
	            {  
	                var countrylist = db.Countries.OrderBy(a => a.CountryName)  
	                    .ToList();  
	                return new JsonResult  
	                {  
	                    Data = countrylist, JsonRequestBehavior = JsonRequestBehavior.AllowGet  
	                };  
	            }  
	        }  
	    }  
	}

Action .3 ی به نام Index برای render کردن view ، استفاده می شود.

4. متد getAllCountries داده را از دیتابیس می گیرد و به کنترلر Angular در فرمت JSON ارسال می کند.

مرحله 7

Scriptهای Angular را به پروژه اضافه کنید.

1. روی پوشه ی Scripts راست کلیک کنید->فایل JavaScript اضافه کنید(ما در این جا app.js گذاشتیم).

2. کدهای زیر را جایگزین کنید.

	var app = angular.module('myapp', ['angucomplete-alt']); //add angucomplete-alt dependency in app  
	app.controller('AutoCompleteController', ['$scope', '$http', function ($scope, $http) {  
	    $scope.Countries = [];  
	    $scope.SelectedCountry = null;  
	    //event fires when click on textbox  
	    $scope.SelectedCountry = function (selected) {  
	        if (selected) {  
	            $scope.SelectedCountry = selected.originalObject;  
	        }  
	    }  
	    //Gets data from the Database  
	    $http({  
	        method: 'GET',  
	        url: '/Home/getAllCountries'  
	    }).then(function (data) {  
	        $scope.Countries = data.data;  
	    }, function () {  
	        alert('Error');  
	    })  
	}]);

3. در این جا ، $scope.SelectedCountry ، مقادیر انتخاب شده در textbox را ذخیره می کند.سرویس $http داده را از سرور می گیرد.

مرحله 8

روی action به نام Index راست کلیک کنید-> Add View -> نامگذاری کنید -> روی Add کلیک کنید.

کدهای زیر را در صفحه ی Index.cshtml page. جایگزین کنید.

	@{

	    ViewBag.Title = "Mitechdev.com";
	}
	<body dir="rtl">
	    <div class="container">
	        <h2>نام کشور مورد نظر خود را وارد کنید</h2>
	        <div ng-app="myapp">
	            <div ng-controller="AutoCompleteController">
	                <div angucomplete-alt id="txtAutocomplete" placeholder="نام کشور را تایپ کنید" pause="100"
	                     selected-object="SelectedCountry" local-data="Countries" search-fields="CountryName"
	                     title-field="CountryName" minlength="1" input-class="form-control" match-class="highlight">
	                </div>
	                <!--display selected country-->
	                <div ng-show="SelectedCountry">
	                    کشور انتخاب شده : {{SelectedCountry.CountryName}}
	                </div>
	            </div>
	        </div>
	    </div>
</body>

3. در المان div ، ما باید angucomplete-alt را اضافه کنیم.ما داده را با استفاده از صفت local-data ، ثبت(bind) می کنیم.

4. بعد از اجرای برنامه ، ما نتیجه مورد نظر را می گیریم.

آموزش asp.net mvc

فایل های ضمیمه

5157_AngularAutoCompleteTextbox.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان