In
this article I am going to explain how to create tags using Jquery plugin in
asp.net with database.
In
the previous article I have explained how to set color for ODD and EVEN rows inHTML Table using CSS, Form validation example using AngularJs with Bootstrap inMVC application and how to sort and search the data in grid and also highlightthe searched matched text using Angularjs in MVC application.
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.
I
have created a table Tb_Movie and
insert some dummy record into it.
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.
.png)
No comments:
Post a Comment