Solved

Ajaxtoolkit Modalpopup help

Posted on 2011-03-10
3
678 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

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

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

Suggested Solutions

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
The Email Laundry PDF encryption service allows companies to send confidential encrypted  emails to anybody. The PDF document can also contain attachments that are embedded in the encrypted PDF. The password is randomly generated by The Email Laundr…
Are you ready to implement Active Directory best practices without reading 300+ pages? You're in luck. In this webinar hosted by Skyport Systems, you gain insight into Microsoft's latest comprehensive guide, with tips on the best and easiest way…

737 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