This is Our Blog

May 3, 2016
|

Tagging handle multi-tag fields as well as tag suggestions/autocomplete and custom tags

STEP 1: or in ASP.NET MVC

  1. Navigate to manage nugget packages and search for tag-it
  2. Tag-it Author should be Alex Aehlke if found install it, in my project it is already installed.
  3. Add following file from scripts dir to layout page or wherever needed.
    1. <script src=”scripts/tag-it.js” type=”text/javascript” charset=”utf-8″></script>
    2. Note:- make sure jquery files already exist in project above of this file.
  4. Add following css files in your layout page or wherever needed
    1. <code><span style="color:#333333; font-family:Consolas">&lt;link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css"&gt; //this is one is for theme.
      </span></code>
    2. <code><span style="color:#333333; font-family:Consolas">&lt;link href="css/jquery.tagit.css" rel="stylesheet" type="text/css"&gt;
      </span></code>
  5. Now add a <ul> tag in html or cshtml page like following in body area
    1. <ul id=”methodTags”></ul>
  6. Now add following java script function on document ready and call it whenever you have data in your array before page rendring

function ()

    {


var ArrayDemo = [‘xx’,’yy’,’ab’,’tag1′, ‘tag2’];

 

    // in following commented lines I am assigning data in array from database table got from angular ajax call in saltsAll variable.

// for (var i = 0; i < $scope.saltsAll.length; i++) {

// ArrayDemo.push($scope.saltsAll[i].Title);

// }

    $(‘#methodTags’).tagit({

        availableTags: ArrayDemo

     });

}

 

Now you are almost done with code run your page and enjoying tagging in ul control.

Reference: https://github.com/aehlke/tag-it

 

 

 



0 Comments


Would you like to share your thoughts?

Would you like to share your thoughts?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.