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

How to create tags in jQuery from database in mvc (jQuery tag autocomplete) ? , someone asked me to explain?

In this article, I will show you how to create tags using tag jQuery plugin in 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 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
                                 select customer;
            var result = (from c in db.Categories.AsEnumerable()
                          select new
                              Name =c.CategoryName
            foreach (var c in result)
            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="" type="text/javascript" charset="utf-8"></script>
    <script src="" 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 () {
                tagLimit: 3,
                autocomplete: {
                    delay: 0,
                    minLength: 1,
                    source: function (request, response){
                            url: "@Url.Action("GetCategories", "Tags", new { area = "" })",
                            data: "{ 'category': '" +request.term + "'}",
                            dataType: "json",
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            success: function (data) {
                               response($.map(data.success, function (item) {
                                    return {
                            error: function (response) {

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


jquery tagit autocomplete example

Post your comments / questions