Solved

Ajaxtoolkit Modalpopup help

Posted on 2011-03-10
3
684 Views
Last Modified: 2012-05-11
My goal is to have a single textbox and button where when the button is clicked, the textbox contents will be fed to a SqlDataSource within a panel tied to a modalpopup and linked to a gridview to display results based off a query - then to have the select of the gridview redirect back to the page to display some data.  I've been able to get everything working except the modalpopup part.  I've tried it with it linked to the button next to the textbox but I can't get the data within the textbox to be passed to the sqldatasource within the panel - yet the modalpopup would work.  instead I've tried putting a dummy button in and then add an onclick event to the visible button to pass the value and doing response.write i confirmed that the value is getting passed to the sqldatasource parameter, but I can't get the modal popup to show.  Code is attached and any help is appreciated!
.aspx file

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="Stylesheet" href="CSS/modalpopup.css" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:TextBox ID="txtSiteSearch" runat="server" Width="200" ></asp:TextBox>
        <asp:Button ID="btnSiteSearch" runat="server" Text="Search" OnClick="showSearchResults" /><br /><br />
        <asp:Button ID="Button1" runat="server" visible="false" />
        <asp:ModalPopupExtender ID="mpSearchResults" runat="server" 
            TargetControlID="Button1" PopupControlID="pnlSearchResults"
            BackgroundCssClass="modalBackground" DropShadow="false" CancelControlID="btnCancel">
        </asp:ModalPopupExtender>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            DataKeyNames="site_id" DataSourceID="SqlDataSource1" Width="1000px" 
            CellPadding="4" ForeColor="#333333" GridLines="None">
            <RowStyle BackColor="#EFF3FB" />
            <Columns>
                <asp:CommandField ShowEditButton="True" />
                <asp:TemplateField>
                    <EditItemTemplate>
                    <table border="0" cellpadding="1" width="1000">
                        <tr>
                            <td align="center" colspan="2" width="1000">
                                <asp:TextBox runat="server" ID="site_id" Text='<%# Bind("site_id")%>'></asp:TextBox>&nbsp;-&nbsp;
                                <asp:TextBox runat="server" ID="site_name" Text='<%# Bind("site_name")%>'></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td width="500">
                                Connection: &nbsp;<asp:TextBox runat="server" ID="site_vpn_type" Text='<%# Bind("site_vpn_type")%>'></asp:TextBox><br />
                                Username: &nbsp;<asp:TextBox runat="server" ID="site_vpn_username" Text='<%# Bind("site_vpn_username")%>'></asp:TextBox><br />
                                Password: &nbsp;<asp:TextBox runat="server" ID="site_vpn_password" Text='<%# Bind("site_vpn_password")%>'></asp:TextBox>
                            </td>
                            <td width="500">
                                Host: &nbsp;<asp:TextBox runat="server" ID="site_host" Text='<%# Bind("site_host")%>'></asp:TextBox>
                                <hr />
                                Notes: &nbsp;<asp:TextBox runat="server" ID="Label1" Text='<%# Bind("site_notes")%>'></asp:TextBox>
                            </td>
                        </tr>
                    </table>
                    </EditItemTemplate>
                    <ItemTemplate>
                    <table border="0" cellpadding="1" width="1000">
                        <tr>
                            <td align="center" colspan="2" width="1000">
                                <asp:Label runat="server" ID="site_id" Text='<%# Bind("site_id") %>'></asp:Label>&nbsp;-&nbsp;
                                <asp:Label runat="server" ID="site_name" Text='<%# Bind("site_name") %>' 
                                    ></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td width="500">
                                Connection: &nbsp;<asp:Label runat="server" ID="site_vpn_type" 
                                    Text='<%# Bind("site_vpn_type") %>'></asp:Label><br />
                                Username: &nbsp;<asp:Label runat="server" ID="site_vpn_username" Text='<%# Bind("site_vpn_username")%>'></asp:Label><br />
                                Password: &nbsp;<asp:Label runat="server" ID="site_vpn_password" Text='<%# Bind("site_vpn_password")%>'></asp:Label>
                            </td>
                            <td width="500">
                                Host: &nbsp;<asp:Label runat="server" ID="site_host" Text='<%# Bind("site_host")%>'></asp:Label>
                                <hr />
                                Notes: &nbsp;<asp:Label runat="server" ID="Label1" Text='<%# Bind("site_notes")%>'></asp:Label>
                            </td>
                        </tr>
                    </table>
                    </ItemTemplate>
            </asp:TemplateField>
            </Columns>
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#2461BF" />
            <AlternatingRowStyle BackColor="White" />
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:ConnMgrCS %>" 
            DeleteCommand="DELETE FROM [hd_site] WHERE [site_id] = @site_id" 
            InsertCommand="INSERT INTO [hd_site] ([site_id], [site_name], [site_vpn_type], [site_vpn_username], [site_vpn_password], [site_host], [site_notes]) VALUES (@site_id, @site_name, @site_vpn_type, @site_vpn_username, @site_vpn_password, @site_host, @site_notes)" 
            SelectCommand="SELECT * FROM [hd_site] WHERE ([site_id] = @site_id)" 
            UpdateCommand="UPDATE [hd_site] SET [site_name] = @site_name, [site_vpn_type] = @site_vpn_type, [site_vpn_username] = @site_vpn_username, [site_vpn_password] = @site_vpn_password, [site_host] = @site_host, [site_notes] = @site_notes WHERE [site_id] = @site_id">
            <SelectParameters>
                <asp:QueryStringParameter Name="site_id" QueryStringField="site" 
                    Type="String" />
            </SelectParameters>
            <DeleteParameters>
                <asp:Parameter Name="site_id" Type="String" />
            </DeleteParameters>
            <UpdateParameters>
                <asp:Parameter Name="site_name" Type="String" />
                <asp:Parameter Name="site_vpn_type" Type="String" />
                <asp:Parameter Name="site_vpn_username" Type="String" />
                <asp:Parameter Name="site_vpn_password" Type="String" />
                <asp:Parameter Name="site_host" Type="String" />
                <asp:Parameter Name="site_notes" Type="String" />
                <asp:Parameter Name="site_id" Type="String" />
            </UpdateParameters>
            <InsertParameters>
                <asp:Parameter Name="site_id" Type="String" />
                <asp:Parameter Name="site_name" Type="String" />
                <asp:Parameter Name="site_vpn_type" Type="String" />
                <asp:Parameter Name="site_vpn_username" Type="String" />
                <asp:Parameter Name="site_vpn_password" Type="String" />
                <asp:Parameter Name="site_host" Type="String" />
                <asp:Parameter Name="site_notes" Type="String" />
            </InsertParameters>
        </asp:SqlDataSource>
        <asp:Panel ID="pnlSearchResults" runat="server" style="display:none" CssClass="modalPopup">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
            <asp:GridView ID="gvSiteSelect" runat="server" AutoGenerateColumns="False" 
                CellPadding="4" DataKeyNames="site_id" DataSourceID="SqlDataSource2" 
                ForeColor="#333333" GridLines="None" OnSelectedIndexChanging="goToSite">
                <RowStyle BackColor="#EFF3FB" />
                <Columns>
                    <asp:BoundField DataField="site_id" HeaderText="site_id" ReadOnly="True" 
                        SortExpression="site_id" />
                    <asp:BoundField DataField="site_name" HeaderText="site_name" 
                        SortExpression="site_name" />
                </Columns>
                <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                <EditRowStyle BackColor="#2461BF" />
                <AlternatingRowStyle BackColor="White" />
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
                ConnectionString="<%$ ConnectionStrings:ConnMgrCS %>" 
                SelectCommand="SELECT [site_id], [site_name] FROM [hd_site] WHERE (([site_id] LIKE '%' + @site_id + '%') OR ([site_name] LIKE '%' + @site_id + '%'))">
                <SelectParameters>
                    <asp:FormParameter FormField="txtSiteSearch" Name="site_id" Type="String" />
                </SelectParameters>
            </asp:SqlDataSource>
            <br />
            </ContentTemplate>
            </asp:UpdatePanel>
                <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
        </asp:Panel> 
    </div>
    </form>
</body>
</html>

Open in new window

codebehind file:

using System.Data;
using System.Data.SqlClient;
using System.Collections.Generic;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Configuration;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void showSearchResults(object sender, EventArgs e)
    {
        string boxcontents = txtSiteSearch.Text.ToString();
        SqlDataSource2.SelectParameters["site_id"].DefaultValue = boxcontents;
        this.mpSearchResults.Show();
    }

    protected void goToSite(object sender, GridViewSelectEventArgs e)
    {
        GridViewRow row = gvSiteSelect.Rows[e.NewSelectedIndex];
        string site = row.Cells[1].Text.ToString();
        Response.Redirect("Default.aspx?site=" + site);
    }
}

Open in new window

0
Comment
Question by:rondre
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 

Author Comment

by:rondre
ID: 35113586
Now it appears that it's working in firefox but not in IE - any explanations?
0
 
LVL 14

Accepted Solution

by:
CtrlAltDl earned 500 total points
ID: 35734300
Instead of making Button1 visible="false" try hiding it with CSS:
style="display:none"

I'm guessing that visible="false" is causing asp.net not to render the button at all, so you are unable to trigger the button since it doesn't exist, so if you hide it with CSS it will be there, but it will be hidden.

Check out this blog post:
http://aspdotnet-suresh.blogspot.com/2011/03/how-to-show-modalpopup-to-edit-gridview.html
0
 

Author Closing Comment

by:rondre
ID: 35738923
Thanks - that worked great.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled
This article discusses how to implement server side field validation and display customized error messages to the client.
In this video, viewers will be given step by step instructions on adjusting mouse, pointer and cursor visibility in Microsoft Windows 10. The video seeks to educate those who are struggling with the new Windows 10 Graphical User Interface. Change Cu…
There's a multitude of different network monitoring solutions out there, and you're probably wondering what makes NetCrunch so special. It's completely agentless, but does let you create an agent, if you desire. It offers powerful scalability …

627 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question