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.
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: