I have the following single page that shows the tags and process them:
<%@ Page Title="" Language="VB" ClientIDMode="Static" MasterPageFile="~/MasterPages/MyMasterPage.master" AutoEventWireup="false" CodeFile="Tags.aspx.vb" Inherits="NewPosting_Tags" MaintainScrollPositionOnPostback="true" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %><asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"><style type="text/css">
.MainFieldsDivStyle
{
border-color: Black;
width: 70%;
border-style: solid;
margin-top: 22px;
background-color:#C9DCF2;
/*opacity: 0.8;*/
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
.Buttonout
{
cursor:default;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
.Buttonhover
{
cursor:pointer;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
.auto-style1 {
margin-left: 9px;
margin-top: 7px;
}
</style><link rel="stylesheet" type="text/css" href="<%= ResolveUrl("~/jquery/js/jquery-ui.css")%>"/><link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css" /><link rel="stylesheet" type="text/css" href="<%= ResolveUrl("~/jquery/js/jquery.tagit.css")%>"/></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="CpMainContent" Runat="Server"><asp:toolkitscriptmanager ID="ScriptManager1" 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="<%=ResolveUrl("~/jquery/js/tag-it.js") %>" type="text/javascript"></script> <script type="text/javascript">$(document).ready(function () {
var data = '<%= GetDataList() %>'; //get the available tags from code behind method.
var datalist = data.split(","); //change the data to array$("#myTags").tagit({ availableTags: datalist });
// store the original data and assign the original data to a hidden field
// all the original data is stored in input whose name is tags
var tagArr = [];$.each($("input[name=tags]"), function (index, ele) {
tagArr.push(ele.value);
})$("#<%= HiddenField1.ClientID%>").val(tagArr.join(","))
});</script><div id="MainDiv" class="MainFieldsDivStyle"><ul id="myTags"><!--render the data--><% For Each tag In tags
%><li> <%=tag %></li><% Next
%></ul><%--<asp:Button ID="btnSubmit" runat="server" Text="إرسال" OnClick="btnSubmit_Click" Height="31px" Width="107px" />--%><asp:Button ID="btnSubmit" runat="server" BackColor="#6262FF" ForeColor="White" Height="40px" OnClick="btnSubmit_Click"
style="text-align: center; font-size: 30px; margin-bottom: 5px; font-family: sc_AMEEN; -moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px; " Text="إرسال" Width="186px"
onMouseOver="this.className='Buttonhover'" onMouseOut="this.className='Buttonout'" UseSubmitBehavior="False" CssClass="auto-style1" /><asp:HiddenField ID="HiddenField1" runat="server" /></div></asp:Content>The code-behind is:
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Diagnostics
Imports System.Net
Imports System.Net.Mail
Imports System.Web
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.Services
Imports System.Text
Imports System.String
Partial Class NewPosting_Tags
Inherits System.Web.UI.Page
Public Shared querystring As String
Public Shared EnteredTags As String
Public Shared UserName As String
Public Shared tags As List(Of String) = New List(Of String)
Protected Sub btnSubmit_Click(sender As Object, e As EventArgs) Handles btnSubmit.Click
'EnteredTags = HiddenField1.Value
EnteredTags = Request.Form(4)
'Dim newTags = Request.Form("tags")
If Len(EnteredTags) > 0 Then
' you want to split this input string
Dim s As String = EnteredTags
' Split string based on comma
Dim words As String() = s.Split(New Char() {","c})
' Use For Each loop over words and display them
Dim conString = ConfigurationManager.ConnectionStrings("TrackingConnectionString").ConnectionString
Using connection As New SqlConnection(conString)
connection.Open()
querystring = "DELETE FROM PostingsTagsTemp WHERE (LoadedByUserName=@UN)"
Dim ClearOldRecords As New SqlCommand(querystring, connection)
ClearOldRecords.Parameters.Add("@UN", SqlDbType.NVarChar)
ClearOldRecords.Parameters("@UN").Value = UserName
ClearOldRecords.ExecuteNonQuery()
End Using
Dim word As String
For Each word In words
AddNewTag(word)
Next
End If
ScriptManager.RegisterStartupScript(Page, GetType(Page), "CloseWindow", "window.close();", True)
End Sub
'get the data list, used to populate the autocomplete available tags.
Public Function GetDataList() As String
Dim StoredTagsList As SqlDataReader
Dim StoredTagsListTemp As SqlDataReader
Dim datalist As String
Dim data As List(Of String) = New List(Of String)()
Dim conString = ConfigurationManager.ConnectionStrings("TrackingConnectionString").ConnectionString
Using connection As New SqlConnection(conString)
connection.Open()
querystring = "SELECT DISTINCT KeyTag FROM PostingsTags"
Dim ExtractTagsList As New SqlCommand(querystring, connection)
ExtractTagsList.Parameters.Add("@RNo", SqlDbType.NVarChar)
ExtractTagsList.Parameters("@RNo").Value = Session("TagsRefNo")
StoredTagsList = ExtractTagsList.ExecuteReader()
If StoredTagsList.HasRows Then
Do While StoredTagsList.Read()
If StoredTagsList(0) <> "" Then
data.Add(StoredTagsList(0))
End If
Loop
End If
StoredTagsList.Close()
'querystring = "SELECT DISTINCT KeyTag FROM PostingsTagsTemp WHERE (LoadedByUserName=@UN)"
querystring = "SELECT DISTINCT KeyTag FROM PostingsTagsTemp"
Dim ExtractTagsListTemp As New SqlCommand(querystring, connection)
ExtractTagsListTemp.Parameters.Add("@UN", SqlDbType.NVarChar)
ExtractTagsListTemp.Parameters("@UN").Value = UserName
StoredTagsListTemp = ExtractTagsListTemp.ExecuteReader()
If StoredTagsListTemp.HasRows Then
Do While StoredTagsListTemp.Read()
If StoredTagsListTemp(0) <> "" Then
'data.Remove(StoredTagsListTemp(0))
data.Add(StoredTagsListTemp(0))
End If
Loop
End If
StoredTagsListTemp.Close()
End Using
datalist = String.Join(",", data)
Return datalist
End Function
Public Sub AddNewTag(ByVal Tag As String)
Dim conString = ConfigurationManager.ConnectionStrings("TrackingConnectionString").ConnectionString
Using connection As New SqlConnection(conString)
connection.Open()
querystring = "INSERT INTO PostingsTagsTemp(RefNo,KeyTag,LoadedByUserName) VALUES(@RNo,@Tag,@UN)"
Dim InsertNewTag As New SqlCommand(querystring, connection)
InsertNewTag.Parameters.Add("@RNo", SqlDbType.NVarChar)
InsertNewTag.Parameters("@RNo").Value = Session("TagsRefNo")
InsertNewTag.Parameters.Add("@Tag", SqlDbType.NVarChar)
InsertNewTag.Parameters("@Tag").Value = Tag
InsertNewTag.Parameters.Add("@UN", SqlDbType.NVarChar)
InsertNewTag.Parameters("@UN").Value = UserName
InsertNewTag.ExecuteNonQuery()
End Using
End Sub
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Session("UserName") = "" Then
Response.Redirect("~\Logon\LogonScreen.aspx")
End If
UserName = Session("username")
btnSubmit.Focus()
Dim RefNoKeyTags As SqlDataReader
Dim conString = ConfigurationManager.ConnectionStrings("TrackingConnectionString").ConnectionString
Using connection As New SqlConnection(conString)
connection.Open()
If IsPostBack = False Then
If tags.Count > 0 Then
tags.Clear()
End If
querystring = "SELECT DISTINCT KeyTag FROM PostingsTagsTemp WHERE (LoadedByUserName=@UN)"
Dim LoadRefNoKeyTags As New SqlCommand(querystring, connection)
LoadRefNoKeyTags.Parameters.Add("@UN", SqlDbType.NVarChar)
LoadRefNoKeyTags.Parameters("@UN").Value = UserName
RefNoKeyTags = LoadRefNoKeyTags.ExecuteReader()
If RefNoKeyTags.HasRows Then
While RefNoKeyTags.Read()
tags.Add(RefNoKeyTags(0))
End While
RefNoKeyTags.Close()
End If
End If
End Using
End Sub
End Class
What I want is to show them in ajax modalpopupextender panel, for example:
<asp:Panel ID="Panel1" runat="server" CssClass="Panel1Style" style="display:none" ><table id="TagsTable" runat="server" style="width:100%;"><tr> . .<td>
.
.
</td>
.
.</tr></table> </panel> <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="Panel1Cancel" PopupControlID="Panel1" DropShadow="true" TargetControlID="Panel1DummyLabel" BackgroundCssClass="modalBackground"></asp:ModalPopupExtender>
With code-behind, as example:
Protected Sub OpenTagsForm_Click(sender As Object, e As EventArgs) Handles OpenIncomingInfoWindow.Click
ModalPopupExtender1.Show()
End SubSo, how to make it?