How to create tags in jQuery from database in asp.net mvc (jQuery tag autocomplete) ?

In this article, I will show you how to create tags using tag jQuery plugin in asp.net mvc with database.

Here I used Northwind database. You can download it from following link.

Download Northwind Database

Open Microsoft SQL management studio and right click on the database and attach it.

Step 1: Create an ado.net entity data model using table Categories and generate entity for that.

Step 2: Right click on the "Controllers" folder and add "Tags" controller. Copy and paste the following code.

public class TagsController : Controller
    {
        models db = new models();
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult GetCategories(string category)
        {
            List<string> categories = new List<string>();
            var customerOrders = from customer in db.Customers
                                 wherecustomer.ContactName.StartsWith("C") && customer.Orders.Count > 0
                                 orderbycustomer.ContactName
                                 select customer;
 
            var result = (from c in db.Categories.AsEnumerable()
                          wherec.CategoryName.StartsWith(category)
                          select new
                          {
                              Name =c.CategoryName
 
                         }).Distinct().ToList();
 
            foreach (var c in result)
            {
                categories.Add(c.Name
                   );
            }
            return new JsonResult
           {
               Data = new
               {
                   success = categories,
                   message = "Success",
               },
               JsonRequestBehavior = JsonRequestBehavior.AllowGet
           };
        }
    }

Step 3: Copy and paste the following code in the design page index.cshtml. I used cdn for jQuery and jQuery ui. You can download tag plugin jQuery script and css from here.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
    <link href="~/Content/tags/jquery.tagit.css" rel="stylesheet" />
    <link href="~/Content/tags/tagit.ui-zendesk.css" rel="stylesheet" />
    <script src="~/Content/tags/tag-it.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#myTags").tagit({
                tagLimit: 3,
                autocomplete: {
                    delay: 0,
                    minLength: 1,
                    source: function (request, response){
                        $.ajax({
                            url: "@Url.Action("GetCategories", "Tags", new { area = "" })",
                            data: "{ 'category': '" +request.term + "'}",
                            dataType: "json",
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            success: function (data) {
                                debugger;
                               response($.map(data.success, function (item) {
                                    return {
                                        label:item,
                                        val:item
                                    }
                                }))
                            },
                            error: function (response) {
                               alert(response.responseText);
                            }
                        });
                    }
                }
            });
        });
    </script>
</head>   

 <h2>Create tags using JQuery</h2>
   <div style="margin-top: 100px">
        <ul id="myTags" style="width: 50%"></ul>
    </div>

Output: