changing visibility contentplaceholder asp.net not working immediately

Question

I have a simple asp.net webpage that contains of 2 RadioButton lists. When the form is submitted some more complex code is executed, which takes some time (5-10 seconds) to execute.

I want to simply change the visibility between 2 ContentPlaceHolder before executing that code. The switching works but only after the complex code is executed.

The result is that the page freezes and changes after some time.

My aspx code:

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:PlaceHolder ID="requestpage" runat="server" Visible="true">
    <p>
    </p>
    <h1>
        Navigatie update</h1>
    <p>
    </p>
    <div style="text-align: left; width: 300px">
        <p>
            Kies een site</p>
    </div>
    <p>
        <asp:RadioButtonList ID="pubtargetid" runat="server">
        </asp:RadioButtonList>
    </p>
    <br />
    <br />
    <div style="text-align: left; width: 300px">
        <p>
            Kies een taal</p>
    </div>
    <p>
        <asp:RadioButtonList ID="chosenLanguage" runat="server">
        </asp:RadioButtonList>
    </p>
    <p style="color: red">
        <asp:Label ID="errorMessage" runat="server"> </asp:Label></p>
    <p>
        <asp:Button Text="Start update" OnClick="Submit" runat="server" />
    </p>
</asp:PlaceHolder>
<asp:PlaceHolder ID="responsepage" runat="server" Visible="False">
        <p>
        </p>
        <h1>
            Navigatie update</h1>
        <p>
            Navigatie wordt geüpdate</p>
        <p>
</asp:PlaceHolder>

My code behind:

using System;
using System.Web.UI.WebControls;
using System.Threading;
using Tridion.ContentManager.CommunicationManagement;
using Tridion.ContentManager;

namespace CustomPages
{
    public partial class Navigation : System.Web.UI.Page
    {
        private Session session;
        protected void Page_Load(object sender, EventArgs e)
        {
            session = new Session(Request.ServerVariables["LOGON_USER"]);
            Response.BufferOutput = true;
            Response.Flush();

            if (!Page.IsPostBack)
            {
                var targets = session.SystemManager.GetPublicationTargets();
                pubtargetid.Items.Clear();
                foreach (PublicationTarget t in targets)
                {
                    var radio = new ListItem(t.Title, t.Id);
                    pubtargetid.Items.Add(radio);
                }
                chosenLanguage.Items.Clear();
                var nl = new ListItem("NL", "NL");
                var fr = new ListItem("FR", "FR");
                chosenLanguage.Items.Add(nl);
                chosenLanguage.Items.Add(fr);
            }
        }

        public void Submit(object sender, EventArgs e) // --> when submitting the form
        {
            if (pubtargetid.SelectedIndex != -1 && chosenLanguage.SelectedIndex != -1)
            {
                requestpage.Visible = false;
                responsepage.Visible = true;
                Response.Flush();

                String pageId ="";

                String target = pubtargetid.SelectedItem.Value;
                String lang = chosenLanguage.SelectedItem.Value;

                //some code//

                var nav = new Automations.Navigation(session,page);
                nav.CheckPage(pageId, target);         //  --> complex piece of code
            }
            else
            {
                errorMessage.Text = "";
                if (pubtargetid.SelectedIndex == -1)
                {
                    errorMessage.Text += "Choose a publication target. \n";
                }
                if (chosenLanguage.SelectedIndex == -1)
                {
                    errorMessage.Text += "Choose a language.";
                }
            }
        }
    }
}

In short: I want to let the visibility change before executing that complex code.

I tried diiferent options; like trying to flush the Respone but I was unsuccessful and with Response.BufferOutput = false and another time = true, but still unsuccessful!

Any help with this issue would be very appreciated!

Answer 1

You would have to do two things

Replace your PlaceHolder with Panel. (because PlaceHolder doesn't render to any HTML tag it just renders it's content as is, But we have to get some parent tag so that we can do hide show client side, So use Panel which is rendered as a div).

Do it like this.

<asp:Panel runat="server" ID="Panel1" Style="display: none;">
     Place Holder one
</asp:Panel>
<asp:Panel runat="server" ID="Panel2">
     Place Holder two
</asp:Panel>
<asp:Button runat="server" ID="btn" OnClientClick="hideOne();" 
            OnClick="server_click" />

<script type="text/javascript" language="javascript">
function hideOne() {
    var one = document.getElementById('<%= Panel1.ClientID %>');
    one.style.display = 'block';
    var two = document.getElementById('<%= Panel2.ClientID %>');
    two.style.display = 'none';
}
</script>

---

protected void server_click(object sender, EventArgs e)
{
   Response.Write("Hid");
}

Basically you should perform that hide functionality on client side before executing that lengthy code for the effect you need