Динамическое фоновое изображение на теле (ASP.NET)

У меня есть ситуация, когда у меня есть ~ 10-20 различных фоновых изображений в папке. Когда мой сайт загружается, мне нужно выбрать конкретное изображение, основанное на некоторых значениях из базы данных.

Я думал об использовании runat = server в теге body, а затем динамически добавлял атрибуты на page_load, но везде, где я читал это предложение, люди говорят, что это действительно плохая идея... Кроме того, я попробовал, и это не сработало (но не слишком отлаживало его).

Как это сделать "правильно"?: -)

Ответ 1

Вы можете динамически добавить его через общий HTML-элемент управления:

   using System.Web.UI.HtmlControls;


    protected override void OnInit(EventArgs e)
    {
        // Define an Literal control.
        HtmlGenericControl css = new HtmlGenericControl();
        css.TagName = "style";
        css.Attributes.Add("type", "text/css");

        string imageURL = string.Empty;

        //Logic to determin imageURL goes here

        //Update Tag
        css.InnerHtml = @"body{background-image: url(" + imageURL + ");}";


        // Add the Tag to the Head section of the page.
        Page.Header.Controls.Add(css);

        base.OnInit(e);        }

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

например.

public string backgroundImage = "defaultImage.png";

Обновите это в событиях инициализации или загрузки страницы.

И ссылайтесь на него в файле aspx либо в голове:

<style type="text/css">
    body 
    { 
       background-image:url(<%=backgroundImage%>);
    }
 </style>

или как атрибут тега body

 <body style="background-image: url(<%= backgroundImage %>)">

Любой из них должен быть в состоянии помочь вам.

Ответ 2

Один из способов сделать это - иметь свойство вроде этого (метод также будет работать):

    protected string BodyBackgroundImageUrl
    {
        get
        {
            // I just chose random pic
            return "http://www.google.com/images/logos/ps_logo2.png";
        }
    }

Вам не нужно устанавливать значение, подобное этому, вы можете заполнить его позже со страницы Init.

Затем в теле вы можете сделать что-то вроде:

    <body style='background:url(<%= BodyBackgroundImageUrl %>) no-repeat;'>

Нет-повтор - это просто показать, что вы можете писать все, что хотите.

Конечно, у вас может быть больше контроля и разных способов:

    public string GetBodyStyle()
    {
        // Get the picture somehow dynamically
        string bodyBackgroundImageUrl = GetBodyBackgroundImageUrl();

        // You can use StringBuilder or so, not the main point
        var styles = "";

        styles += string.Format("background:url({0}) no-repeat;", bodyBackgroundImageUrl);

        // ... Add some extra styles if you want ...

        return styles;
    }

И тогда ваш тег тела будет выглядеть так:

   <body style='<%= GetBodyStyle() %>'>

...

Кроме того, вы всегда можете использовать скрытое поле, которое вы назначаете значение со страницы, а затем в браузере задаете фоновый URL-адрес этого скрытого поля JavaScript.

Пример (с использованием jQuery, но вам не обязательно):

$(function() {
   // ASP.NET will fill the ID, then # with ID will show to JS as one JS string
   var myHiddenField = $('#<%= myServerSideHiddenField.ClientID %>');
   var bodyBackground = "url(" + myHiddenField.val() + ")";
   document.body.css("background" , bodyBackground);
});

Ответ 3

Вот как мы это делали.

<body runat="server" id="PageBody">

код за

PageBody.Style.Add("background-color", "" + returncolor + "");

Ответ 4

Я использую мастер-страницу и, принимая советы и подсказки из нескольких предложений, я придумал это как лучшее и самое полное решение до сих пор:

Добавьте это с помощью:

using System.Web.UI.HtmlControls;

Внутри MasterPage:

<body runat="server" id="masterPageBody">

В любой функции страницы с кодовым кодом (например, "Page_Load" ):

HtmlControl masterPageBody =(HtmlControl)Master.FindControl("masterPageBody");
masterPageBody.Style.Remove("background-image");
masterPageBody.Style.Add("background-image", "/images/blah.jpg");

Ответ 5

        serverPath = Request.PhysicalApplicationPath;
        string chosenMap = dropdownlistMap.SelectedItem.Text;

        Bitmap bm = new Bitmap(serverPath + chosenMap);
        int imageWidth = bm.Width;
        int imageHeight = bm.Height;
        bm.Dispose();

        FileInfo fi = new FileInfo(chosenMap);
        string imageSrc = "~/" + fi.Name;

        imgPanel.BackImageUrl = imageSrc;
        imgPanel.Width = imageWidth + 4;
        imgPanel.Height = imageHeight + 4;
        imgPanel.BorderColor = Color.Yellow;
        imgPanel.BorderStyle = BorderStyle.Groove;
        imgPanel.BorderWidth = 2;

Ответ 6

Серьезно - это не должно быть так сложно. Я только что реализовал это для чего-то, что я разрабатываю... Я понимаю, что эта ветка, вероятно, мертва, но эй, я придумал лучшее решение IMO.

ASPX VB:

'////////////////////////////////////////////////////////////////////////////

ClientScript.RegisterStartupScript(Me.GetType, "Фон", "document.body.style.backgroundImage =" и Chr (34) & "url ('128-700.jpg')" и Chr (34) и ";", True)

'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

Что я... Я называю это прямо из части кода VB. Я все еще участвую, но я знаю, что после поиска и пробования разных вещей это было как можно более прямым.

Уловка - этот код использует вызов Java для изменения фона и изменения CSS.