c# - 为什么像这样添加/删除 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 属性，以便在单击复选框的父行时添加/删除突出显示样式。此外，如果复选框默认选中/未选中，则添加/删除突出显示样式。

所有这一切只是为了确保无论何时进行回发，带有选中复选框的行都保留了突出显示样式(当然，仅启用 View 状态不会发生这种情况)。问题是在 gridview 的标记中定义的 RowStyle 和 AlternatingRowStyle css 类似乎被“忽略”或“删除”，为什么？

更新:不使用 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);
        }
      );
  }
);