Grid view within Modal PopUp Extender?

Question

I'm developing a mapping application in ASP.net C#.

I have a textbox and button which searches a DB on postcode and returns the results into a Grid view on my aspx page...

public partial class _Default : System.Web.UI.Page
{
// SDE connection string to extract postcode from ADDRESS (sde) table. 

private SqlConnection m_sqlConn;

protected void Page_Load(object sender, EventArgs e)
{

}

private void ShowMsg(string strMessage)
{
}

protected void Button1_Click(object sender, EventArgs e)
{
    try
    {

        if (txtPostCode.Text.Length > 0)
        {
            m_sqlConn = new SqlConnection();
            m_sqlConn.ConnectionString = "Data Source=Server1;Initial Catalog=sde;User
            ID=Tom;Password = Password1";

            SqlCommand sqlCmd = new SqlCommand();
            sqlCmd.Connection = m_sqlConn;
            sqlCmd.CommandType = System.Data.CommandType.Text;
            sqlCmd.CommandText = "SELECT * FROM ADDRESS"
                                        + " WHERE Postcode = '" + txtPostCode.Text + "'";

            m_sqlConn.Open();

            SqlDataReader reader = sqlCmd.ExecuteReader();

            GridView1.DataSource = reader;
            GridView1.DataBind();

        }

        else
        {
            ShowMsg("Error - No Postal Addresses Returned");
        }
    }
    catch (Exception ex)
    {
        ShowMsg("Error - " + ex.Message);
    }

}

            private bool CloseDB()
{
    try
    {
        m_sqlConn.Close();
        return (true);
    }
    catch (Exception ex)
    {
        return (false);
    }

}    

}

This works fine. I now want to set the Data Grid within a Modal PopUp whereby the user clicks the search button and the results table is returned modally. I've tried to set it up with a fake ControlID button like so but no luck...

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

 <asp:Button id="BtnFake"  runat="server" Style="display: none"/>

<table id="ModalGrid">

<asp:GridView ID="GridView1" runat="server">

 </asp:GridView>

 <asp:Button id="Button2"  runat="server" Text="OK" />

 </table>

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
    TargetControlID="BtnFake" PopupControlID="ModalGrid" DropShadow="false"       
    BackgroundCssClass="ModalBackground"
    CancelControlID="BtnOK" BehaviorID="ModalGrid"       RepositionMode="RepositionOnWindowScroll">
     </cc1:ModalPopupExtender>

Any ideas? sure I'm doing something obvious wrong. Cheers.

Answer 1

1. In a scenario where you set a modal popups TargetControlId to a dummy field you have to explicitly call ModalPopupExtender1.Show(); to display the modal.
2. Where is BtnOK? Shouldn't it be Button2?

Tip - using a button for a dummy field is a bit of an overkill, use something simple like a <span> instead

Below is a working example if you get stuck, but I believe calling ModalPopupExtender1.Show(); should sort you out:

ASPX:

<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="sm" runat="server">
</asp:ToolkitScriptManager>
<span ID="dummy" runat="server" />
Post code:&nbsp;<asp:TextBox ID="txtPostcode" runat="server" /><br />
<asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="Search" />
<asp:Panel runat="server" ID="modalPanel" CssClass="modalPanel">
    <asp:GridView ID="GridView1" runat="server">
    </asp:GridView>
    <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</asp:Panel>
<asp:ModalPopupExtender id="ModalPopupExtender1" runat="server" TargetControlID="dummy"
    PopupControlID="modalPanel" BackgroundCssClass="ModalBackground"
     CancelControlID="btnCancel" BehaviorID="ModalGrid">
 </asp:ModalPopupExtender>
</form>

Code behind:

protected void Search(object sender, EventArgs e)
{
    List<PostalCode> codes = new List<PostalCode>()
    {
        new PostalCode{ Code="000",Province="District 0" },
        new PostalCode{ Code="111",Province="District 1" }
    };

    string code = txtPostcode.Text;

    if (codes.Where(c => c.Code == code).Any())
    {
        GridView1.DataSource = codes.Where(c => c.Code == code);
        GridView1.DataBind();
        ModalPopupExtender1.Show();
    }
}

Class I've used for testing:

public class PostalCode
{
    public string Code { get; set; }
    public string Province { get; set; }
}