从JavaScript同步服务器端控件

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.

我有两个面板，两个面板之间可以切换链接，这些链接不会回发页面，它们会调用一些淡入淡出面板的JavaScript代码，从而改变它们的可见性。

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.

在任一面板中我都有一个回发页面的按钮，发生了什么，在我淡入第二个面板后，我的viewstate无效，我的回发失败。

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?

有没有办法让我的viewstate有效从JavaScript同步这两个面板的可见性？或者我必须回发这个工作吗？如果是这样的话，我可以在没有页面闪烁的情况下进行回发并且很好地淡化面板吗？

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

编辑：这是我的代码，显然我在div中有一堆控件

<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>

1 个解决方案

#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:

对不起，但是我没有足够的积分在Gnani之后添加评论。如果它只是丢失了jquery事件，请对表单元素使用jquery委托函数。 Delegate将自动将您的事件与您的选择器挂钩，即使对于将来出现的元素，例如MS Ajax重新创建链接时也是如此。我一直都在使用这个技巧。就像是：

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

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