Parser un code html de la vue dans mon controller

**Overcrash** · 06/09/2013, 16h56

Bonjour,

Pour faire simple, j'ai une vue qui génére un tableau droppable dans lequel l'utilisateur va y mettre ses items.

J'aimerai récupérer le tableau sa structure et items pour le parser et sauvegarder l'emplacement de chaque item afin de le générer quand il reviendra dessus.

Pour le moment je n'arrive pas à trouver le moyen de parser le tableau dans mon controller.

Mon tableau :

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
  <table id="table1">
 
				        <!--<colgroup><col width="4400"/><col width="4400"/></colgroup>-->
				        <tr class="tr">
                            <td colspan="2" class="mark">
                                Module Facturation
                            </td>                    
				        </tr>
				        <tr class="tr" style="background-color: #eee">
					        <td class="td">&nbsp;</td>
					        <td class="td"></td>
				        </tr>
				        <tr class="tr"  style="background-color: #eee">
					        <td class="td"></td>
					        <td class="td"></td>
				        </tr>
				        <tr class="tr" style="background-color: #eee">
                            <td class="td"></td>
					        <td class="td"></td>
				        </tr>
				        <tr class="tr"  style="background-color: #eee">
                            <td class="td"></td>
					        <td class="td"></td>
				        </tr>
				        <tr class="tr" style="background-color: #eee">
                            <td class="td"></td>
					        <td class="td"></td>
				        </tr>
			        </table>

La page complète :

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Mim.Models.Fields>>" %>
<html>
	<head>
		<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
         <style type="text/css">
 
                body {
	                font-family: arial;
	                margin: 0px; /* for IE6 / IE7 */
                }
 
                /* add bottom margin between tables */
                #table1
                {
	                margin-bottom: 2px;
                   /* float : left;*/
                }
 
                /* drag container */
                #drag {
	                margin: auto;
	                width: 400px;
                }
 
                /* set border for images inside DRAG region - exclude image margin inheritance */
                /* my WordPress theme had some funny margin settings */
                #drag img {
	                margin: 1px;
                }
 
                /* drag objects (DIV inside table cells) */
                .drag {
	                cursor: move;
	                margin: auto;
	                margin-bottom: 1px;
	                margin-top: 1px;
	                z-index: 10;
	                background-color: white;
	                text-align: left;
	                font-size: 10pt; /* needed for cloned object */
	                width: 200px;
	                height: auto;
	                line-height: 20px;
	                /* round corners */
	                border-radius: 4px; /* Opera, Chrome */
	                -moz-border-radius: 4px;  /*FF*/
                }
 
 
                /* drag objects border for the first table */
                .t1 {
	                /*border: 2px solid #499B33;*/
                }
 
                /* allow / deny access to cells marked with 'mark' class name */
                .mark {
	                color: white;
	                background-color: #9B9EA2;
                }
                .td {
 
                  width: 400px;
                  line-height: normal;
                }
             .tr {
                 height:20px;
             }
 
 
            .floatleft {
                    float:left;
                    margin-left : 150px;
                    position : absolute; 
                    z-index : 2; 
            }
             .fondheader { 
                  position : absolute;
                  z-index : 1; 
                  width : 1423px;
                  Height : 86px;
            }
            .section {
                padding-bottom : 95px; 
            }
            .menuItem {
                    float:left;
                    width:10px;
                    height:200px;
                    margin:5px;
                    background: #e0e0e0;
             }
 
            #tree {
			    vertical-align: top;
			    width: 250px;
                float:left;
                margin-right:5px;
		    }
             #fieldset {
                 float:left;
                 margin-left:5px;
                 width:400px;
             }
 
 
         </style>
 
 
 
        <script src="/Scripts/jquery-1.7.1.js" type="text/javascript" ></script>
        <script src="/Scripts/jquery-ui-1.8.20.js" type="text/javascript" ></script>
        <script src="/Scripts/jquery/jquery.js" type="text/javascript"></script>
	    <script src="/Scripts/jquery/jquery-ui.custom.js" type="text/javascript"></script>
	    <script src="/Scripts/jquery/jquery.cookie.js" type="text/javascript"></script>
	    <script src="/Scripts/jquery.dynatree.js" type="text/javascript"></script>
        <link href="/Css/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
 
         <script type="text/javascript">
 
             $(document).ready(function () {
                 function initDraggables() { //permet de définir les items draggrables.
                     $(".drag").draggable({
                         revert: true
                     });
                 }
                    initDraggables(); // appelle la fonction pour mettre la valeur a true ?
                    initDroppables();
                    function initDroppables() {
                        $("#table1 td").droppable({ // permet de définir la zone de drop. 
                            accept: ".drag",   //permet de définir l'élément qu'il peut recevoir 
                            activeClass: "drop-active",        // ???
                            hoverClass: "drop-hover",          // ???
                            drop: function (event, ui) { // fonction de drop
                                var $item = ui.draggable;  // initialise $item avec le drag courant
 
 
 
                                var $allreadyItem = $(this).find('.drag'); // cherche tous les items drag
 
                                if ($allreadyItem.length) { //check si il y a un caractere donc item 
                                    var $tmp = $allreadyItem;  // variable doublon 
 
                                    $allreadyItem.remove();    // on remove tout
 
                                    $('#drag').append($tmp); // on add tmp à la zone drag
                                }
 
 
 
                                $(this).html('<div class="drag t1">' + $item.html() + '</div>');   //insert l'html la ou le drop
                                if (!$item.hasClass('drag t2')) {  // si c'est pas un drag t2 au niveau de la classe CSS
                                    $item.remove();        //on delete l'item
                                }
                                initDraggables();  //on redéfinie les items draggabe
                            }
                        });
 
 
                        $("#drag").droppable({ // permet de définir la zone de drop. 
                            accept: ".drag",   //permet de définir l'élément qu'il peut recevoir 
                            activeClass: "drop-active",        // ???
                            hoverClass: "drop-hover",          // ???
                            drop: function (event, ui) { // fonction de drop
                                var $item = ui.draggable;  // initialise $item avec le drag courant
 
                                var $tmp = $item;  // variable doublon 
                                $item.remove();    // on remove tout
                                $('#drag').append($tmp); // on add tmp à la zone drag
 
                                initDraggables();  //on redéfinie les items draggabe
                            }
                        });
                    }
 
                    var bool = false; 
                    $("#lignetableau").click(function () {
                        if (!bool) {
                            $('#table1').append('<tr class="tr" style="background-color: #eee"><td class="td"></td> <td class="td"></td> </tr>');
                            bool = true;
                        }
                        else {
                            bool = false;
                            $('#table1').append('<tr class="tr" style="background-color: #eee"><td class="td"></td> <td class="td"></td> </tr>');
                        }
                        initDroppables();
                    });
 
 
                    $("#tree").dynatree({
                        //          autoCollapse: true,
                        minExpandLevel: 1,
                        //          persist: true,
                        onPostInit: function (isReloading, isError) {
                            this.reactivate();
                        },
                        onActivate: function (node) {
                            // Use <a> href and target attributes to load the content:
                            if (node.data.href) {
                                // Open target
                                window.open(node.data.href, node.data.target);
                                // or open target in iframe
                                //                $("[name=contentFrame]").attr("src", node.data.href);
                            }
                        }
                    });
 
 
             });
 
 
    </script>
 
 
 
		<title>Etape 2 - Personalisation des vues</title>
	</head>
	<body>
 
        <header class="section">     
            <asp:Image class="fondheader" ID="Image4" runat="server" ImageUrl="~/images/fond-header.jpg"  Height="86"/>
            <div class="floatleft">
                <asp:Image ID="Image5" runat="server" ImageUrl="~/images/logo-synergie.jpg"/>
                <asp:Image style="margin-left:150px ;" ID="Image6" runat="server" ImageUrl="~/images/iage-droite-header.jpg"/>
            </div>
       </header>   
 
 
           <%: @Html.Raw(ViewBag.TreeNavigation) %>
 
 
         <!-- Tableau de la mise en page -->
 
			        <table id="table1">
 
				        <!--<colgroup><col width="4400"/><col width="4400"/></colgroup>-->
				        <tr class="tr">
                            <td colspan="2" class="mark">
                                Module Facturation
                            </td>                    
				        </tr>
				        <tr class="tr" style="background-color: #eee">
					        <td class="td">&nbsp;</td>
					        <td class="td"></td>
				        </tr>
				        <tr class="tr"  style="background-color: #eee">
					        <td class="td"></td>
					        <td class="td"></td>
				        </tr>
				        <tr class="tr" style="background-color: #eee">
                            <td class="td"></td>
					        <td class="td"></td>
				        </tr>
				        <tr class="tr"  style="background-color: #eee">
                            <td class="td"></td>
					        <td class="td"></td>
				        </tr>
				        <tr class="tr" style="background-color: #eee">
                            <td class="td"></td>
					        <td class="td"></td>
				        </tr>
			        </table>
 
 
 
         <!-- Interface du panier de champs -->
 
                <div id="drag" class="menuItem">    
 
                        <% foreach (var item in Model)
                            { %>
                                <div class="drag t1" id="i<%:item.FieldID %>">
                                    <label><%:item.FieldName%></label>
                                    <img src="/" />
                                </div>
                            <% } 
                       %>
                </div> 
 
         <!-- Panneau de config -->
        <div id="fieldset">
            <fieldset><legend>Commandes</legend><br>
                <input id="lignetableau" type="button" name="Ajouterligne" value="Ajouter une ligne" />
                <br />
                <a href="ChoixItem" TARGET="_blank">Ajouter un champ ?</a>
                <form id="Form1" action="#" method="post" runat="server">
                    <input type="submit" name="save" value="Sauvegarder ma configuration" id="Save"/>
                </form>
            </fieldset>
        </div>
 
 
	</body>
</html>

Dans le controller j'ai essayé ceci mais ça retourne null ...

Code :

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

1
2
3
4
5
6
7
 [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Index1(string save, string table1)
        {
            //table1 renvoi null 
 
            return View();
        }

Merci par avance.

Je demande pas forcément la solution mais si vous avez des pistes ou ne serait ce des idées je suis preneur car pour le moment je cherche mais je sais pas vraiment quoi ...

**Overcrash** · 17/09/2013, 16h46

Re,

J'ai trouvé une réponse !

Je crée une textaera.
Je la rempli avec le code html de mon tableau via Jquery.
Je récupère le textaera.
Je parse mon tableau html.

**psg_122** · 17/02/2015, 13h27

Salut, j'ai exactement le meme besoin que toi. Est ce que tu pourrais me donner un exemple de code que je puisse avoir une idée de comment faire ?
Merci

**Overcrash** · 19/02/2015, 15h34

Oula !
C'est vieux comme post

J'ai plus le code.
Par contre j'ai donné l'algo avec ça, ça devrait être super simple

Parser un code html de la vue dans mon controller [Débutant]

ASP.NET MVC

Discussions similaires

Partager

Partager