ajax control usage in a given scenario

Question

Hi,

on pageload a panel must not be visible, onclick on a button some process will go on, that time i need to show the process in some notation and once the process is over i need to display the panel

Please help me.

Answer 1

You have a couple of options. One is to set the contents of the panel via Document.getElementById("panel_id").innerHTML = "Your content here..."

Another is to use CSS elements to have the panel hidden at load time. Then you change that attribute of the panel in your onclick code. For more details: http://www.w3schools.com/CSS/pr_class_visibility.asp

Answer 2

If you're using ajax, you have two main options:

1. Wrap your controls in an ASP.NET UpdatePanel control, and deal with the panel visibility in the code-behind.
2. Use javascript (jQuery recommended) to make ajax requests to WebMethods in the code behind, and when the request is successful, update the UI from the client-side.

I'd recommend option 1 for simplicity if you are new to ASP.NET/AJAX as it's easier to implement. To do this, you would have something like this:

Markup:

<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Panel ID="MyPanel" runat="server" Visible="false">
            <!-- panel contents here -->
        </asp:Panel>
        <asp:Button ID="MyButton" runat="server" OnClick="MyButton_Click" Text="Do Something"/>
    </ContentTemplate>
</asp:UpdatePanel>

Code-Behind:

protected void MyButton_Click(object sender, EventArgs e)
{
    //do something when the button is clicked

    //set the panel visible so that when this round trip is complete, the panel will show
    MyPanel.Visible = true;
}

The above would use ajax to process the button click event and you could do whatever you need and then set the panel to visible.