Nettoyer et indenter le code HTML généré avant envoi page

CUCARACHA · 06/06/2012, 07h49

Bonjour,

Je travaille sur des vues un peu complexes et, à des fin de débogage, j'aimerais correctement indenter le HTML juste avant que la page ne soit transmise au navigateur (je désactiverais cette fonctionnalité plus tard).

Quelqu'un pourrait me dire comment faire ?

D'avance merci

Laurent

**Chubyone** · 07/06/2012, 17h59

J'ai testé un truc vite fait pour le fun et le challenge, mais sache que je n'approuve pas vraiment le besoin et la solution (trop dangereux) ;-)
Désactive le très vite...

Avec un peu d'aide ici ou là
http://stackoverflow.com/a/5259500/117314
http://stackoverflow.com/a/1593137/117314

Et en utilisant ca:
http://sourceforge.net/projects/tidynet/
http://sourceforge.net/projects/tidy.../topic/1313125

Ca donne un module et un filter:

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
28
29
30
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
namespace QMVC
{
  public class IndentingModule : IHttpModule
  {
 
    public void Dispose()
    {
    }
 
    public void Init(HttpApplication context)
    {
      context.ReleaseRequestState += new EventHandler(context_ReleaseRequestState);
    }
 
    void context_ReleaseRequestState(object sender, EventArgs e)
    {
      HttpResponse response = HttpContext.Current.Response;
      if (string.Compare(response.ContentType, "text/html", true) == 0)
      {
        response.Filter = new IndentingFilter(response.Filter, response.ContentEncoding);
      }
    }
  }
}

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
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
66
67
68
69
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO;
using TidyNet;
 
namespace QMVC
{
  class IndentingFilter : MemoryStream
  {
    private Stream outputStream;
    private Encoding encoding;
 
    public IndentingFilter(Stream output, Encoding encoding)
    {
      outputStream = output;
      this.encoding = encoding;
    }
 
    public override void Write(byte[] buffer, int offset, int count)
    {
      var sb = new StringBuilder(count + 1024);
      sb.Append(this.encoding.GetString(buffer, offset, count));
 
      using (System.IO.MemoryStream tmpstream = new System.IO.MemoryStream())
      using (System.IO.MemoryStream parsetmpstream = new System.IO.MemoryStream())
      {
        //var lol = @"<html><head>
        //</head><body>LOLLLLLLLLLLLL<div>truc       
        //
        //    </div>
        //
        //                ................
        //
        //
        //        </body></html>";
        //var lolB = encoding.GetBytes(lol);
        //tmpstream.Write(lolB, 0, lolB.Length);
 
        tmpstream.Write(encoding.GetBytes(sb.ToString()), 0, sb.Length);
        tmpstream.Position = 0;
 
        var tidy = new Tidy();
        tidy.Options.CharEncoding = CharEncoding.UTF8;
        tidy.Options.DocType = DocType.Omit;
        tidy.Options.DropFontTags = true;
        tidy.Options.LogicalEmphasis = true;
        tidy.Options.Xhtml = true;
        tidy.Options.XmlOut = true;
        tidy.Options.MakeClean = false;
        tidy.Options.TidyMark = false;
        tidy.Options.QuoteNbsp = false;
        tidy.Options.NumEntities = true;
        tidy.Options.BreakBeforeBR = true;
        tidy.Options.SmartIndent = true;
        tidy.Options.WrapScriptlets = true;
 
        tidy.Parse(tmpstream, parsetmpstream, new TidyMessageCollection());
 
        byte[] buff = parsetmpstream.ToArray();
        outputStream.Write(buff, 0, buff.Length);
 
        base.Write(buffer, offset, count);
      }
    }
  }
}

Et dans le web.config:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
...
<httpModules>
      <add name="IndentingModule" type="QMVC.IndentingModule"/>
    </httpModules>
  </system.web>
<system.webServer>
    <modules runAllManagedModulesForAllRequests="true">
      <add name="IndentingModule" type="QMVC.IndentingModule"/>
    </modules>
...

Avec un _Layout:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
          <head>
  <meta charset="utf-8" />
                       <title>@ViewBag.Title</title>
  <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
</head>
<body>
  @RenderBody()
  <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
</body>
</html>

Et un index.cshtml:

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
@{
    ViewBag.Title = "Index";
}
 
<h2>Index</h2>
 
@ViewBag.Id
LOl<div><div>                      LOL?</div>
                    </div>
                    <p>
 
 
         ??</p><br /><br />
 
 
                           YYYAAA              ...
 
 
                           <script        >
 
                                                          console.log('lol');                        
   </script>

Ca me sort ca :

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
28
29
30
31
32
33
34
35
36
37
38
39
 
<html> 
  <head> 
    <meta charset="utf-8" /> 
 
 
    <title>Index</title> 
    <link href="<a href="http://localhost:61284/Content/Site.css" target="_blank">/Content/Site.css</a>" rel="stylesheet" 
    type="text/css" /> 
  </head> 
 
 
  <body> 
    <h2>Index</h2> 
    LOl 
 
 
    <div> 
      LOL? 
    </div> 
 
 
    <p>??</p> 
 
 
    <br /> 
    <br /> 
     YYYAAA ...  
<script type="text/javascript"> 
 
 
                                                          console.log('lol');                         
 
 
</script> 
<script src="<a href="http://localhost:61284/Scripts/jquery-1.7.1.min.js" target="_blank">/Scripts/jquery-1.7.1.min.js</a>" type="text/javascript"> 
</script> 
  </body> 
</html>

Désactivé j'ai ça:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
 
<!DOCTYPE html> 
<html> 
          <head> 
  <meta charset="utf-8" /> 
                       <title>Index</title> 
  <link href="<a href="http://localhost:61284/Content/Site.css" target="_blank">/Content/Site.css</a>" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
 
 
<h2>Index</h2> 
 
 
 
 
LOl<div><div>                      LOL?</div> 
                    </div> 
                    <p> 
 
 
 
 
         ??</p><br /><br /> 
 
 
 
 
                           YYYAAA              ... 
 
 
 
 
                           <script        > 
 
 
                                                          console.log('lol');                         
   </script> 
  <script src="<a href="http://localhost:61284/Scripts/jquery-1.7.1.min.js" target="_blank">/Scripts/jquery-1.7.1.min.js</a>" type="text/javascript"></script> 
</body> 
</html>

A l'extreme limite, ajoute une transform dans le web.release.config pour etre sur de le virer "au cas ou".

CUCARACHA · 07/06/2012, 18h10

Salut,

Merci beaucoup pour cette réponse très détaillée... En fait, mon système fonctionne très bien, je n'ai donc plus besoin de bien indenter le code dans le module public.

En revanche, comme il s'agit d'un CMS et que son edieur est TinyMCE en mode full page, ça pourrait être plus sympa de bien ranger les divs et dans le back office, les perfs sont moins importantes puisqu'on n'édite pas les pages au rythme où elles doivent être consultées (en plus le back office sera sans doute, à terme, sur un serveur dédié).

Je vais tester tout ça...

Sincères salutations

Laurent

Nettoyer et indenter le code HTML généré avant envoi page

ASP.NET MVC

Discussions similaires

Partager

Partager