Почему добавление / удаление классов CSS, как это не будет работать?

Question

Хорошо, поэтому у меня есть GridView , например:

<asp:GridView ID="gv" runat="server" ... >
...
<HeaderStyle CssClass="header" />
<RowStyle CssClass="datarow" />
<AlternatingRowStyle CssClass="datarow alt" />
<Columns>
    <asp:TemplateField>
        <ItemTemplate>
            <asp:CheckBox runat="server" ID="gvchkDelete" />
        </ItemTemplate>
    </asp:TemplateField>
</Columns>
...
</asp:GridView>

Обратите внимание на пользовательские RowStyle и AlternatingRowStyle css. Я хочу изменить стиль строки всякий раз, когда выбран флажок gvchkDelete CheckBox, и удалить его, если это не так. Итак, я придумал что-то вроде этого:

protected void gv_PreRender(object sender, EventArgs e)
{
    DUtil.GridViewRowHighlight(gv, "gvchkDelete");
}

//External Class
public class DUtil
{
public static void GridViewRowHighlight(GridView gv, string CheckBoxControlID)
{
    foreach (GridViewRow gvr in gv.Rows) {
        GridViewRowHighlight(gvr, CheckBoxControlID);
    }
}

public static void GridViewRowHighlight(GridViewRow gvr, string CheckBoxControlID)
{
    string scriptFormat = "if(this.checked){{document.getElementById('{0}').className+=' {1}';}}else{{document.getElementById('{0}').className=document.getElementById('{0}').className.replace('{1}','');}};";
    string script = String.Format(scriptFormat, gvr.ClientID, DEstilos.HighlightStyle);
    CheckBox chk = (CheckBox)gvr.FindControl(CheckBoxControlID);
    if (chk.Checked) AddCssClass(gvr, DEstilos.HighlightStyle);
    else RemoveCssClass(gvr, DEstilos.HighlightStyle);
    chk.Attributes.Add("onclick", script);
}

public static void AddCssClass(WebControl control, string cssClass)
{
    List<string> classes = new List<string>(control.CssClass.Split(new char[] { ' ' }, StringSplitOptions.RemoveEmptyEntries));
    classes.Add(cssClass);
    control.CssClass = ToDelimitedString(classes, " ");
}

public static void RemoveCssClass(WebControl control, string cssClass)
{
    List<string> classes = new List<string>(control.CssClass.Split(new char[] { ' ' }, StringSplitOptions.RemoveEmptyEntries));
    classes.Remove(cssClass);
    control.CssClass = ToDelimitedString(classes, " ");
}

public static string ToDelimitedString(IEnumerable<string> list, string delimiter)
{
    StringBuilder sb = new StringBuilder();
    foreach (string item in list) {
        if (sb.Length > 0)
            sb.Append(delimiter);

        sb.Append(item);
    }
    return sb.ToString();
}
//End class
}

//External Class
public class DEstilos
{
public const string HighlightStyle = "highlight";
//End Class
}

Что все это делает: для каждого флажка в коллекции gridview.Rows добавьте функцию JavaScript в атрибут onclick флажка, чтобы при щелчке по родительской строке флажка добавлялся / удалялся стиль Highlight. А также, если флажок установлен / снят по умолчанию, добавьте / удалите стиль выделения.

Все это только для того, чтобы при создании обратной передачи строки с выбранным флажком сохраняли стиль Highlight (ведь, конечно, этого не происходит, если просто включить viewstate). Проблема заключается в том, что классы RowStyle и AlternatingRowStyle css, определенные в разметке gridview, похоже, получают " игнорируется " или " удалено " Почему?

ОБНОВЛЕНИЕ : Решения без использования jQuery или Prototype были бы лучше, если, конечно, это единственный способ сделать это.

ОБНОВЛЕНИЕ 2, 3 : Если удалить строки:

if (chk.Checked) AddCssClass(gvr, DEstilos.HighlightStyle);
else RemoveCssClass(gvr, DEstilos.HighlightStyle);

из метода GridViewRowHighlight, затем классы RowStyle и AlternatingRowStyle css DO добавляются в разметку HTML, и я получаю нужный эффект, но при каждой обратной передаче эффект выделения удаляется, в то время как флажок сохраняет его предыдущее состояние.

Спасибо за вашу помощь!

Answer 1

Похоже, у вас есть две проблемы:

1. Заданные вами CSS-классы не соблюдаются при визуализации страницы.
2. Требуется, чтобы поведение флажка для каждой строки сетки переключало стиль ее родительской строки сетки.

Попробуйте это для задачи № 2:

Изменить <asp:CheckBox runat="server" ID="gvchkDelete" /> на <asp:CheckBox runat="server" ID="gvchkDelete" OnClientClick="javascript:ToggleHighlight(this);" />

Добавьте эту функцию javascript и убедитесь, что она доступна для загружаемой страницы:

function ToggleHighlight(elem)
{  
  if(!elem)
  {
    return;
  }

  var gridRow = elem;

  while(gridRow.tagName != "TR" && gridRow.parentNode)
  {
    gridRow = gridRow.parentNode;
  }

  gridRow.className = elem.checked ? 
                      (gridRow.className + " highlight") :
                      gridRow.className.replace("highlight", "");
}

Что касается проблемы # 1, убедитесь, что ваши стили CSS попали на отображаемую страницу.

Для альтернативного подхода, который использует код на стороне сервера, вы можете сделать следующее при загрузке страницы (для этого используется библиотека jQuery):

$(document).ready
(
  function()
  {
    $("input[id$=gvchkDelete]")
      .each
      (
        function()
        {
          ToggleHighlight(elem);
        }
      );
  }
);

Answer 2

Я считаю, что это главный кандидат на jQuery. Настроить CSS-классы для элементов управления HTML довольно просто с помощью jQuery.