Call a code-behind function with ajax with refresh?

Question

Searched a bit, couldn't find a clear answer.

I have a big HTML table with numbers in it. I have a selector (radiobuttonlist) that the user can click if they wants to see the table in $ or days.

Right now it works perfectly but the page refreshes because I'm calling a code-behind function (RefreshTable) every time the user clicks on one of the two radiobutton since it changes the format and needs new calculation done by the RefreshTable function.

Is there any ways I can call that function without refreshing the page using ajax or something? The function has only one parameter: ProjectID, it's coded in VB.NET and we're using ASP.NET

Here's the table code from the .ASPX page, it's only the shell, everything is added thru a VB.NET method called when the RadioButton is changed (autopostback=true), so we check which one is selected and execute the VB.NET method to populate the table. (code of the function is below)

note: changed some column\var name since it's sensitive info, but you get the big picture.

  <td>
    <asp:RadioButtonList  RepeatDirection="Horizontal" id="rdiolist" onclick="alert('hello');" runat="server" RepeatLayout="flow" AutoPostBack="true">
   <asp:ListItem selected="true"> $ </asp:ListItem>
   <asp:ListItem> Days </asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
</table>
    
<br />

    <table id="tblBudgetRessourceVP" runat="server" class="ProjetTable ProjetTableHover">
    <thead>
    <tr>
    <th style="width:80px">COLUMN 1</th>
    <th style="width:120px">COLUMN 2/th>
    <th style="width:120px">COLUMN 3</th>
    <th style="width:120px">COLUMN 4</th>
    <th style="width:120px">COLUMN 5</th>
    <th style="width:120px">COLUMN 6</th>
    <th style="width:120px">COLUMN 7</th>
    <th style="width:120px">COLUMN 8</th>
    </tr>
    </thead>
        
    </table>

The code behind method, that's what I want to call without a postback, we want to remove every page refresh. I'll post just a sample of the function since it's pretty repetitive since it does it for every column. I replaced some variables names with random name since it's pretty sensitive data.

Private Sub FillTable(ByVal vProjetID As String)
    Dim sqlquery As String = "SELECT SUM(EFFORT_RESRC.NB_JP_PLANF) as Planifie, SUM(EFFORT_RESRC.NB_JP_DDC) as DDC, SUM(EFFORT_RESRC.NB_JP_REEL) as Reel, SUM(EFFORT_RESRC.NB_JP_RESTN) as RAF, " & _
                "SUM(EFFORT_RESRC.NB_JP_REVS) as Revise, SUM(EFFORT_RESRC.NB_JP_PROJT) as Projete, SUM(EFFORT_RESRC.ECART_REVS_PROJT) as Ecart,RESRC.ID_VP , VICE_PRESD.DE_VP, TA_COMPS.TAUX " & _
                "FROM EFFORT_RESRC INNER JOIN " & _
                "TA_COMPS ON EFFORT_RESRC.COMPOSANTEID = TA_COMPS.COMPOSANTEID INNER JOIN " & _
                "RESRC ON EFFORT_RESRC.NO_EMPLY = RESRC.NO_EMPLY INNER JOIN " & _
                "VICE_PRESD ON RESRC.ID_VP = VICE_PRESD.ID_VP " & _
                "WHERE EFFORT_RESRC.PROJETID = '" & vProjetID & "' AND EFFORT_RESRC.ANNEE = '" & dd_ressourceprojet_annee.SelectedValue & "' AND TA_COMPS.ANNEE = '" & dd_ressourceprojet_annee.SelectedValue & "' " & _
                "GROUP BY RESRC.ID_VP, VICE_PRESD.DE_VP, TA_COMPS.TAUX " & _
                "ORDER BY VICE_PRESD.DE_VP"

    Dim dtRessource As New DataTable
    Master.GetDataTable(dtRessource, sqlquery)

    While (tblBudgetRessourceVP.Rows.Count > 1)
        tblBudgetRessourceVP.Rows.RemoveAt(1)
    End While

    Dim tr As HtmlTableRow
    Dim td As HtmlTableCell


    For Each ressource As DataRow In dtRessource.Rows

        If ressource("DE_VP") <> curStrVP And curStrVP <> String.Empty Then
            tr = New HtmlTableRow
        
                td = New HtmlTableCell
                td.InnerHtml = curStrVP
                tr.Cells.Add(td)

                td = New HtmlTableCell
            td.Attributes.Add("class", "budget")
            If rdiolist.SelectedIndex = 0 Then // Check the selector, if $ or Days display
                td.InnerHtml = Format(curPlan, "### ### ### ### ### ##0.00$")
            Else
                td.InnerHtml = Format(curPlan, "####")
            End If
            totPlan += curPlan
            tr.Cells.Add(td)  // Add the cell to the table.

            td = New HtmlTableCell
            td.Attributes.Add("class", "budget")
            
            If rdiolist.SelectedIndex = 0 Then // Check if JP or $ is selected for display format.
                td.InnerHtml = Format(curDDC, "### ### ### ### ### ##0.00$")
            Else
                td.InnerHtml = Format(curDDC, "####")
            End if
            totDDC += curDDC
            tr.Cells.Add(td)

            td = New HtmlTableCell
            td.Attributes.Add("class", "budget")
            If rdiolist.SelectedIndex = 0 Then  // Check if JP or $ is selected for display format.
                td.InnerHtml = Format(curRevise, "### ### ### ### ### ##0.00$")
            Else
                td.InnerHtml = Format(curRevise, "####")
            End If
            totRevise += curRevise
            tr.Cells.Add(td)

Thanks everyone.

Answer 1

Sorry I'm there is a little delay to answer, as I haven't touched VB since so loooong.

Now suppose you have a div (can be a button or any html element) on clicking which you want to bring data from server without making a full postback. Following is the HTML setup.

<div id="click">click</div>
<div id="dvTest"></div>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/json2.js" type="text/javascript"></script>

Following is the jquery code that we will use:

<script type="text/javascript">
    $(function () {
        $("#click").click(function () {
            var o = new Object();
            o.ProjectId = 1;
            var x = JSON.stringify(o);
            $.ajax({
                url: 'Default.aspx/GetData',
                type: 'POST',
                dataType: 'JSON',
                contentType: 'application/json;charset=utf-8;',
                data: x,
                success: function (data) {
                    data = JSON.parse(data);
                    var d=data.hasOwnProperty("d") ? data.d : data;
                    //as we are returning fully rendered table
                    //we can directly set html of container div
                    $("#dvTest").html(d);
                },
                error: function (a, b, c) {
                    alert(b);
                }
            });
        });
    });
</script>

This is what you need to write in your codebehind file (aspx.vb file). This public shared method decorated with WebMethod attribute is called PageMethod. Now as HtmlTable object cannot be automatically serialized we need to use an HtmlWriter to render it to as StringBuilder and return complete HTML to client side:

<WebMethod()>
Public Shared Function GetData(ByVal ProjectId As String) As String

    Dim tbl As New HtmlTable
    Dim tr As HtmlTableRow
    Dim td As HtmlTableCell

    'instead of these loops you will polulate table rows/cells
    'based on the data returned in your data table
    For I As Integer = 1 To 5
        tr = New HtmlTableRow
        For j As Integer = 1 To 5
            td = New HtmlTableCell
            td.InnerHtml = "Cell " & I & j
            tr.Cells.Add(td)
        Next
        tbl.Rows.Add(tr)
    Next

    Dim sb As New StringBuilder
    Dim sr As New StringWriter(sb)
    Dim hr As New HtmlTextWriter(sr)
    tbl.RenderControl(hr)
    Return sb.ToString()
End Function

EDIT:- ASP.Net returns JSON objects by serializing .Net objects. But this approach does not works with HtmlTable objects as they do not implement InnerHTML and it throws exception there.

Answer 2

Using AJAX you could create an Generic Handler (assuming you are using VS 2008 or up). A generic handler will have .ashx extension instead of a .aspx extension. Essentially it allows you to control the output whereas a web form .aspx has the UI component and the code-behind. .ashx files are essentially blank with a a reference to your code-behind. In your code-behind you can write the code you need an output what you need for your AJAX response.