Thursday, August 25, 2016

How to create tags using Jquery in

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

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. 

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

How to create tags using Jquery in

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

Complete HTML Markup:

<html xmlns="">
<head runat="server">
    <script src="" type="text/javascript" charset="utf-8"></script>
    <script src="" 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" />

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

<script type="text/javascript">
    $(function () {
            tagLimit: 3,
            autocomplete: {
                delay: 0,
                minLength: 1,
                source: function (request, response) {
                        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) {

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:

    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);
        SqlDataReader dr = cmd.ExecuteReader();
        List<string> movienames = new List<string>();
        while (dr.Read())
        return movienames;

VB.Net Code:

    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)
        Dim dr As SqlDataReader = cmd.ExecuteReader()
        Dim movienames As New List(Of String)()
        While dr.Read()
        End While
        Return movienames
    End Function

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

No comments:

Post a Comment