Changer dynamiquement background-image

Version imprimable

Voir 40 message(s) de cette discussion en une page

18/10/2010, 10h41
JCMANSION

Changer dynamiquement background-image

Bonjour
Dans une appli web, à partir d'une page-enfant (dans un select Case) je voudrais changer le background-image de la MasterPage. Est-ce possible ?
Pouvez-vous me donner un bout de code
Merci pour votre aide
JCM
18/10/2010, 11h09
Nicolas Esprit

Bonjour,

C'est possible. Je t'invite à consulter l'article "Communication entre les différents éléments d'une page ASP.NET", notamment ce passage.

En espérant t'avoir aidé.
18/10/2010, 11h58
JCMANSION

Merci pour ta réponse
Mais je suis novice en JS et je ne vois pas la solution
Dans le ContentPage j'ai créé une function en text/JS nommée ChandFond()
Mais je ne sais pas comment activer cette function dans mon Select Case
JCM
18/10/2010, 13h51
Nicolas Esprit

Bonjour,

Je n'ai pas parlé de Javascript, et la partie mentionnée de l'article n'en parle pas non plus.

Si tu veux un exemple tout fait : Changing A Master Page Body Tag’s CSS Class for Different Content Pages
18/10/2010, 16h36
JCMANSION

Je suis désolé, mais je n'y comprend rien du tout
Peux-tu me donner un bout de code, car je suis dans une vrai galère
JCM
18/10/2010, 17h33
Nicolas Esprit

Il y a des exemples de code dans les liens que je t'ai fourni.

Qu'est ce que tu ne comprends pas précisément ?
19/10/2010, 09h55
JCMANSION

Dans ma MasterPage j’ai une Div : id="GeneralMP"

Dans une ContentPage, je veux placer dans le PageLoad (et dans un Select Case) du code pour changer le background-image: url('Images/MonImage.png') de GeneralMP
Je ne vois pas comment écrire ce code
19/10/2010, 10h38
tortuegenie

Tres bonne référence Nicolas.

Il faut creer un getter sur la masterpage pour ton élément, utilise un panel, et après il n'y a qu'a suivre l'exemple
19/10/2010, 10h41
Nicolas Esprit

Bonjour,

Tu as toujours la possibilité de mettre un runat="server" à ton div afin d'y avoir accès dans le code-behind de ta MasterPage. Ensuite, tu peux utiliser le lien que je t'ai fourni pour rendre accessible le div dans ta page.

Enfin, pour changer l'image, une simple ligne :

Code:

tonDiv.Style.Add(HtmlTextWriterStyle.BackgroundImage, "Images/NomImage.jpg");

Par contre, pourquoi avoir besoin de changer l'image background d'une MasterPage dans tes pages ? N'est ce pas un défaut de conception ?

En espérant t'avoir aidé.
19/10/2010, 12h09
JCMANSION

J'ai besoin de changer le backgroundImage pour éviter de faire 7 masterpages dont la construction est identique seule l'image de fond change. j'ai par exemple 4 pages (enfant) identiques mais avec une image de fond (dans la master) différente. En résumé cela me permet de regrouper 7 sites en un seul.

Quand j'écris le code que tu me donnes dans le pageload de la ContentPage
GeneralMP (Div de la MasterPage) est surligné avec le message le nom DeneralMP n'est pas déclaré
JCM
19/10/2010, 12h13
Nicolas Esprit

Citation:

Envoyé par JCMANSION

Quand j'écris le code que tu me donnes dans le pageload de la ContentPage
GeneralMP (Div de la MasterPage) est surligné avec le message le nom DeneralMP n'est pas déclaré
JCM

Tu es sûr d'avoir procédé comme indiqué ? A savoir rajouter le runat, et lire la partie de l'article qui t'expliques de A à Z comment faire ?
19/10/2010, 13h53
JCMANSION

Oui j'ai ajouté runat="server" à ma div GeneralMP située sur la masterpage MasterGen.master.

Sur la contentpage j'ai ajouté :

Code:

<%@ MasterType VirtualPath="~/MasterGen.Master" %>

si j'ajoute dans le pageload Me.Master.GeneralMP.Style................. comme dans l'exemple Me.Master.GeneralMP est surligné

Désolé j'ai du mal à saisir, merci pour ta patience
JCM
19/10/2010, 14h06
Nicolas Esprit

Ok je vois.

Ceci dans ta Page :

Code:

<%@ MasterType VirtualPath="~/MasterGen.Master" %>

permet d'avoir accès à la MasterPage de type "MasterGen" et non plus de type MasterPage de base. Ainsi tu n'as plus à faire Me.Master, mais Me.MasterGen. L'intellisense devrait désormais te le proposer.

Ensuite, pour le div n'oublie pas de rajouter une property publique pour donner l'accès à la page fille.

Dans tous les cas, je t'invite à relire calmement, en prenant ton temps, la partie de l'article que je t'indique depuis le début. Ca ne peut être plus clair.
19/10/2010, 15h46
JCMANSION

J'ai ajouté au div property="publique"

quand je tape Me. l'intellisense ne me propose pas MasterGen

J'ai beau relire calmement l'article que tu m'indiques depuis le début, je n'y comprend rien
JCM
19/10/2010, 16h10
Nicolas Esprit

Bon, on va faire plus simple : poste ici le code en question (MasterPage et Page), et on y verra plus clair sur ce qui pose problème.

Voici le code de la MasterPage

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<%@ Master Language="VB" %>
<%@ Import Namespace="System.data" %>
<%@ Import Namespace="System.data.OleDB" %>
<%@ import Namespace="System.IO" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<script runat="server">
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Page sans titre</title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="GeneralMP" runat="server" property="publique" 
        style="width: 1010px; height: 673px; position: relative; font-family: Arial; color: #336600;font-size: 14px; margin-left: auto; margin-right: auto;">
        <div id="global" 
            style="width: 1010px; position: relative; height: 673px; background-image: url('Images/MonImage.png'); background-repeat: no-repeat;">
</div>
</div>
    </form>
</body>
</html>

Et de la Page

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<%@ Page Language="VB" MasterPageFile="~/MasterGen.master"  Title="Page sans titre" %>
<%@ Import Namespace="System.data" %>
<%@ Import Namespace="System.data.OleDB" %>
<%@ import Namespace="System.IO" %>
<%@ import Namespace="System.Web.UI.HtmlControls" %>
<%@ import Namespace="System.Web.UI.Page" %>
<%@ MasterType VirtualPath="~/MasterGen.master" %>
<script runat="server">
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
        Me.Master.Style.add(HtmlTextWriterStyle.BackgroundImage, "Images/Fond_Dependance.png");  
    End Sub
</script>

Encore merci pour ton aide, car je suis complètement perdu
JCM

20/10/2010, 09h31
Nicolas Esprit
Tu n'utilises pas de classe code-behind ? Où définis tu le nom de ta MasterPage ? Exemple :

Code:

<%@ Master Language="VB" CodeFile="MaMasterPage.master.vb" Inherits="MaMasterPage" %>

De même, où est la property publique te permettant d'accéder à ton div ?

Code:

property="publique"

Ca..... ça n'existe pas. La property publique est à mettre dans ton code vb comme l'exemple de l'article :
Code:

1 2 3 4 5 public string FooterText { set { lblFooter.Text = value; } }
Je pourrais bien entendu te fournir le code tout fait qui fonctionne pour ce que tu souhaites faire mais je ne fais pas le boulot des autres. Et surtout, ça ne te servira pas, il te faut apprendre par toi même. C'est en forgeant qu'on devient forgeron.
20/10/2010, 11h28
JCMANSION
Bon, j'ai créé une nouvelle MasterPage avec le code séparé

Code:

<%@ Master Language="VB" CodeFile="MasterGenP.master.vb" Inherits=" MasterGenP " %>

Ce code suivant je le place où

Code:

<%@ MasterType VirtualPath="~/MasterGen.master" %>

J'ai mis l'article en VB
Code:

1 2 3 4 5 Public WriteOnly Property FooterText() As String Set lblFooter.Text = value End Set End Property
Ce code je le place sur la master ou sur la page ?
Dans ce code je remplace FooterText() par GeneralMP()
et LblFooter.text par Me.GeneralMP.style.............;;

JCM

Bon, pour aller plus vite :

Markup de la MasterPage :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<%@MasterLanguage="VB"AutoEventWireup="false"CodeBehind="MasterGen.master.vb"
Inherits="WebApplication1.MasterGen" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<asp:ContentPlaceHolderID="head"runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<formid="form1"runat="server">
<divid="GeneralMP"runat="server"property="publique"style="width: 1010px; height: 673px;
position: relative; font-family: Arial; color: #336600; font-size: 14px; margin-left: auto;
margin-right: auto;">
<divid="global"style="width: 1010px; position: relative; height: 673px; background-image: url('Images/MonImage.png');
background-repeat: no-repeat;">
</div>
</div>

<asp:ContentPlaceHolderID="ContentPlaceHolder1"runat="server">
</asp:ContentPlaceHolder>

</form>
</body>
</html>

Code-Behind de la MasterPage :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13

PublicPartialClass MasterGen
 Inherits System.Web.UI.MasterPage
 PublicWriteOnlyProperty GeneralMPInnerText() AsString
  Set(ByVal value AsString)
    GeneralMP.InnerText = value
  EndSet
 EndProperty

 ProtectedSub Page_Load(ByVal sender AsObject, ByVal e As System.EventArgs) HandlesMe.Load
 EndSub
EndClass

Markup de la Page :

Code:

1
2
3
4
5
6
7
8
<%@PageLanguage="vb"AutoEventWireup="false"CodeBehind="Default.aspx.vb"Inherits="WebApplication1._Default"
MasterPageFile="~/MasterGen.Master" %>
<%@MasterTypeVirtualPath="~/MasterGen.Master"TypeName="MasterGen">

<asp:ContentContentPlaceHolderID="ContentPlaceHolder1">
</asp:Content>

Code-Behind de la page :

Code:

1
2
3
4
5
6
7
8

PartialPublicClass _Default
 Inherits System.Web.UI.Page
 ProtectedSub Page_Load(ByVal sender AsObject, ByVal e As System.EventArgs) HandlesMe.Load
   Me.Master.GeneralMPInnerText = "Bla Bla"
 EndSub
EndClass

La seule chose qu'il te reste à faire : changer non plus le InnerText mais l'image de fond.

Pour information, tu avais déjà un code semblable sur MSDN...

20/10/2010, 14h43
JCMANSION

Merci pout ce code, mais je ne vois pas comment changer
le "Bla Bla" de Me.Master.GeneralMPInnerText = "Bla Bla"
par background-image: url('Images/MonImage.png')

Est-ce Me.Master.GeneralMPInnerText = "background-image: url('Images/MonImage.png')"

Voir 40 message(s) de cette discussion en une page