[C#] Rendu du TreeView avec IE

Version imprimable

26/02/2004, 10h42
grincheux

[C#] Rendu du TreeView avec IE

Bonjour,
je veux utiliser les treeview dans une page et probleme....
En effet, le treeview ne s affiche pas bien sous Internet Explorer. Par contre, il s affiche tres bien sous Mozilla.

QUelqu'un a t-il une solution?

Merci d'avance
26/02/2004, 10h45
Keihilin

Re: [ASPX] IE et treeview

Citation:

Envoyé par grincheux

En effet, le treeview ne s affiche pas bien sous Internet Explorer.

Qu'est-ce que ça veut dire "pas bien" ??
26/02/2004, 10h51
grincheux

ca veut dire que sous IE, j ai un truc dans le genre:

Citation:

root Node6 Node8 Node9 Node7

et sous Moezilla, j ai une vrai arborescence
root
...Node
......Node
...Node
26/02/2004, 10h57
Keihilin

Qu'est-ce que tu utilises comme TreeView ?

On peut voir un exemple de ton code ?
26/02/2004, 11h10
grincheux

J'utilise le composant treewiew de Microsoft.Web.UI.WebControls que j'ai telecharger sur msdn.

Le code se limite à une ligne declarative

Code:

protected Microsoft.Web.UI.WebControls.TreeView TreeView1;
26/02/2004, 11h13
Keihilin

Ok...

Mais moi je vois plutôt bien un petit problème de css...

Est-ce qu'on peut voir le code complet de ta page ?

Pas de probleme. Mais j'utilise pas de css encore. J'en suis au niveau experimentation.

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls" %>
<%@ Page language="c#" Codebehind="g_essai_treeview.aspx.cs" AutoEventWireup="false" Inherits="philae.g_essai_treeview" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
	<HEAD>
		<title>g_essai_treeview</title>
		<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
		<meta name="CODE_LANGUAGE" Content="C#">
		<meta name="vs_defaultClientScript" content="JavaScript">
		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie3-2nav3-0">
	</HEAD>
	<body MS_POSITIONING="GridLayout">
		<TABLE height="182" cellSpacing="0" cellPadding="0" width="178" border="0" ms_2d_layout="TRUE">
			<TR vAlign="top">
				<TD width="178" height="182">
					<form id="Form1" method="post" runat="server">
						<TABLE height="161" cellSpacing="0" cellPadding="0" width="170" border="0" ms_2d_layout="TRUE">
							<TR vAlign="top">
								<TD width="24" height="16"></TD>
								<TD width="146"></TD>
							</TR>
							<TR vAlign="top">
								<TD height="145"></TD>
								<TD>
									<iewc:TreeView id="TreeView1" runat="server" Width="144px" Height="144px" SystemImagesPath="treeimages/">
										<iewc:TreeNode Text="root">
											<iewc:TreeNode CheckBox="True" Text="Node6">
												<iewc:TreeNode CheckBox="True" Text="Node8"></iewc:TreeNode>
												<iewc:TreeNode CheckBox="True" Text="Node9"></iewc:TreeNode>
											</iewc:TreeNode>
										</iewc:TreeNode>
										<iewc:TreeNode Text="Node7"></iewc:TreeNode>
									</iewc:TreeView></TD>
							</TR>
							&nbsp;
						</TABLE>
					</form>
				</TD>
			</TR>
		</TABLE>
	</body>
</HTML>

Le codebehind est:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
 
namespace philae
{
	/// <summary>
	/// Description résumée de g_essai_treeview.
	/// </summary>
	public class g_essai_treeview : System.Web.UI.Page
	{
		protected Microsoft.Web.UI.WebControls.TreeView TreeView1;
		#region Attributs
		#endregion
 
		private void Page_Load(object sender, System.EventArgs e)
		{
			// Placer ici le code utilisateur pour initialiser la page
		}
 
 
		#region Code généré par le Concepteur Web Form
		override protected void OnInit(EventArgs e)
		{
			//
			// CODEGEN : Cet appel est requis par le Concepteur Web Form ASP.NET.
			//
			InitializeComponent();
			base.OnInit(e);
		}
 
		/// <summary>
		/// Méthode requise pour la prise en charge du concepteur - ne modifiez pas
		/// le contenu de cette méthode avec l'éditeur de code.
		/// </summary>
		private void InitializeComponent()
		{    
			this.Load += new System.EventHandler(this.Page_Load);
 
		}
		#endregion
 
	}
}

26/02/2004, 11h25
Maniak

Et le code HTML qui est envoyé au navigateur ?
C'est amusant que ça marche sous Moz et pas sous IE, d'habitude c'est l'inverse qui se passe avec le code bancal généré :)
26/02/2004, 11h29
Keihilin

Oui c'est vrai que c'est amusant...

Il y a juste un truc qu'on ne sait pas : la version de IE ??

Effectivement, il faudrait voir le code HTML renvoyé...

J'utilise la version 6 d'internet explorer.

Le code que je recois du sertveur est :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
	<head>
		<title>g_essai_treeview</title>
		<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
		<meta name="CODE_LANGUAGE" Content="C#">
		<meta name="vs_defaultClientScript" content="JavaScript">
		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie3-2nav3-0">
	</head>
 
	<body MS_POSITIONING="GridLayout">
		<table height="182" cellSpacing="0" cellPadding="0" width="178" border="0" ms_2d_layout="TRUE">
			<tr vAlign="top">
				<td width="178" height="182">
					<form name="Form1" method="post" action="g_essai_treeview.aspx" id="Form1">
<input type="hidden" name="__VIEWSTATE" value="dDwtODU5NjgwNzQyO3Q8O2w8aTwxPjs+O2w8dDw7bDxpPDE+Oz47bDx0PEAwPHA8cDxsPFNlbGVjdGVkTm9kZUluZGV4Oz47bDwwOz4+Oz47Ozs7O0AwPDtAMDxsPGk8MD47PjtsPEAwPEAwPHA8bDxTZWxlY3RlZDtFeHBhbmRlZDs+O2w8bzx0PjtvPHQ+Oz4+Ozs7Oz47Oz47Pjs+Oz47Pjs7Pjs+Pjs+Pjs+w0j34rgdOksq0zBSXBhZPxeD1f0=" />
 
						<table height="161" cellSpacing="0" cellPadding="0" width="170" border="0" ms_2d_layout="TRUE">
							<tr vAlign="top">
								<td width="24" height="16"></td>
 
								<td width="146"></td>
							</tr>
							<tr vAlign="top">
								<td height="145"></td>
								<td>
									<div id="TreeView1" style="height:144px;width:144px;height:144px;width:144px;">
<table CELLSPACING="0" CELLPADDING="0" BORDER="0">
	<tr><td valign='middle'>&nbsp;<a href="javascript:__doPostBack('TreeView1','oncollapse,0')"><img align='top' border='0' class='icon' SRC='treeimages/Fminus.gif'></a><font COLOR="#00FFFF" SIZE="2" style="display:inline;font-size:10pt;font-face:Times;text-decoration:none;cursor:hand;overflow:hidden;color:#00FFFF;background-color:#08246B;">&nbsp;root</font></td></tr>
<tr><td valign='middle'>&nbsp;<img align='top' border='0' SRC='treeimages/I.gif'><a href="javascript:__doPostBack('TreeView1','onexpand,0.0')"><img align='top' border='0' class='icon' SRC='treeimages/Lplus.gif'></a><input style='display:inline' align=middle type=checkbox  onclick="__doPostBack('TreeView1','oncheck,0.0')" /><a href="javascript:__doPostBack('TreeView1','onselectedindexchange,0,0.0')"><font COLOR="#000000" SIZE="2" style="display:inline;font-size:10pt;font-face:Times;color:black;text-decoration:none;cursor:hand;overflow:hidden;">&nbsp;Node6</font></a></td></tr>
 
<tr><td valign='middle'>&nbsp;<img align='top' border='0' class='icon' SRC='treeimages/L.gif'><a href="javascript:__doPostBack('TreeView1','onselectedindexchange,0,1')"><font COLOR="#000000" SIZE="2" style="display:inline;font-size:10pt;font-face:Times;color:black;text-decoration:none;cursor:hand;overflow:hidden;">&nbsp;Node7</font></a></td></tr>
 
</table>
</div></td>
							</tr>
							&nbsp;
						</table>
 
<input type="hidden" name="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" value="" />
<script language="javascript">
<!--
	function __doPostBack(eventTarget, eventArgument) {
		var theform;
		if (window.navigator.appName.toLowerCase().indexOf("netscape") > -1) {
			theform = document.forms["Form1"];
		}
		else {
			theform = document.Form1;
		}
		theform.__EVENTTARGET.value = eventTarget.split("$").join(":");
		theform.__EVENTARGUMENT.value = eventArgument;
		theform.submit();
	}
// -->
</script>
</form>
 
				</td>
			</tr>
		</table>
	</body>
</html>

Rectification. Le code en,vye ci-dessus est le code recu sous mozilla.

Le code sous IE est le suivant:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
ï»¿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0040)http://philae:9999/g_essai_treeview.aspx -->
<HTML XMLNS:TVNS><HEAD><TITLE>g_essai_treeview</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META content="MSHTML 6.00.2800.1400" name=GENERATOR>
<META content=C# name=CODE_LANGUAGE>
<META content=JavaScript name=vs_defaultClientScript>
<META content=http://schemas.microsoft.com/intellisense/ie3-2nav3-0 
name=vs_targetSchema></HEAD>
<BODY MS_POSITIONING="GridLayout">
<TABLE height=182 cellSpacing=0 cellPadding=0 width=178 border=0 
ms_2d_layout="TRUE">
  <TBODY>
  <TR vAlign=top>
    <TD width=178 height=182>
      <FORM id=Form1 name=Form1 action=g_essai_treeview.aspx method=post><INPUT 
      type=hidden name=__TreeView1_State__> <INPUT type=hidden 
      value=dDwtODU5NjgwNzQyO3Q8O2w8aTwxPjs+O2w8dDw7bDxpPDE+Oz47bDx0PEAwPHA8cDxsPFNlbGVjdGVkTm9kZUluZGV4Oz47bDwwOz4+Oz47Ozs7O0AwPDtAMDxsPGk8MD47PjtsPEAwPEAwPHA8bDxTZWxlY3RlZDs+O2w8bzx0Pjs+Pjs7Ozs+Ozs+Oz47Pjs+Oz47Oz47Pj47Pj47bDxUcmVlVmlldzE7Pj7dIEctz2hpObujEvNhHDTOZ3J+/w== 
      name=__VIEWSTATE> 
      <TABLE height=161 cellSpacing=0 cellPadding=0 width=170 border=0 
      ms_2d_layout="TRUE">
        <TBODY>
        <TR vAlign=top>
          <TD width=24 height=16></TD>
          <TD width=146></TD></TR>
        <TR vAlign=top>
          <TD height=145></TD>
          <TD><tvns:treeview id=TreeView1 style="WIDTH: 144px; HEIGHT: 144px" 
            onselectedindexchange="javascript: if (event.oldTreeNodeIndex != event.newTreeNodeIndex) this.queueEvent('onselectedindexchange', event.oldTreeNodeIndex + ',' + event.newTreeNodeIndex)" 
            oncheck="javascript: if (this.clickedNodeIndex != null) this.queueEvent('oncheck', this.clickedNodeIndex)" 
            oncollapse="javascript: if (this.clickedNodeIndex != null) this.queueEvent('oncollapse', this.clickedNodeIndex)" 
            onexpand="javascript: if (this.clickedNodeIndex != null) this.queueEvent('onexpand', this.clickedNodeIndex)" 
            systemImagesPath="treeimages/" HelperID="__TreeView1_State__" 
            selectedNodeIndex="0"><tvns:treenode 
            Selected="true">root<tvns:treenode CheckBox="True"> 
            Node6<tvns:treenode CheckBox="True"> Node8 
            </tvns:treenode><tvns:treenode CheckBox="True">Node9 
            </tvns:treenode></tvns:treenode></tvns:treenode><tvns:treenode>Node7 
            </tvns:treenode></tvns:treeview></TD></TR>&nbsp; 
  </TBODY></TABLE></FORM></TD></TR></TBODY></TABLE></BODY></HTML>

Le probleme serait donc du cote du serveur.

26/02/2004, 11h43
Keihilin

Cut & Paste du code HTML...

Résultat : ça marche très bien chez moi...

:roll:
26/02/2004, 11h47
Keihilin

Citation:

Envoyé par Keihilin

Cut & Paste du code HTML...

Résultat : ça marche très bien chez moi...

:roll:

Je parlais du code reçu par Mozilla...

En effet, le code reçu par IE ne fonctionne pas...

C'est vraiment très étrange...

Je ne connais pas ce treeview, mais il n'a pas vraiment une bonne réputation. Je ne peux que te conseiller d'en chercher un autre ou d'en développer un...
D'expérience, c'est pas très dur.
26/02/2004, 12h06
Maniak

Citation:

Envoyé par grincheux

Le probleme serait donc du cote du serveur.

Non, le problème est du contrôle de treeview qui pond du code différent selon si le navigateur est IE ou autre chose. C'est un mode de fonctionnement foireux qui rend les tests des pages abominables (c'est déjà pas évident de s'assurer que le code d'une page se comporte correctement, si en plus il faut tenir compte du fait que ce code ne sera pas forcément le même sur une autre machine et qu'il peut se comporter totalement différemment...)

Je rejoins plutôt l'avis de Keihilin : essaye de faire ton propre contrôle, ou trouves-en un qui pond du code HTML indépendant des navigateurs (s'il y en a).

Il doit y avoir un moyen de faire marcher celui-là, mais je te conseille vraiment de chercher une alternative moins bordélique niveau HTML.
26/02/2004, 12h42
grincheux

Merci.
Je vais essayer de trouver autre chose ou de redévelopper des classes
15/06/2005, 18h29
bendj
Bonjour,

J'ai le même problème que grincheux. Je développe sous WebMatrix, et quand je testais en local, sur mon poste, la page s'affichait très bien sous IE et FireFox.

J'ai mis pour la première fois ma page sur un serveur IIS, et là, mon TreeView ne fonctionne plus !!

Dans webconfig, j'ai mis :
Code:

1 2 3 <browserCaps> TagWriter=System.Web.UI.HtmlTextWriter </browserCaps>
pour être sûr que le code généré soit le même.