asp.net - ASP :CheckBoxList renders as span and no checkboxes(FF and webkit)

Question

我正在使用asp.net的CheckboxList控件。它在过去按预期工作正常，但肯定它开始无法在 Chrome 和 Firefox 浏览器中正确呈现。它在 Internet Explorer 中完美呈现(我的例子是 9)。

它在span标签中呈现，如下所示

<div class="clearfix">
  <span id="cntMain_chkColumns">Activity IDActivity TItleSubmitted ByActivity DateRequest DateAmountStatusExternal Activity IDCustomer ID</span>
</div>

正确且预期的渲染(来自 IE)如下

<span class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop"><div class="ez-checkbox ez-checked"><input id="cntMain_chkColumns_0" class="ez-hide" name="ctl00$cntMain$chkColumns$0" value="0" CHECKED="checked" type="checkbox"></div><label for="cntMain_chkColumns_0">Activity ID</label></span>
<span
class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop">
  <div class="ez-checkbox ez-checked">
    <input id="cntMain_chkColumns_1" class="ez-hide" name="ctl00$cntMain$chkColumns$1" value="1" CHECKED="checked" type="checkbox">
  </div>
  <label for="cntMain_chkColumns_1">Activity TItle</label>
  </span><span class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop"><div class="ez-checkbox ez-checked"><input id="cntMain_chkColumns_2" class="ez-hide" name="ctl00$cntMain$chkColumns$2" value="2" CHECKED="checked" type="checkbox"></div><label for="cntMain_chkColumns_2">Submitted By</label></span>
  <span
  class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop">
    <div class="ez-checkbox ez-checked">
      <input id="cntMain_chkColumns_3" class="ez-hide" name="ctl00$cntMain$chkColumns$3" value="3" CHECKED="checked" type="checkbox">
    </div>
    <label for="cntMain_chkColumns_3">Activity Date</label>
    </span><span class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop"><div class="ez-checkbox ez-checked"><input id="cntMain_chkColumns_4" class="ez-hide" name="ctl00$cntMain$chkColumns$4" value="4" CHECKED="checked" type="checkbox"></div><label for="cntMain_chkColumns_4">Request Date</label></span>
    <br><span class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop"><div class="ez-checkbox ez-checked"><input id="cntMain_chkColumns_5" class="ez-hide" name="ctl00$cntMain$chkColumns$5" value="5" CHECKED="checked" type="checkbox"></div><label for="cntMain_chkColumns_5">Amount</label></span>
    <span
    class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop">
      <div class="ez-checkbox ez-checked">
        <input id="cntMain_chkColumns_6" class="ez-hide" name="ctl00$cntMain$chkColumns$6" value="6" CHECKED="checked" type="checkbox">
      </div>
      <label for="cntMain_chkColumns_6">Status</label>
      </span><span class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop"><div class="ez-checkbox ez-checked"><input id="cntMain_chkColumns_7" class="ez-hide" name="ctl00$cntMain$chkColumns$7" value="7" CHECKED="checked" type="checkbox"></div><label for="cntMain_chkColumns_7">External Activity ID</label></span>
      <span
      class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop">
        <div class="ez-checkbox ez-checked">
          <input id="cntMain_chkColumns_8" class="ez-hide" name="ctl00$cntMain$chkColumns$8" value="8" CHECKED="checked" type="checkbox">
        </div>
        <label for="cntMain_chkColumns_8">Customer ID</label>
        </span>
        <br>

**CSS **以下是复选框渲染时应应用的 CSS 规则:(

.defaultP - is a dummy class for calling ezMark plugin.
.drag-box-wp{ border:1px dashed #cccccc; padding:7px; display:inline; float:left; width:100%; margin:0 0 20px 20px; background:#ffffff; max-width: 195px; }

剩下的是 jquery-ui-draggable 交互小部件的类。

下面是我的标记

<asp:CheckBoxList ID="chkColumns" runat="server" RepeatDirection="Horizontal" RepeatColumns="5" RepeatLayout="Flow"></asp:CheckBoxList> 

我通过单击按钮绑定(bind)此复选框列表，c# 代码隐藏文件中的绑定(bind)代码如下所示

 DataView dvCustomizableColumns = dtCustomizableColumns.DefaultView;
 dvCustomizableColumns.Sort = "Sequence_ID ASC";
 chkColumns.DataSource = dvCustomizableColumns;
 chkColumns.DataTextField = "ColumnDisplayName";
 chkColumns.DataValueField = "Sequence_ID";
 chkColumns.DataBind();

后来使用一个函数，我使这些复选框可拖动，并使用ezMark Plugin在复选框上应用一些样式。 .

代码:

    private void EnableDraggingOnItems(DataView dvCustomizableColumns)
    {
       for (int i = 0; i < dvCustomizableColumns.Table.Rows.Count; i++)
        {
         if (hdnSelectedColumns.Value != string.Empty)
          {
           if (hdnSelectedColumns.Value.Contains(chkColumns.Items[i].Value))
            {
              chkColumns.Items[i].Selected = true;
            }
          }
         else
          {
            chkColumns.Items[i].Selected = true;
          }


chkColumns.Items[i].Attributes.Add("class", "defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop");
        }
    }

我还检查了 chrome 中是否有一个复选框 webkit 样式设置为 none，但它在 css 中却找不到。

如果需要更多信息，请告诉我。

Answer 1

谢谢大家对我的问题感兴趣。幸运的是我找到了我的问题的解决方案。事实证明，在我的母版页中，有一个以选择器开头的 jquery 导致复选框列表的innerHtml 被更改。

$("span[id^='cntMain']").each(function () {
                $(this).text($(this).text().toString().toTitleCase());
            });

这就是它仅呈现标签的原因。我更改了上面代码中的选择器，如下所示

 $("span[id^='cntMain']:not(:has(*))").each(function () {
                $(this).text($(this).text().toString().toTitleCase());
            });

虽然这是一个非常具体的问题，但我发布了答案，以防有人仍然觉得它有用。

我仍然想知道它为什么以及如何在 IE 中工作。