How to create tags using Jquery in asp.net

In this article I am going to explain how to create tags using Jquery plugin in asp.net with database.




Description:
I want to add tags to each article or post. To crate tag I am using Tag-it Jqery plugin.  You can see the working example and can download the plugin From here. 

Implementation:
I have created a table Tb_Movie and insert some dummy record into it.

How to create tags using Jquery in asp.net


Now add a webform to project/website. Link the Tag-it Jquery and CSS to webform.

Complete HTML Markup:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   
    <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>
           <script src="js/tag-it.js" type="text/javascript"></script>
    <link href="css/jquery.tagit.css" rel="stylesheet" type="text/css" />
    <link href="css/tagit.ui-zendesk.css" rel="stylesheet" type="text/css" />
      
</head>
<body>

    <form id="form1" runat="server">
    <div style="margin-top:100px">
   <ul id="myTags" style="width:50%"></ul>
    </div>
    </form>

   <%--script--%>
<script type="text/javascript">
    $(function () {
        $("#myTags").tagit({
            tagLimit: 3,
            autocomplete: {
                delay: 0,
                minLength: 1,
                source: function (request, response) {
                    $.ajax({
                        url: 'tag.aspx/GetMovieName',
                        data: "{ 'MovieName': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item,
                                    val: item                                  
                                }
                            }))
                        },                                     
                        error: function (response) {
                            alert(response.responseText);
                        }
                    });
                }
            }
        });
    });  
    </script>
</body>
</html>

Now import the namespace

C# code:
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;

VB.Net Code:
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.IO

Now create a webmethod to get movie name from database.

C# code:

[WebMethod]
    public static List<string> GetMovieName(string MovieName)
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
        SqlCommand cmd = new SqlCommand("Select name from tb_movie where name like @name +'%'", con);
        cmd.Parameters.AddWithValue("@name", MovieName);
        con.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        List<string> movienames = new List<string>();
        while (dr.Read())
        {
            movienames.Add(dr["name"].ToString());
        }
        con.Close();
        return movienames;
    }

VB.Net Code:

<WebMethod()>
    Public Shared Function GetMovieName(MovieName As String) As List(Of String)
        Dim con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())
        Dim cmd As New SqlCommand("Select name from tb_movie where name like @name +'%'", con)
        cmd.Parameters.AddWithValue("@name", MovieName)
        con.Open()
        Dim dr As SqlDataReader = cmd.ExecuteReader()
        Dim movienames As New List(Of String)()
        While dr.Read()
            movienames.Add(dr("name").ToString())
        End While
        con.Close()
        Return movienames
    End Function

Now build the application and run. Test it. Hope this tutorial will help you.

0 Comments