Прозрачная кнопка LinkButton в репитере ASP при событии щелчка jquery

Вероятная причина, по которой кнопка снова появляется после загрузки второй страницы, заключается в том, что ваши изменения, сделанные в jQuery, не сохраняются в ViewState и поэтому не сохраняются при обратных передачах. Если вы получаете обратную передачу при LinkButton щелчке, вы можете сохранить информацию о том, что он был нажат на стороне сервера (т. Е. В добавлении класса clicked в свой код C #, обрабатывающий событие щелчка). Затем вы можете изменить клиентский сценарий, чтобы установить прозрачность для всех LinkButton элементов управления с этим классом (и некоторой специальной обработки для кнопки, нажатой недавно). Вы также можете просто определить класс, дающий элементам соответствующие настройки прозрачности. Сообщите мне, если Вам понадобится помощь с кодом для этого.

Что касается второй проблемы, обратите внимание, что вы получаете элемент по идентификатору, и он должен быть уникальным в рамках HTML-страницы. Наверное, поэтому работает только для первого. Чтобы он работал для всех элементов, используйте вместо этого класс. Вы можете назначить класс в своем aspx следующим образом:

<div id="divLinkBtn" class="divLnkBtnClass" style="display:inline">... </div>

и назначьте обработчик кликов следующим образом:

$(document).ready(function () {
$('.divLnkBtnClass').click(function () {
  alert('divlinkbutton presed');
  $(this).css({ 'opacity': 0.4 });
});
});

Это должно заставить скрипт работать для всех div.

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

ОБНОВЛЕНИЕ

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

• Сначала добавьте личное поле на свою страницу в коде программной части:

  private List<String> itemsClicked = null;
  

  и элемент управления HiddenField в вашем aspx (вне элемента управления Repeater):

  <asp:HiddenField runat="server" ID="hfButtonsClicked" Value="" />
  

  Мы будем использовать этот HiddenField для сохранения ClientID из LinkButton элементов управления, которые уже были нажаты.

• Затем в методе Page_Load инициализируйте поле значением из скрытого поля:

  protected void Page_Load(object sender, EventArgs e)
  {
      SetPageTitle();
  
      //initialize itemsClicked before binding data to the repeater
      itemsClicked = hfButtonsClicked.Value.Split(new char[] { ';' }, StringSplitOptions.RemoveEmptyEntries).ToList();
  
      if (!Page.IsPostBack)
      {
          LoadStatusesAndButtons();
  
          ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>LoadBarWithFadeIN();</script>", false);
      }
      else
      {
          ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>LoadBar();</script>", false);
      }
  }
  

• Затем добавьте на страницу новый метод, который будет использоваться на следующем шаге:

  private void SetOpacity(LinkButton linkButton, string opacityValue)
  {
      linkButton.Style.Remove("opacity");
      linkButton.Style.Add("opacity", opacityValue);
  }
  

• Последнее, что нужно добавить - это добавить код, сохраняющий идентификатор при щелчке по элементу. Вы можете использовать событие щелчка или просто использовать существующий обработчик событий OnItemCommand:

  protected void repStatuses_ItemCommand(object source, RepeaterCommandEventArgs e)
  {
      //get LinkButton that was clicked
      LinkButton lnkBtnClicked = (e.CommandSource as LinkButton);
      if (lnkBtnClicked != null)
      {
          //if item was not clicked before, so the opacity is not set
          if (lnkBtnClicked.Style["opacity"] == null)
          {
              //save control ClientID in the HiddenField
              hfButtonsClicked.Value += String.Format(";{0}", lnkBtnClicked.ClientID);
  
              SetOpacity(lnkBtnClicked, "0.4");
          }
      }
  
      //the rest of the original code should be here
      //...
  }
  

и метод восстановления непрозрачности после обратной передачи, когда элемент привязан к данным:

    protected void repStatuses_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        LinkButton lnkBtn = (e.Item.FindControl("linkBtnStatuses") as LinkButton);

        if (lnkBtn != null)
        {
            //if item was clicked before, so the opacity should be restored
            if (itemsClicked.Contains(lnkBtn.ClientID))
            {
                SetOpacity(lnkBtn, "0.4");
            }
        }

        //the rest of the original code should be here
        //...
    }

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

Дополнительные примечания

Вы также можете использовать объект ViewState вместо этого дополнительный элемент управления HiddenField, но если вы захотите в конечном итоге изменить решение для сохранения / восстановления непрозрачности в jQuery, работа с HiddenField должна быть намного проще.

Есть также некоторые улучшения, которые следует внести в код (например, переместить разделитель строк в переменную только для чтения или не задавать жесткое кодирование значения атрибута непрозрачности), но я написал это таким образом, чтобы сделать ответ короче и немного легче читать.

После хорошего ночного сна вот простое (хотя и не самое элегантное) решение:

 protected void repStatuses_ItemCommand(object source, RepeaterCommandEventArgs e)
{
   SetAsOriginal();

    //Get the linkbutton that was clicked
    LinkButton lnkBtnClicked = e.CommandSource as LinkButton;       //e- is the object of the repeater. CommandSource- is the clicked
    if (lnkBtnClicked != null)
    {
        SetOpacity(lnkBtnClicked, "0.4");
    }

private void SetAsOriginal()
{
    foreach (RepeaterItem item in repStatuses.Items)
    {
        LinkButton btn = item.FindControl("linkBtnStatuses") as LinkButton;
        SetOpacity(btn, "1.0");
    }
}

private void SetOpacity(LinkButton linkButton, string opacityValue)         //SET THE OPACITY TO THE SPECIFIC linkbutton 
{
    linkButton.Style.Add("opacity", opacityValue);
}

Дело в том, что приведенный выше ответ был очень хорош и работал, но не отвечал на мое требование. Мне нужно было сделать прозрачной только нажатую кнопку, а остальные кнопки нужно вернуть обратно к оригиналу.

Поэтому я решил указать решение для тех, кто может столкнуться с подобной проблемой.

всем спасибо.

PS: особая благодарность @Lukasz M