Wednesday, June 8, 2016

Autocomplete textbox using Angularjs in asp.net MVC

In this article I am going to explain how to create autocomplete textbox using angularjs in asp.net mvc application.



Description:
AngularJs is popular framework to build interactive web application. I want an auto suggest textbox using aungularjs means when users type something in textbox (input), matched records will be displayed dropdown style and matched text will be highlighted.
In this AngularJs tutorial I am using angucomplete-alt Jquery. Download the Js and CSS file and add to you project.

Implementation:

To fulfill this requirement I have create a table Tb_City and insert some dummy record into it.

Model
    public partial class Tb_City
    {
        public int Id { get; set; }
        public string CityName { get; set; }
    }

Add Controller
Now add an empty controller to project. I have create Json action to get data from database.

Controller code (AngularCOntroller.cs):-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC_Project.Models;
namespace MVC_Project.Controllers
{
    public class AngularController : Controller
    {
        //
        // GET: /Angular/
        DemoEntities1 db = new DemoEntities1();
        public ActionResult Index()
        {
            return View();
        }
        public JsonResult Getcity()
        {
            var city = db.Tb_City.ToList();
            return Json(city, JsonRequestBehavior.AllowGet);
           
        }

    }
}

Add View
After that add a view for for Index action. Add the below given CSS and Js to view.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="~/Scripts/angucomplete-alt.js"></script>
<link href="~/css/angucomplete-alt.css" rel="stylesheet" />
<script>
    var app = angular.module('mvcapp', ['angucomplete-alt']);
    app.controller('AngularController', ['$scope', '$http', function ($cityscope, $http) {       
        $http({
            method: 'GET',
            url: '/angular/Getcity'
        }).then(function (city) {

            $cityscope.cities = city.data;
        }, function () {
            alert('something went wrong!!!');
        })
    }]);
</script>
<style>
    .txtauctocmplete {
        float: right;
    }
    input {
        width: 230px;
        height: 27px;
        border: 2px solid #00BCD4;
        padding: 4px;
    }
</style>


Complete Code of View (index.cshtml) :-
@{
    ViewBag.Title = "MVC-AngualarJs Tutorial";
}
<h2>MVC-AngualarJs Tutorial : Autocomplete  </h2>
<fieldset style="width:25%">
    <legend>MVC-AngualarJs Tutorial : Autocomplete</legend>
    <div ng-app="mvcapp" ng-controller=AngularController>      
      Search City : <div class="txtautocomplete" angucomplete-alt id="autocomplete" placeholder="Search City" pause="100" local-data="cities" search-fields="CityName"
     title-field="CityName" minlength="1" input-class="form-control form-control-small" match-class="highlight" override-suggestions="true" clear-selected="true">
</div>  <input />
    </div>
</fieldset>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="~/Scripts/angucomplete-alt.js"></script>
<link href="~/css/angucomplete-alt.css" rel="stylesheet" />
<script>
    var app = angular.module('mvcapp', ['angucomplete-alt']);
    app.controller('AngularController', ['$scope', '$http', function ($cityscope, $http) {       
        $http({
            method: 'GET',
            url: '/angular/Getcity'
        }).then(function (city) {
            $cityscope.cities = city.data;
        }, function () {
            alert('something went wrong!!!');
        })
    }]);
</script>
<style>
    .txtauctocmplete {
        float: right;
    }
    input {
        width: 230px;
        height: 27px;
        border: 2px solid #00BCD4;
        padding: 4px;
    }
</style>

 Save and build the project. Run the project to text it. Hope this article helps you.

No comments:

Post a Comment