How to create tags using Jquery in asp.net - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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.

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon