web-dev-qa-db-ja.com

動的な背景-ボディ上の画像（ASP.NET）

フォルダ内に最大10〜20の異なる背景画像がある状況があります。私のサイトがロードされたら、データベースからのいくつかの値に基づいて、これらの画像の特定の1つを選択する必要があります。

Bodyタグでrunat = serverを使用し、page_loadで属性を動的に追加することを考えましたが、その提案を読んだところはどこでも、それは本当に悪い考えだと言われています...また、私は試しましたそれ、そしてそれは機能しませんでした（しかしそれをあまりデバッグしませんでした）。

これを「正しい方法」でどのように行うのでしょうか。 :-)

asp.nethtmlcssdynamic-data
14
Lars Holdgaard

汎用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";

ページのinitまたはonloadイベントでこれを更新します。

そして、頭の中のaspxファイルでそれを参照してください：

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

またはbodyタグの属性として

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

これらのいずれかがあなたを助けることができるはずです。

12
Jon P

これを行う1つの方法は、次のようなプロパティを持つことです（メソッドも機能します）。

    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タグは次のようになります。

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

.。

また、ページから値を割り当てる非表示フィールドをいつでも使用でき、ブラウザーでJavaScriptによってその非表示フィールドにバックグラウンドURLを設定できます。

例（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);
});
6
Meligy

これが私たちのやり方です。

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

コードビハインド

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

私はマスターページを使用しており、いくつかの提案からヒントを取り入れて、これまでのところ最良かつ完全な解決策としてこれを考え出しました。

これを使用して追加してください：

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");
1
Dave
        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;
0
user1994891

真剣に-これはそれほど難しい必要はありません。私は自分が設計しているものにこれを実装したばかりです...このスレッドはおそらく死んでいることに気づきましたが、ちょっと-私はより良いソリューションIMOを思いつきました。

ASPX VB：

 ClientScript.RegisterStartupScript(Me.[GetType](), "Background",
"document.body.style.backgroundImage = " & Chr(34) &
"url('128-700.jpg')" & Chr(34) & ";", True)

それだけです... VBコード部分から直接呼び出します。まだ学習中ですが、さまざまなことを検索して試した後、これは可能な限り簡単でした。

秘訣は、このコードはJavaの呼び出しを利用して、CSSを変更するのではなく背景を変更することです。

0
Todd