Question

所以这是交易，我在我的Login.aspx页面上有这个DropDownList，使用DropDown我想设置整个网站的背景。拥有MasterPage我以为我应该设置身体的颜色。

这是<asp:DropDownList>的html：

<div class="col-sm-3 col-sm-offset-4" style="margin-bottom: 10px">
    <div class="input-group input-group-sm">
        <asp:Label runat="server" ID="lblColor" ClientIDMode="Static" AssociatedControlID="ddlColor" class="input-group-addon"><span class="glyphicon glyphicon-star"></span></asp:Label>
        <%--Update Panel за цветовете--%>
        <asp:UpdatePanel runat="server" ID="updateColor" ClientIDMode="Static" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:DropDownList runat="server" ID="ddlColor" style="width:100%" ClientIDMode="Static" AutoPostBack="true" OnSelectedIndexChanged="ddlColor_SelectedIndexChanged" aria-describedby="lbColor" data-taggle="dropdown" data-style="DropDownListHint-datastyle" class="btn dropdown-toggle DropDownListHint-datastyle">
                    <asp:ListItem Text="Бял" Value="White" Selected="True" />
                    <asp:ListItem Text="Зелен" Value="Green" />
                </asp:DropDownList>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</div>

我遇到了2个问题。第一个是当我设置身体的颜色时，在点击“登录”按钮后，颜色将在下一页上被删除。第二个问题是，即使使用更新面板，我也无法使页面不闪烁。

这是我的C＃代码隐藏。

protected void ddlColor_SelectedIndexChanged(object sender, EventArgs e)
{
    var body = Master.FindControl("bodyMasterPage") as HtmlGenericControl;

    if (ddlColor.SelectedValue == "Green")
    {
        body.Style.Add("background-color", "#D2F6E2!important");
    }
    else if (ddlColor.SelectedValue == "White")
    {
        body.Style.Add("background-color", "#ccc!important");
    }
    updateColor.Update();
}

非常感谢任何帮助＆lt; 3

Answer 1

我会尽量保持这个简单。我希望你能够建立下面的例子。

首先，让我们构建一个简单的<select>，如下所示：

<select id="ddlColor" class="form-control">
    <option value="#d2f6e2">Бял</option>
    <option value="#ccc">Зелен</option>
</select>

我从代码隐藏中提取了值，我们马上就会明白原因。

其次，让我们为select的值改变时构建一个jQuery事件处理程序：

$('#ddlColor').on('change', function(e){


});

我假设jQuery可用，因为我在你的标记中看到了Bootstrap CSS类，这通常意味着你也在某处使用bootstrap.js，它将jQuery作为依赖。

第三，我们获取选择的值，并使用jQuery .css()函数将您的样式应用于body元素：

$('#ddlColor').on('change', function(e){
    var color = $(this).val();

    $('body').css('background-color', color);
});

这可以在您的页面中的任何位置，您已经拥有脚本，或者您可以添加脚本标记，只要脚本在您加载jQuery之后。

作为一个注释，CSS函数似乎不喜欢那些!important修饰符，所以我删除了它们。如果你绝对需要它们，我会考虑为这些颜色创建一些类，而是使用addClass和removeClass函数。

演示：https://jsfiddle.net/hfrjufto/

还有一个在localStorage中保留该值的版本：https://jsfiddle.net/hfrjufto/3/

if(!localStorage.getItem('bgcolor')) {
  populateStorage();
} else {
  setStyles();
}

function setStyles() {
  var color = localStorage.getItem('bgcolor');

  $('body').css('background-color', color);
}

function populateStorage() {
  localStorage.setItem('bgcolor', $('#ddlColor').val());

  setStyles();
}

$('#ddlColor').on('change', function(e) {
  populateStorage();
});

使用DropDownList设置整个网站的背景的问题

1 个答案: