发生 ajax 回发时下拉列表丢失项目样式答案

【问题标题】：Drop Down List losing item styling when ajax post back occurs发生 ajax 回发时下拉列表丢失项目样式
【发布时间】：2016-03-06 19:54:16
【问题描述】：

在我们的一个页面上，有一个下拉列表，可以在预渲染时动态为其项目着色。但是，每当页面上的任何控件进行 ajax 回发时，它都会立即失去其所有样式（项目颜色）。我可以看出，在页面最初加载时以及每次进行任何 ajax 调用时都会调用预渲染。

<asp:DropDownList ID="DeviceObjectDDL" runat="server" Style="width: 350px;" OnPreRender="ColorDeviceListItems" AutoPostBack="true" OnSelectedIndexChanged="DeviceObjectDDL_SelectedIndexChanged" />

和

    protected void ColorDeviceListItems(object sender, EventArgs e)
    {
        if (((DropDownList) sender).DataSource == null) return;
        var disabledList = ((List<Device>) ((DropDownList) sender).DataSource).FindAll(d => !d.Active || !d.Visible);

        foreach (var device in disabledList)
        {
            var item = ((DropDownList) sender).Items.FindByValue(device.ID.ToString());
            if (item == null) continue;
            if ((!device.Active) && (!device.Visible))
                item.Attributes.CssStyle.Add("color", "Purple");
            else
            {
                if (!device.Active)
                    item.Attributes.CssStyle.Add("color", "Blue");
                if (!device.Visible)
                    item.Attributes.CssStyle.Add("color", "#8B0000");
            }
        }
    }

在 ajax 请求期间调用ColorDeviceListItems 方法时，sender 数据源为空，因此它只是返回。

【问题讨论】：

在您的 OnSelectedIndexChanged 事件处理程序中放置一个断点，它可能会触发并可能删除样式？
不，什么都没有。
我想我能够回答它，见下文...谢谢

标签： c# css asp.net ajax

【解决方案1】：

第 1 步

不要使用PreRender 事件，而是使用DataBound 事件——这应该确保在视图状态重新实现数据源之后触发事件。

<asp:DropDownList ID="DeviceObjectDDL" runat="server" Style="width: 350px;" OnDataBound="ColorDeviceListItems" AutoPostBack="true" OnSelectedIndexChanged="DeviceObjectDDL_SelectedIndexChanged" />

第 2 步

而不是使用发件人，这可能是导致回发发生的任何事情。使用控件本身的标识符，即； DeviceObjectDDL 代替。它已经用runat="server" 正确标记，这应该允许您在后面的代码中直接访问它。

protected void ColorDeviceListItems(object sender, EventArgs e)
{
    if (DeviceObjectDDL.DataSource == null) return;
    var disabledList = ((List<Device>)(DeviceObjectDDL.DataSource).FindAll(d => !d.Active || !d.Visible);

    foreach (var device in disabledList)
    {
        var item = DeviceObjectDDL.Items.FindByValue(device.ID.ToString());
        if (item == null) continue;
        if ((!device.Active) && (!device.Visible))
            item.Attributes.CssStyle.Add("color", "Purple");
        else
        {
            if (!device.Active)
                item.Attributes.CssStyle.Add("color", "Blue");
            if (!device.Visible)
                item.Attributes.CssStyle.Add("color", "#8B0000");
        }
    }
}

在这种特定情况下，依赖发件人并不是最佳做法，因为无法保证发件人是所需的控件。这在 AJAX 调用中很明显......

【讨论】：

更奇怪的是，DataSource 在 ajax 回发中仍然显示为 null。在原始负载上，一切都很好，但回发让我很适应。
您是否启用了视图状态？
看看这个，听起来他们有类似的情况，他们通过不使用PreRender来解决。 stackoverflow.com/questions/3578846/…
不幸的是，这仍然不允许它持续存在，即使它被设置为 OnDataBound 方法。看来，当有回发时，它会几乎刷新页面。 DeviceObjectDDL HTML 被重新初始化，但在后端，它永远不会反弹。所以它显示的是数据，而不是格式。
这是一个下拉列表，我假设数据量很小。只需重新查询数据并分配DataSource。