Using AJAX to Automatically refresh a page with ASP.NET

Question

I am trying to figure out how to use AJAX to make my webform automatically update. In my project, I have a dropdownlist that has models of cars. When one of them is selected, and a button is clicked, the program fill a gridView with the records received from the SQL statement. I was wondering if there was any way to be able to make this refresh automatically, and if so how? Here's my asp.net code (code-behind is c#).

    <form id="form1" runat="server">
<div>
    <asp:GridView ID="gdvCars" runat="server" AutoGenerateColumns="False" DataSourceID="carConnection">
        <Columns>
            <asp:BoundField DataField="VIN" HeaderText="VIN" SortExpression="VIN" />
            <asp:BoundField DataField="Model" HeaderText="Model" SortExpression="Model" />
            <asp:BoundField DataField="Year" HeaderText="Year" SortExpression="Year" />
            <asp:BoundField DataField="Color" HeaderText="Color" SortExpression="Color" />
            <asp:BoundField DataField="MSRP" HeaderText="MSRP" SortExpression="MSRP" />
            <asp:BoundField DataField="Price_Sold" HeaderText="Price_Sold" SortExpression="Price_Sold" />
        </Columns>
    </asp:GridView>
    <asp:DropDownList ID="ddlTables" runat="server" OnSelectedIndexChanged="ddlTables_SelectedIndexChanged">
        <asp:ListItem>Select All</asp:ListItem>
        <asp:ListItem Value="SRXConnection">SRX</asp:ListItem>
        <asp:ListItem Value="CTSConnection">CTS</asp:ListItem>
        <asp:ListItem Value="CTSVConnection">CTS-V</asp:ListItem>
        <asp:ListItem Value="STSConnection">STS</asp:ListItem>
        <asp:ListItem Value="CruzeConnection">Cruze</asp:ListItem>



    </asp:DropDownList>



     <asp:SqlDataSource ID="carConnection" runat="server" ConnectionString="<%$ ConnectionStrings:newKroegedlConnectionString %>" SelectCommand="SELECT [VIN], [Model], [Year], [Color], [MSRP], [Price Sold] AS Price_Sold FROM [tCar]"></asp:SqlDataSource>
    <asp:SqlDataSource ID="SRXConnection" runat="server" ConnectionString="<%$ ConnectionStrings:newKroegedlConnectionString %>" SelectCommand="SELECT [VIN], [Model], [Color], [Year], [MSRP], [Price Sold] AS Price_Sold FROM [tCar] WHERE ([Model] = @Model)">
        <SelectParameters>
            <asp:Parameter DefaultValue="SRX" Name="Model" Type="String" />
        </SelectParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="CTSConnection" runat="server" ConnectionString="<%$ ConnectionStrings:newKroegedlConnectionString %>" SelectCommand="SELECT [VIN], [Model], [Color], [Year], [MSRP], [Price Sold] AS Price_Sold FROM [tCar] WHERE ([Model] = @Model)">
        <SelectParameters>
            <asp:Parameter DefaultValue="CTS" Name="Model" Type="String" />
        </SelectParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="CTSVConnection" runat="server" ConnectionString="<%$ ConnectionStrings:newKroegedlConnectionString %>" SelectCommand="SELECT [VIN], [Model], [Color], [Year], [MSRP], [Price Sold] AS Price_Sold FROM [tCar] WHERE ([Model] = @Model)">
        <SelectParameters>
            <asp:Parameter DefaultValue="CTS-V" Name="Model" Type="String" />
        </SelectParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="STSConnection" runat="server" ConnectionString="<%$ ConnectionStrings:newKroegedlConnectionString %>" SelectCommand="SELECT [VIN], [Model], [Color], [Year], [Price Sold] AS Price_Sold, [MSRP] FROM [tCar] WHERE ([Model] = @Model)">
        <SelectParameters>
            <asp:Parameter DefaultValue="STS" Name="Model" Type="String" />
        </SelectParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="CruzeConnection" runat="server" ConnectionString="<%$ ConnectionStrings:newKroegedlConnectionString %>" SelectCommand="SELECT [VIN], [Model], [Color], [Year], [MSRP], [Price Sold] AS Price_Sold FROM [tCar] WHERE ([Model] = @Model)">
        <SelectParameters>
            <asp:Parameter DefaultValue="Cruze" Name="Model" Type="String" />
        </SelectParameters>
    </asp:SqlDataSource>






    <asp:Button ID="btnChangeView" runat="server" Text="Button" OnClick="btnChangeView_Click" />




</div>
</form>

You will need some sort of endpoint on the server to expose the data. This might be as simple as a generic handler (.ashx) that retrieves the data and formats it as JSON. Or you might use ASP.NET MVC or Web API to expose this data. Then it's just a matter of wiring it up on the client to make your AJAX calls (preferably with the help of a tool) to get the data, then convert the data to HTML and add it to the DOM. — mason, Apr 06 '17 at 15:46
See [How to implement real time data for a web page](http://stackoverflow.com/questions/25829343). Even if you don't need real time, the same principles apply. In that question I compare a couple of different ways to do it: UpdatePanel, jQuery, and SignalR. — mason, Apr 06 '17 at 15:48

Daniel AG · Answer 1 · 2017-04-06T15:03:44.533

-1

You could put the gridview, dropdownlist and your button inside an update panel. That will generate a callback that will update only those controls.

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
               YOUR CONTROLS HERE
            </ContentTemplate>
        </asp:UpdatePanel>

edited Apr 06 '17 at 15:03

answered Apr 06 '17 at 14:57

Daniel AG

320
1
9

How would you do that? I've never used an Update Panel before – JimmyDean Apr 06 '17 at 14:58
Would you use AJAX for this? I have to use AJAX for the refreshing – JimmyDean Apr 06 '17 at 15:11
@JimmyDean Please please please do not use UpdatePanel. They're extremely difficult to get working properly, they often cause confusion with the page lifecycle. They're a leaky abstraction. They refresh everything, even the bits that haven't changed. This wastes bandwidth and CPU. – mason Apr 06 '17 at 15:44
I've used it successfully on several projects, but to each his own. – Daniel AG Apr 06 '17 at 16:13
@DanielAG I've used it successfully on several projects too. That does not invalidate any of the negatives that I just pointed out. – mason Apr 06 '17 at 18:56

Using AJAX to Automatically refresh a page with ASP.NET

1 Answers1