Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Ajaxtoolkit Modalpopup help

Posted on 2011-03-10
3
Medium Priority
?
695 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
  • 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 2000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This Micro Tutorial will teach you how to add a cinematic look to any film or video out there. There are very few simple steps that you will follow to do so. This will be demonstrated using Adobe Premiere Pro CS6.
Integration Management Part 2
Suggested Courses

927 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