从JavaScript同步服务器端控件

Question

I have the following scenario:

I have two panels, with links to switch between the two, these links DON'T post back the page, they call some JavaScript code that fades in and out the panels, changing their visibility.

In either panel I have a button that posts back the page, what happens is, after I fade in the second panel, my viewstate is invalid and my postback fails.

Is there a way to make my viewstate valid from JavaScript synching the visibility of these two panels? Or do I have to postback for this to work? If so, can I postback without the page blinking in my face and nicely fade the panels?

EDIT: This is somewhat the code that I have, obviously I have a bunch of controls inside the divs

<div id="step_one" class="lt-step-1">
    <asp:Button Text="Entrar" ID="btnPost1" OnClick="btnPost1_Click" ValidationGroup="Step1Val" CssClass="btn btn-primary lt-width-5" runat="server" />
    <a href="#" id="link_Step_Two"><span class="icon-repeat"></span>Step Two</a>
</div>
<div id="step_two" class="lt-step-2 hide">
    <asp:Button Text="Confirmar" ID="btnPost2" OnClick="btnPost2_Click" ValidationGroup="Step2Val" CssClass="btn btn-primary lt-width-5" runat="server" />
    <button type="button" id="btn_cancel_step_two" class="btn">Cancelar</button>
</div>

<script>
    require(['jquery', 'bootstrap'], function ($) {

        'use strict';

        var $stepOne = $('#step_one'),
            $stepTwo = $('#step_two'),
            $allSteps = $('[id^="step_"]'),
            $link_Step_Two = $('#link_Step_Two'),
            $btnCancelStepTwo = $('#btn_cancel_step_two'),


        $link_Step_Two.on('click', function () {
            $allSteps.hide();
            $stepTwo.fadeIn();
        });

        $btnCancelStepTwo.on('click', function () {
            $allSteps.hide();
            $stepOne.fadeIn();
        });

    });
</script>

Answer 1

Sorry, but I don't have enough points to just add a comment yet after Gnani above. If it is just losing the jquery events, use the jquery delegate function against the form element. Delegate will automatically hook up your events against your selector, even for elements that come into existence in the future, like when MS Ajax recreates your links. I use this trick all the time. Something like:

$("form").delegate('#link_Step_Two', 'click', function() {
  // Your code.
});

$("form").delegate('#btn_cancel_step_two', 'click', function() {
  // Your code.
});