c# - 需要 jQuery 和 ASP.NET 的帮助想要在单击按钮时显示/隐藏面板，但是回传搞砸了

Question

已解决

如何将问题设置为已解决？哈哈

无论如何这是解决方案，我让我的 friend 帮助我，他做到了!

首先，正如我所说，我正在使用一个更新面板，jQuery 没有注册它的部分回发，这是主要问题。在没有更新面板的情况下它无法工作的一个稍微小一点的问题是错误地交换了单击时函数中的 1 和 0 值。

所以首先我们重写了 OnInit 方法，但是您也可以将相同的代码放在页面加载中(除了调用 base on init code ofc):) :

protected override void OnInit(EventArgs e)
    {


        base.OnInit(e);

        prikazi.Attributes.Add("onclick", "return LinkKlik();");


        ScriptManager.RegisterStartupScript(this, this.GetType(), "init", "checkComponent();", true);
    }

我们在其中注册了一个脚本，以便在每次页面重新初始化时运行，即使使用异步回发 :) 我们也将点击功能添加到此处的链接按钮。

jquery代码如下:

function checkComponent() {
    //
    if (document.getElementById('hidTracker').value == '1') {
        $(".sokrij").show();

    }
    else {
        $(".sokrij").hide();
    }
}

function LinkKlik() {

    var panel = $("#fioka").find(".sokrij");

    if (panel.is(":visible")) {
        panel.slideUp("500");
        $('#hidTracker').attr("value", "0");

    }
    else {
        panel.slideDown("500");
        $('#hidTracker').attr("value", "1");

    }
    // that's it folks! (return false to stop the browser jumping the the '#' link
    return false;
}

它基本上和以前一样，只是通过上面的覆盖分成了 2 个链接到事件的函数。

最后一件事，你需要这些:

        <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <script type="text/javascript" src="drawer.js"></script>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
            <asp:HiddenField ID="hidTracker" runat="server" Value="0" />
            <div id="fioka">
                <asp:LinkButton runat="server" href="#" ID="prikazi">Click This to show/close</asp:LinkButton>
                <div class="sokrij" id="sokrij">
                    HIDE THIS!!!
                </div>
            </div>
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="prikazi" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>

它甚至可以在更新面板中使用。该按钮用于生成回传，您甚至可以将一个按钮放在外面以在更新面板之外生成真正的回传。状态的值记录在隐藏字段中，链接按钮是我们用来显示/隐藏的。如果有人需要这个，请干杯，因为我看到很多关于同一件事的帖子，但没有人回答。

谢谢大家的回答，尤其是 CRAB BUCKET

如果可以的话，我会给你所有的+rep，但你可以看到刚刚开始。

I have a control in which i have various elements that do postback. I have that control in my main page in an update panel, and it works great. What i want to do is hide half of the elements and to be able to show them only when button is clicked. I managed to find some jQuery drawers and it looked fine, but whenever I opened the panel and changed an element which had a postback to call a c# function on click or value change the drawer is opened (no matter if i press the open drawer link).

my elements have to have postbacks! and i need that drawer show/hide thingie to hide half of them...

here's what I have on the drawer so far, by putting together some code myself. As I said with this code it i click any button that causes post back, the drawer is opened after the postback even if i didn't click the open drawer link. Other than that it works ok between postbacks, but I have to have it working even with postbacks!

$(function () {

$(".sokrij").hide(),


$("#prikazi").live("click", function (evt) {
        evt.preventDefault();

        $("#fioka").find(".sokrij").each(function () {

            if ($(this).is(":visible")) {
                $(this).slideUp("500");
            }
        });

        if ($(this).next().is(":hidden")) {
            $(this).next().slideDown("500");
        }

        return false;
    });


});

I need a way to make the postbacks not influence the state of the drawer. If it is open I want it to stay open after a postback, and if it is closed to stay closed after postback. So that means I need it to remember it's state and check it after every postback!

Here is my tag structure.

<div id="fioka">
    <a href="#" ID="prikazi">Click This to show/close</a>
    <div class="sokrij">
</div>
</div>

---

主要编辑:

在 Crab Bucket 的输入之后，这是我现在拥有的:

标签结构:

<input type="hidden" ID="hidTracker" value="0" />    
<div id="fioka">
             <a href="#" ID="prikazi">Click This to show/close</a>
             <div class="sokrij">
         </div>
         </div>

这一切都在更新面板中，其中有按钮 生成回发，但这些回发不会刷新主页， 它们包含在更新面板内。

到目前为止，jQuery 代码是:

$(document).ready(function () {

if ($('#hidTracker').val() == '1') {
    $(".sokrij").show();
}
else {
    $(".sokrij").hide();

}



  $("#prikazi").live("click", function (evt) {
      evt.preventDefault();

      var panel = $("#fioka").find(".sokrij");

      if (panel.is(":visible")) {
          panel.slideUp("500");
          $('#hidTracker').val('1');
      }
      else {
          panel.slideDown("500");
          $('#hidTracker').val('0');
      }

      return false;
  });


});

所以它现在是这样工作的:在站点加载时，它显示面板 (抽屉)关闭。如果我单击链接以显示/隐藏面板，它会起作用 高超。但是在其中一个按钮生成回发后，它会刷新 面板，每次生成回发时它都会显示为 OPEN。 回发后我仍然可以使用打开/关闭链接打开/关闭 它和那个效果很好，但我需要一种方法来保存面板的状态 在回发之前并在回发之后将其设置为该状态。

隐藏字段提供的 code crab bucket 应该也适用于此，但它没有，我想我需要一些方法来执行 检查回发后面板是打开还是关闭。作为它 检查只发生在页面加载时，而不是之后 回发!!!

Answer 1

您需要自己进行状态跟踪。我为此使用了自己的隐藏字段，即

<input type="hidden" ID="hidTracker" value="0" />

在你的函数的顶部

if($('#hidTracker').val() == '1')
{
    $(".sokrij").show();
}
else
{
    $(".sokrij").hide(); 

}

然后更改您的主要功能主体以手动跟踪状态

$("#fioka").find(".sokrij").each(function () 
{              
    if ($(this).is(":visible")) 
    {                 
       $(this).slideUp("500");    
       $('#hidTracker').val('0');          
    }         
});          

if ($(this).next().is(":hidden")) 
{             
   $(this).next().slideDown("500");        
   $('#hidTracker').val('1');          

} 

但是

这仅适用于一个面板 - 这不是您的情况。因此，您将不得不完成此过程以将状态链接到显示为隐藏的面板的 ID。

我之前使用相同的原理来完成此操作，但在隐藏字段中记录一个 JSON 字符串，然后再水化它可以添加结构键/值信息以记录状态

对于两个面板，隐藏字段中的 JSON 可能看起来像这样

{"panelState": [{ID:"pnl1", "State":"1"}, {ID:"pnl2", "State":"0"}]}

这是一个 json parser帮助您构建和补水字符串。

要让它继续下去需要做一些工作，但这只是开始。如果我有时间，我会充实一点，但我不能保证 - 抱歉

编辑

适应一个面板尝试

var panel = $("#fioka").find(".sokrij");

if (panel.is(":visible"))      
{                         
    panel.slideUp("500");            
    $('#hidTracker').val('1');               
}  
else
{
    panel.slideDown("500");            
    $('#hidTracker').val('0');       
}

不要忘记将所有代码包装在

中

$(document).ready(function(){

  //all my code

});

否则无法保证加载 DOM，代码可能无法正确执行

编辑 2

很难获得 show hide code trackering javaScript 但这个奇怪的函数 Hook 到更新面板，并在更新面板回发时触发。这将允许您的更新面板跟踪面板状态

 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, args) {

     if($('#hidTracker').val() == '1') 
     {     
         $(".sokrij").show(); 
     } 
     else 
     {     
         $(".sokrij").hide();   
     } 

});

希望对你有帮助