How do I combine jQuery and ASP.net to communicate enough to not refresh a page?

Question

I have an jQuery accordion for a form on an internal company website. They seriously want to stick with their ASP.net technology (I know I'd bark at them if an intern could do that reasonably).

Project description: Creating a basic CRM form

The first slide of the accordion has their basic input for recording contact information which will include a client we already have recorded. If the contact isn't already in the database and they try to use it, the accordion will move to the next slide and allow the person to fill out a form to record a new client. After that I compare the names to the database again, and show the user the similar names in a third accordion IF and ONLY IF results exist. (I know, redundant, but I want to save myself some duplicates, these are civil engineers they just put in what works as long as its not a bridge calculation)

Actual Problem: ASP.net codebehind takes care of the datasearching and displaying (for now) and jQuery/Javascript/HTML moves the accordion around. Since I only want the accordion to open the last slide if there are results - how do I get enough information from the serverside check of the database to do accordion movements conditionally, while still avoiding full postbacks and refreshes?

Also, I realize this is a little more cosmetic, but right now I do fadeins/fadeouts with jquery - I don't want this to look like jerky 1995 webpage loading with lots of refreshes. So keeping that to a minimum would be more than fantastic.

client.aspx (some of the javascript)

function pageLoad() {
        $("#dymslide").hide();
        var active = $("#accordion").accordion("option", "active");
        if (active = 2) {
            $("#dymslide").show(750);
        }
    }
    $(document).ready(function () {
        $("#ncfslide").hide();
        $("#dymslide").hide();
        $("#accordion").accordion({
            autoHeight: false,
            navigation: true,
            collapsible: true
        });
        $("#saveButton").click(function () {
            $("#dymslide").bind('load', function () {
                $("#Label2").bind('load', function () {
                    var isVisible = $("#Label2")[0].style.display == "block";
                    if (isVisible) {
                        $("#accordion").accordion("activate", 2);
                    }
                });
            });
        });
    });

client.aspx

<center>
                <p>
                    <br />
                    <asp:Label ID="tf" runat="server"></asp:Label>
                    <asp:Button ID="saveButton" runat="server" Text="Save Contact"/>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <asp:Button ID="cancelButton" runat="server" Text="Cancel" />
                </p>
            </center>
        </div>
    </div>
    <h3>
        <a href="#dym" name="dym">Did you mean?</a>
    </h3>
    <div>
        <div id="dymslide">
            <asp:UpdatePanel ID="up" runat="server">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="saveButton" EventName="Click" />
                </Triggers>
                <ContentTemplate>
                    <p>
                        <asp:Label ID="Label2" runat="server"></asp:Label>
                    </p>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>

client.aspx.vb

Protected Sub saveButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles saveButton.Click
    If LikeNames(fNameValue.Text, lNameValue.Text) Then
        Label2.Style("display") = "block"
    Else
        Label2.Attributes.Add("display", "none")

    End If

End Sub

And yes I know - I won't be displaying results in a simple label eventually but as I haven't even gotten these basic things working I don't think I have to worry about it quite yet.

Answer 1

I would use jQuery.ajax() to call a ASP.Net Webservice and update the form. This webservice might return JSON for example.

Also I would remove the UpdatePanel and trigger. Personally I've found these to usually be more trouble then they're worth. Stick with the direct jQuery.ajax() type calls.

Not sure if you've done much ASP.Net/JQuery but here is a good tutorial to start with.

PS.

1. I'm not sure the accordian is the right widget for this. Does it feel right to you? Accordians are usually used for collapsible menus, not workflow ( which seems like what you're doing ). I would use a series of forms for that.

2. Here is an example of a jQuery Wizard. You don't have to use that plugin, but I wanted to show the general concept. Each step in the wizard does not have to be a new page. You can use AJAX to update the current step while staying on the same page.