c#asp.net gridview asp.net-ajax modalpopupextender

ModalPopUp as User Control ASP.NET C#

Im trying build a ModalPopUp as Control. Its have theses controls:

TextBox- placeholder for filter
Button - Search Button
Button - Cancel Button
GridView - To show results

<ajax:toolkitscriptmanager id="searchPopUp" runat="server"></ajax:toolkitscriptmanager> 
<asp:Panel
    BackColor="White"
    ID="searchPanel"
    CssClass="modalPopup"
    runat="server"
    Style="display: table">

    <div class="myContainer">
        <uc1:ScreenSearch
            runat="server"
            ID="mySearch" />

        <asp:Button ID="btnToHide" runat="server" Text="Tohide" Style="display: none" />
        <asp:Button ID="btnToShow" runat="server" Text="ToShow" Style="display: none" />
    </div>
    </asp:Panel>

<ajax:ModalPopupExtender 
    ID="ModalPopUpSearch" 
    runat="server"
    TargetControlID="btnToShow"
    PopupControlID="searchPanel"
    CancelControlID="btnToHide"
    DropShadow="true"
    BackgroundCssClass="modalBackground">
</ajax:ModalPopupExtender>

code behind of : uc1:ScreenSearch

protected void Page_Load(object sender, EventArgs e){...}

protected void fillGridView()
        {
            myDao dao = new myDao();

            DataSet ds = new DataSet();
            ds = dao.retornarPesquisa(txtFilter.Text); //return data source
            DataTable dt = new DataTable();

            gv.DataSource = ds;
            gv.DataBind();
        }

uc1:ScreenSearch is my control that contain a TextBox, Button(perform search calling the method: fillGridView()) and GridView.

When I try perform the search click Binding the GridView. What the best way to get results in this GridView of my User Control?

Solution

You haven't posted any of your code so it's hard to tell why it's not working.Below is a working example which displays a Bootstrap modal popup -> allows a user to search -> displays the results in a GridView inside the modal popup:

Code behind:

public class Person
{
    public string Name { get; set; }
    public string Surname { get; set; }
}

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

    protected void btnSearch_Click(object sender, EventArgs e)
    {
        //Use txtSearch.Text to lookup the data you want to bind to the GridView, mine is hardcoded for the sake of simplicity
        var p1 = new Person { Name = "Name 1", Surname = "Surname 1" };
        var p2 = new Person { Name = "Name 2", Surname = "Surname 2" };
        GridView1.DataSource = new List<Person> { p1, p2 };
        GridView1.DataBind();
        ScriptManager.RegisterStartupScript(this, this.GetType(), "myModal", "showPopup();", true);
    }
}

.ASPX:

<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script type="text/javascript">

        //It'svery important that showPopup() is outside of jQuery document load event
        function showPopup() {
            $('#myModal').modal('show');
        }

        $(function () {
            $(".show").click(function () {
                showPopup();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <a href="#" class="show">Show Popup</a>
        <div id="myModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Details</h4>
                    </div>
                    <div class="modal-body">
                        <asp:TextBox ID="txtSearch" runat="server">
                        </asp:TextBox><asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" />
                        <br /><br />
                        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                            <Columns>
                                <asp:BoundField DataField="Name" HeaderText="Name" />
                                <asp:BoundField DataField="Surname" HeaderText="Surname" />
                                <asp:TemplateField HeaderText="User Details">
                                    <ItemTemplate>
                                        <a class="details" href="#" data-name='<%# Eval("Name") %>' data-surname='<%# Eval("Surname") %>'>Details</a>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </asp:GridView>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>

Output: