Нужна помощь с jQuery и ASP.NET, хотите показать / скрыть панель одним нажатием кнопки, но постбэки испортили - PullRequest
2 голосов
/ 07 февраля 2012

РАЗРЕШЕНО

как мне задать вопрос для разрешения?lol

В любом случае, вот решение, я попросил моего друга помочь мне, и он сделал это!

Сначала, поскольку, как я сказал, я использовал панель обновления, jQuery не регистрировал частичные обратные передачиот этого и была главная проблема.Немного меньшая проблема, почему она не работала без панели обновления, заключалась в том, что значения 1 и 0 в функции при щелчке по ошибке переставлялись по ошибке.

Итак, сначала мы сделали переопределение метода OnInit, но вы можете поместитьтот же код и в pageload (кроме вызова base из кода инициализации 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

Я бы дал вам все +Повторите, если бы я мог, но, как вы можете видеть, только начинается.

У меня есть элемент управления, в котором у меня есть различные элементы, которые выполняют обратную передачу.У меня есть этот элемент управления на моей главной странице в панели обновлений, и он прекрасно работает.То, что я хочу сделать, это скрыть половину элементов и иметь возможность показывать их только при нажатии кнопки.Мне удалось найти несколько ящиков jQuery, и это выглядело нормально, но всякий раз, когда я открывал панель и менял элемент, который имел обратную передачу для вызова функции ac # при щелчке или изменении значения, ящик открывается (независимо от того, нажимаю ли я ссылку открыть ящик)).

мои элементы должны иметь постбэки!и мне нужно, чтобы этот ящик показывал / скрывал штуковину, чтобы скрыть половину из них ...

вот что у меня есть в ящике до сих пор, когда я сам собрал код.Как я уже говорил с этим кодом, я нажимаю любую кнопку, которая вызывает обратную запись, ящик открывается после обратной передачи, даже если я не нажимал ссылку открыть ящик.Кроме этого, он работает нормально между постбэками, но мне нужно, чтобы он работал даже с постбэками!

$(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;
    });


});

Мне нужен способ, чтобы постбэки не влияли на состояние ящика.Если он открыт, я хочу, чтобы он оставался открытым после обратной передачи, а если он закрыт, остается закрытым после обратной передачи.Значит, мне нужно, чтобы он запомнил его состояние и проверял его после каждой обратной передачи!

Вот моя структура тегов.

<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;
  });


});

Так чтотеперь работает так: при загрузке сайта показывает, что панель (ящик) закрыта.Если я нажимаю на ссылку, чтобы показать / скрыть панель, она работает превосходно.Но после того, как одна из кнопок генерирует обратную передачу, она обновляет панель и показывает ОТКРЫТО каждый раз, когда создается обратная передача.После обратной передачи я все еще могу использовать ссылку «открыть / закрыть», чтобы открыть / закрыть ее, и это хорошо работает, но мне нужен способ сохранить то состояние, на котором панель находилась до обратной передачи, и установить его в этом состоянии после обратной передачи.

Код крабовой корзины, предоставленный со скрытым полем, должен работать и для этого, но это не так, и я думаю, что мне нужен какой-то способ выполнить проверку, была ли панель открыта или закрыта после обратной передачи.так как проверка происходит только при загрузке страницы, а не после обратной передачи !!!

Ответы [ 2 ]

1 голос
/ 07 февраля 2012

Вы должны самостоятельно отслеживать состояние.Я использовал свое собственное скрытое поле для этого, то есть

<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');          

} 

НО

Это будет работать только для одной панели - это не ваш случай.Таким образом, вам придется выполнить этот процесс, чтобы связать состояние с идентификатором скрытой панели.

Я делал это раньше, используя тот же принцип, но записывая строку 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

Сложно получить отслеживание кода скрытия кода javaScript, но эта странная функция подключается к панели обновления и срабатывает, когда панель обновления отправляет назад.Это позволит вашей панели обновлений отслеживать состояние панели

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

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

});

Надеюсь, это поможет

0 голосов
/ 07 февраля 2012

Итак, если вы хотите что-то скрыть:

.sokrij
{
    display:none;
}

тогда, когда вы хотите, чтобы это было показано:

$(".sokrij").css("display","";

Редактировать: Я неправильно понял ваши потребности. Если вам нужно сохранить информацию, используйте переменную сеанса или что-то подобное.

if(Session["state"] != null)
    string state = Session["state"].ToString();

if(state  == "0")
{
    $(".sokrij").hide();
}

if (state == "1") { $(".sokrij").hide(); Session["state"]="0"; } }

Конечно, вы можете изменить строки на целые или логические или как угодно.

...