Changer dynamiquement background-image

**JCMANSION** · 18/10/2010, 10h41

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

**Nicolas Esprit** · 18/10/2010, 11h09

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é.

**JCMANSION** · 18/10/2010, 11h58

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

**Nicolas Esprit** · 18/10/2010, 13h51

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

**JCMANSION** · 18/10/2010, 16h36

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

**Nicolas Esprit** · 18/10/2010, 17h33

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 ?

**JCMANSION** · 19/10/2010, 09h55

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

**tortuegenie** · 19/10/2010, 10h38

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

**Nicolas Esprit** · 19/10/2010, 10h41

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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é.

**JCMANSION** · 19/10/2010, 12h09

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

**Nicolas Esprit** · 19/10/2010, 12h13

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 ?

**JCMANSION** · 19/10/2010, 13h53

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

Sur la contentpage j'ai ajouté :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<%@ 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

**Nicolas Esprit** · 19/10/2010, 14h06

Ok je vois.

Ceci dans ta Page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<%@ 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.

**JCMANSION** · 19/10/2010, 15h46

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

**Nicolas Esprit** · 19/10/2010, 16h10

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.

**JCMANSION** · 20/10/2010, 09h22

Voici le code de la MasterPage

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Nicolas Esprit** · 20/10/2010, 09h31

Tu n'utilises pas de classe code-behind ? Où définis tu le nom de ta MasterPage ? Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<%@ 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 :

Sélectionner tout - Visualiser dans une fenêtre à part

property="publique"

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**JCMANSION** · 20/10/2010, 11h28

Bon, j'ai créé une nouvelle MasterPage avec le code séparé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Ce code suivant je le place où

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

J'ai mis l'article en VB

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Nicolas Esprit** · 20/10/2010, 13h36

Bon, pour aller plus vite :

Markup de la MasterPage :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**JCMANSION** · 20/10/2010, 14h43

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')"

Changer dynamiquement background-image

ASP.NET

Discussions similaires

Partager

Partager