locked
How to show it in ajax modalpopupextender panel instead of seperate page RRS feed

  • 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