Question

I have a jQuery dialog that pops up when a button is pressed. There I have a GridView which contains results from my database. I want to make the GridView to display the results that I have searched for. Therefore, I added a asp:textbox and a asp:button, the idea is that when I press the button, it will call the function that connects with my database and then display the results in the GridView. So basically, when the jQuery pops it should display an empty GridView(or none) and then when I search for something it should display the result.
Here is my main.aspx code:

 <div id="ViewPlaces">
                <asp:TextBox ID="viewPlaceTextbox"  runat="server" placeholder="Search..." />
                <asp:Button ID="viewPlaceBtn" OnClick="getSearchedPlace" runat="server" Text="Search for place" />
                        <asp:GridView ID="GridView1" AllowPaging="true" GridLines="None" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle="alt" runat="server" AllowSorting="True"
                            AutoGenerateColumns="False"
                            Width="750px"
                            CausesValidation="False" ShowHeaderWhenEmpty="true" ShowHeader="true">
                           <Columns>
                                <asp:BoundField DataField="place_id" HeaderText="Id" ReadOnly="True" />
                                <asp:BoundField DataField="place_name" HeaderText="Name" />
                                <asp:BoundField DataField="place_city" HeaderText="City" />
                                <asp:BoundField DataField="place_land" HeaderText="Land" />
                                <asp:BoundField DataField="place_desc" HeaderText="Description" />                        
                            </Columns>
                        </asp:GridView>
            </div>

Here is the jQuery code:

$('#ViewPlaces').dialog(dialogOpts5);
        $.fx.speeds._default = 500;
        $(function () {
            $("#ViewPlaces").dialog({
                autoOpen: false,
                show: "blind",
                hide: "explode",
            });

            $("#viewallplaces").click(function () {
                $("#ViewPlaces").dialog("open");
                return false;
            });
        });

In my c# code the problem is that if I don’t call the function for getting the results from the database in the Page_Load, then the GridView is not loaded when I press the button for opening the jQuery dialog. Otherwise, the function looks like this:

 protected void getPlaces()
{
    List<Place> pl = new List<Place>();
    pl = functions.getPlaces();
    GridView1.DataSource = pl;
    GridView1.DataBind();
}

And the getPlaces() function returns a list of the places. That is not a problem, it works and I have tested it.

Answer 1

in this scenario you will either use the webforms controls like gridview and updatepanel and forego jquery, or you will use basic HTML elements and wire up jquery to call an endpoint (url) and render the result client side. But not both.