[Solved] ASP.Net AJAX ModalPopupExtender closed on Button Click

Honeyjo
 
on Feb 07, 2022 06:00 AM
1191 Views

Hi,

I have a main form and a sub form.

The subform can be accessible via a button.

When the user clicks the button the subform opens, where the user can search for data that’s stored in sql server.

Once the results are returned, the user can then select the correct data and it will show up as labels in the mainform.

My issue is,When I search in subform, the form disappears, when I click the button again, it shows with the search results and when I click select , nothing happens.

How can I make the subform stay active till I click select on the results and the resulting data to show in the labels in mainform?

Please advise.

Search Button

<asp:ButtonID="btnexpsearchout"runat="server"Text="Expert Search"CausesValidation="False"/>

Subform 

<asp:Panel runat="server" CssClass="modalPopupexp" Height="561px" Width="1227px" ID="Pnlexpsearch" Visible="False" BackColor="#00FFCC" Style="left: 0px; top: 0px">
    <div class="auto-style34">
        <div class="float-container">
            <div class="float-child">
                <h2 class="auto-style27" style="border: 3px solid #4A3C8C; text-align: center; width: 1169px;">Find Expert</h2>
                <table class="auto-style45" style="width: 750px">
                    <tr>
                        <td class="auto-style46" colspan="9">
                            <h4>Search Criteria</h4>
                        </td>
                    </tr>
                    <tr>
                        <td class="auto-style57">
                            <asp:Label ID="lblFindQnumber" runat="server" Text="Q Number"></asp:Label>
                        </td>
                        <td class="auto-style58">&nbsp;</td>
                        <td class="auto-style58">
                            <asp:Label ID="lblFindDepart" runat="server" Text="Department"></asp:Label>
                        </td>
                        <td class="auto-style58">&nbsp;</td>
                        <td class="auto-style58">
                            <asp:Label ID="lblFindExpSurname" runat="server" Text="Expert Surname"></asp:Label>
                        </td>
                        <td class="auto-style58">&nbsp;</td>
                        <td class="auto-style58">
                            <asp:Label ID="lblFindExpFirstname" runat="server" Text="Expert First Name"></asp:Label>
                        </td>
                        <td class="auto-style58">&nbsp;</td>
                        <td class="auto-style58" style="width: 144px">
                            <asp:Label ID="lblFindOrg" runat="server" Text="Organisation"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td class="auto-style57">
                            <asp:TextBox ID="TxtFindQnumber" runat="server"></asp:TextBox>
                            <br />
                        </td>
                        <td class="auto-style58">&nbsp;</td>
                        <td class="auto-style58">
                            <asp:TextBox ID="TxtFindDepart" runat="server"></asp:TextBox>
                            <br />
                        </td>
                        <td class="auto-style58">&nbsp;</td>
                        <td class="auto-style58">
                            <asp:TextBox ID="TxtFindExpSurname" runat="server"></asp:TextBox>
                            <br />
                        </td>
                        <td class="auto-style58">&nbsp;</td>
                        <td class="auto-style58">
                            <asp:TextBox ID="TxtFindExpFirstname" runat="server"></asp:TextBox>
                            <br />
                        </td>
                        <td class="auto-style58">&nbsp;</td>
                        <td class="auto-style58" style="width: 144px">
                            <asp:TextBox ID="TxtFindOrg" runat="server"></asp:TextBox>
                            <br />
                        </td>
                    </tr>
                    <tr>
                        <td class="auto-style57">&nbsp;</td>
                        <td class="auto-style58">&nbsp;</td>
                        <td class="auto-style58">&nbsp;</td>
                        <td class="auto-style58">&nbsp;</td>
                        <td class="auto-style58">&nbsp;</td>
                        <td class="auto-style58">&nbsp;</td>
                        <td class="auto-style58">&nbsp;</td>
                        <td class="auto-style58">&nbsp;</td>
                        <td class="auto-style58" style="width: 144px">&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="auto-style60">
                            <asp:Label ID="Label10" runat="server" CssClass="lblmessage " Text=""></asp:Label>
                        </td>
                        <td class="auto-style56">&nbsp;</td>
                        <td class="auto-style56">&nbsp;</td>
                        <td class="auto-style53">&nbsp;</td>
                        <td class="auto-style53" colspan="3">
                            <asp:Button ID="Btnexpoutsearch" runat="server" CausesValidation="False" Font-Size="12px" Height="30px" Text="Search" text-align="center" Width="25%" />
                             &nbsp; 
                             <asp:Button ID="Btnexpcanout" runat="server" CausesValidation="False" Font-Size="12px" Height="30px" Text="Cancel" text-align="center" Width="25%" />
                             &nbsp; 
                            <asp:Button ID="Btnexpclearout" runat="server" CausesValidation="False" Font-Size="12px" Height="30px" Text="Clear" text-align="center" Width="25%" />
                        </td>
                        <td class="auto-style58">&nbsp;</td>
                        <td class="auto-style58" style="width: 144px">&nbsp;</td>
                    </tr>
                </table>
                <br />
                <br />
            </div>
            <div class="float-child2">
                <asp:GridView ID="GVexpsearchout" runat="server" AutoGenerateColumns="False" Font-Size="13px" Width="89%" AllowPaging="True" CellPadding="3" EmptyDataText="No records found " ShowHeaderWhenEmpty="True" BackColor="#00FFCC" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" GridLines="Horizontal" DataKeyNames="ReferralExpertID">
                    <AlternatingRowStyle BackColor="#F7F7F7" />
                    <Columns>
                        <asp:BoundField DataField="ReferralExpertID" HeaderText="ReferralExpertID" SortExpression="ReferralExpertID" InsertVisible="False" ReadOnly="True" Visible="False" />
                        <asp:BoundField DataField="ExpertDepartment" HeaderText="ExpertDepartment" SortExpression="ExpertDepartment" />
                        <asp:BoundField DataField="ExpertSurname" HeaderText="ExpertSurname" SortExpression="ExpertSurname" />
                        <asp:BoundField DataField="ExpertFirstname" HeaderText="ExpertFirstname" SortExpression="ExpertFirstname" />
                        <asp:BoundField DataField="ExpertOrganisation" HeaderText="ExpertOrganisation" SortExpression="ExpertOrganisation" />
                        <asp:BoundField DataField="Qnumber" HeaderText="Qnumber" SortExpression="Qnumber" />
                        <asp:CommandField ShowSelectButton="True" />
                    </Columns>
                    <EditRowStyle BackColor="#00FFCC" />
                    <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
                    <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
                    <PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
                    <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
                    <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
                    <SortedAscendingCellStyle BackColor="#F4F4FD" />
                    <SortedAscendingHeaderStyle BackColor="#5A4C9D" />
                    <SortedDescendingCellStyle BackColor="#D8D8F0" />
                    <SortedDescendingHeaderStyle BackColor="#3E3277" />
                </asp:GridView>
                <asp:SqlDataSource ID="NewExpsearch" runat="server" CancelSelectOnNullParameter="False" ConnectionString="<%$ ConnectionStrings:Database_Connection_Lookups %>" SelectCommand="SELECT [ReferralExpertID],[ExpertDepartment], [ExpertSurname], [ExpertFirstname], [ExpertOrganisation], [Qnumber] FROM [Ref_Experts]  WHERE (@ExpertDepartment IS NULL OR ExpertDepartment = @ExpertDepartment) AND (@ExpertSurname IS NULL OR ExpertSurname LIKE @ExpertSurname + '%') AND (@ExpertFirstname IS NULL OR ExpertFirstname LIKE @ExpertFirstname  + '%') AND (@ExpertOrganisation IS NULL OR ExpertOrganisation  = @ExpertOrganisation) AND (@Qnumber IS NULL OR Qnumber = @Qnumber)">
                    <SelectParameters>
                        <asp:ControlParameter ControlID="TxtFindDepart" Name="ExpertDepartment" PropertyName="Text" />
                        <asp:ControlParameter ControlID="TxtFindExpSurname" Name="ExpertSurname" PropertyName="Text" />
                        <asp:ControlParameter ControlID="TxtFindExpFirstname" Name="ExpertFirstname" PropertyName="Text" />
                        <asp:ControlParameter ControlID="TxtFindOrg" Name="ExpertOrganisation" PropertyName="Text" />
                        <asp:ControlParameter ControlID="TxtFindQnumber" Name="Qnumber" PropertyName="Text" />
                    </SelectParameters>
                </asp:SqlDataSource>
            </div>
        </div>
    </div>
    &nbsp;
</asp:Panel>

Labels

<asp:Label ID="lblexpFirstname" runat="server"></asp:Label>
&nbsp;<asp:Label ID="lblexpSurname" runat="server"></asp:Label>
<br style="border-style: solid; border-width: 1px; padding: 1px 4px" />
<asp:Label ID="lbldept" runat="server"></asp:Label>
<br style="border-style: solid; border-width: 1px; padding: 1px 4px" />
<asp:Label ID="lblorg" runat="server"></asp:Label>
<br style="border-style: solid; border-width: 1px; padding: 1px 4px" />
<asp:Label ID="lbladd1" runat="server"></asp:Label>
<br style="border-style: solid; border-width: 1px; padding: 1px 4px" />
<asp:Label ID="lbladd2" runat="server"></asp:Label>
<br style="border-style: solid; border-width: 1px; padding: 1px 4px" />
<asp:Label ID="lbladd3" runat="server"></asp:Label>
<br style="border-style: solid; border-width: 1px; padding: 1px 4px" />
<asp:Label ID="lbladd4" runat="server"></asp:Label>
<br style="border-style: solid; border-width: 1px; padding: 1px 4px" />
<asp:Label ID="lbltel" runat="server"></asp:Label>
<br style="border-style: solid; border-width: 1px; padding: 1px 4px" />
<asp:Label ID="lblext" runat="server"></asp:Label>

 Code behind search and select grid

Protected Sub Btnexpoutsearch_Click(sender AsObject, e As EventArgs) Handles Btnexpoutsearch.Click
    If NoSearchCriteriaexp() Then
        LblMessage.Text = "Please enter search criteria"
    Else

        GVexpsearchout.DataSource = NewExpsearch
        GVexpsearchout.DataBind()
        LblMessage.Text = ""
    End If
End Sub

Private Function NoSearchCriteriaexp() AsBoolean 
    If TxtFindDepart.Text = "" And
        TxtFindExpFirstname.Text = " " And
        TxtFindExpSurname.Text = "" And
        TxtFindOrg.Text = "" And
        TxtFindQnumber.Text = "" Then
        NoSearchCriteriaexp = True
    Else
        NoSearchCriteriaexp = False
    End If
End Function

Protected Sub PopulateExpert(ByVal ReferralExpertID AsString)
    Dim sql AsString = "usp_Searchexpert" 
    Dim myConnection AsNew SqlConnection(ConfigurationManager.ConnectionStrings("Database_Connection_Lookups").ConnectionString) 
    Dim myCommand As SqlCommand = New SqlCommand(sql, myConnection)
    Dim ds AsNew DataSet 
    Try
        Using myConnection
            With myCommand
                .CommandType = CommandType.StoredProcedure
                .Parameters.AddWithValue("@ReferralExpertID", ReferralExpertID)
            End With
            Dim da As New SqlDataAdapter
            da.SelectCommand = myCommand
            da.Fill(ds)
            If ds.Tables(0).Rows.Count > 0 Then
                With ds
                    lblexpFirstname.Text = .Tables(0).Rows(0)("ExpertFirstname").ToString()
                    lblexpSurname.Text = .Tables(0).Rows(0)("ExpertSurname").ToString()
                    lbldept.Text = .Tables(0).Rows(0)("ExpertDepartment").ToString()
                    lblorg.Text = .Tables(0).Rows(0)("ExpertOrganisation").ToString()
                    lbladd1.Text = .Tables(0).Rows(0)("Address1").ToString()
                    lbladd2.Text = .Tables(0).Rows(0)("Address2").ToString()
                    lbladd3.Text = .Tables(0).Rows(0)("Address3").ToString()
                    lbladd4.Text = .Tables(0).Rows(0)("Address4").ToString()
                    lbltel.Text = .Tables(0).Rows(0)("Telephone").ToString()
                    lblext.Text = .Tables(0).Rows(0)("Ext").ToString()
                End With
            End If
        End Using
    Catch ex As Exception

        Throw
        Response.Redirect("Error Page.aspx")
    End Try
End Sub

Protected Sub GVexpsearchout_SelectedIndexChanged(sender AsObject, e As EventArgs) Handles GVexpsearchout.SelectedIndexChanged
    Dim REID AsString = CStr(GVexpsearchout.SelectedValue)
    Pnlexpsearchout.Visible = False
    pnlformout.Visible = True
    PopulateExpert(REID)

End Sub

 

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
arjunv
 
on Feb 11, 2022 12:57 AM
on Feb 11, 2022 01:01 AM

Hi Honeyjo,

You need to reopen the modal on Button Click.

Please refer below sample.

Database

I have made use of the following table Customers with the schema as follows.

I have already inserted few records in the table.

You can download the database table SQL by clicking the download link below.

Download SQL file

HTML

<cc1:ToolkitScriptManager runat="server">
</cc1:ToolkitScriptManager>
<table>
    <tr>
        <td><asp:Label ID="lblName" runat="server"></asp:Label></td>
    </tr>
    <tr>
        <td><asp:Button Text="Show" ID="btnShow" runat="server" /></td>
    </tr>
</table>
<cc1:ModalPopupExtender ID="mpName" runat="server" PopupControlID="Panel1" TargetControlID="btnShow">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Style="display: none">
    <table>
        <tr>
            <td>Name:</td>
            <td><asp:TextBox ID="txtName" runat="server"> </asp:TextBox></td>
        </tr>
        <tr>
            <td><asp:Button Text="Search" runat="server" ID="btnSearch" OnClick="Search" /></td>
        </tr>
    </table>
    <br />
    <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" OnRowCommand="OnRowCommand" DataKeyNames="CustomerId">
        <Columns>
            <asp:BoundField DataField="CustomerId" HeaderText="ID" />
            <asp:BoundField DataField="Name" HeaderText="Name" />
            <asp:BoundField DataField="Country" HeaderText="Country" />
            <asp:CommandField ShowSelectButton="True" />
        </Columns>
    </asp:GridView>
</asp:Panel>

Namespaces

C#

using System.Data;
using System.Data.SqlClient;
using System.Configuration;

VB.Net

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindGrid(string.Empty);
    }
}

protected void Search(object sender, EventArgs e)
{
    this.BindGrid(txtName.Text.Trim());
    mpName.Show();
}

private void BindGrid(string name)
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT CustomerId, Name, Country FROM Customers WHERE Name LIKE @Name + '%' OR @Name IS NULL", con))
        {
            if (!string.IsNullOrEmpty(name))
            {
                cmd.Parameters.AddWithValue("@Name", name);
            }
            else
            {
                cmd.Parameters.AddWithValue("@Name", DBNull.Value);
            }
            con.Open();
            this.gvCustomers.DataSource = cmd.ExecuteReader();
            this.gvCustomers.DataBind();
            con.Close();
        }
    }
}

protected void OnRowCommand(object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName == "Select")
    {
        lblName.Text = (gvCustomers.Rows[Convert.ToInt16(e.CommandArgument)] as GridViewRow).Cells[1].Text;
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Me.BindGrid(String.Empty)
    End If
End Sub

Protected Sub Search(ByVal sender As Object, ByVal e As EventArgs)
    Me.BindGrid(txtName.Text.Trim())
    mpName.Show()
End Sub

Private Sub BindGrid(ByVal name As String)
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(conString)
        Using cmd As SqlCommand = New SqlCommand("SELECT CustomerId, Name, Country FROM Customers WHERE Name LIKE @Name + '%' OR @Name IS NULL", con)
            If Not String.IsNullOrEmpty(name) Then
                cmd.Parameters.AddWithValue("@Name", name)
            Else
                cmd.Parameters.AddWithValue("@Name", DBNull.Value)
            End If

            con.Open()
            Me.gvCustomers.DataSource = cmd.ExecuteReader()
            Me.gvCustomers.DataBind()
            con.Close()
        End Using
    End Using
End Sub

Protected Sub OnRowCommand(ByVal sender As Object, ByVal e As GridViewCommandEventArgs)
    If e.CommandName = "Select" Then
        lblName.Text = (TryCast(gvCustomers.Rows(Convert.ToInt16(e.CommandArgument)), GridViewRow)).Cells(1).Text
    End If
End Sub

Screenshot