Asked by:
How to show it in ajax modalpopupextender panel instead of seperate page

Question
-
User-786564416 posted
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 Sub
So, how to make it?
Sunday, April 7, 2019 9:22 PM
All replies
-
User-893317190 posted
Hi alihusain_77 ,
Not sure about your requirement, but if you want to use modal pop up to show the tags , you could try the code below.
You could also put the content in update panel.
Below is my code.
<form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1" CancelControlID="Button3" TargetControlID="Button2"></ajaxToolkit:ModalPopupExtender> <asp:Button ID="Button2" runat="server" Text="open pop up" /> <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <ul id="myTags"> <!-- Existing list items will be pre-added to the tags --> <% For Each tag In tags %> <li> <%=tag %></li> <% Next %> </ul> <asp:Button ID="Button1" runat="server" Text="submit" OnClick="Button1_Click" /> <asp:HiddenField ID="HiddenField1" runat="server" /> <asp:Button ID="Button3" runat="server" Text="Close" /> </ContentTemplate> </asp:UpdatePanel> </asp:Panel> <%-- <input type="button" onclick="showValues()" value="click"/>--%> <script type="text/javascript"> // function showValues() { // var values = []; //$.each($("input[name=tags]"), function (index, ele) { // values.push(ele.value); // }) // alert(values); // } $(document).ready(function() { $("#myTags").tagit(); var tagArr = []; $.each($("input[name=tags]"), function (index, ele) { tagArr.push(ele.value); }) $("#<%= HiddenField1.ClientID%>").val(tagArr.join(",")) }); </script>
The result.
Best regards,
Ackerly Xu
Monday, April 8, 2019 2:25 AM