Utilisation de DevExpress

**thor76160** · 02/01/2013, 12h30

Bonjour.

J'essaie d'utiliser DevExpress aujourd'hui, je lutte >_<.
Mais je remarque un truc bizarre dans les démos qui me sont fournies !
Dans les vues, je vois ce bout de code :

Code :

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

1
2
3
4
HtmlEditorFeaturesDemoOptions options = Session["Options"] as HtmlEditorFeaturesDemoOptions;
        if (options == null) {
            options = new HtmlEditorFeaturesDemoOptions();
        }

Mais il n'y a aucun USING !! Comment est-ce possible que ça comprenne le code écrit ?

De même ici :

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
@Html.DevExpress().HtmlEditor(
    settings =>
    {
        settings.Name = "heFeatures";
        settings.CallbackRouteValues = new { Controller = "HtmlEditor", Action = "FeaturesPartial" };
        settings.Width = 550;
 
        settings.SettingsImageUpload.UploadCallbackRouteValues = new { Controller = "HtmlEditor", Action = "FeaturesImageUpload" };
        settings.SettingsImageUpload.UploadImageFolder = HtmlEditorDemosHelper.UploadDirectory;
        settings.SettingsImageUpload.ValidationSettings.Assign(HtmlEditorDemosHelper.ImageUploadValidationSettings);
 
        HtmlEditorDemosHelper.SetHtmlEditorImageSelectorSettings(settings.SettingsImageSelector);
 
        if(ViewData["ActiveView"] != null)
            settings.ActiveView = (HtmlEditorView)ViewData["ActiveView"];
        if(ViewData["Html"] != null)
            settings.Html = (string)ViewData["Html"];
        if(Session["Options"] != null) {
            HtmlEditorFeaturesDemoOptions options = (HtmlEditorFeaturesDemoOptions)Session["Options"];
            settings.SettingsHtmlEditing.AllowScripts = options.AllowScripts;
            settings.SettingsHtmlEditing.AllowIFrames = options.AllowIFrames;
            settings.SettingsHtmlEditing.AllowFormElements = options.AllowFormElements;
            settings.SettingsHtmlEditing.UpdateDeprecatedElements = options.UpdateDeprecatedElements;
            settings.SettingsHtmlEditing.UpdateBoldItalic = options.UpdateBoldItalic;
            settings.SettingsHtmlEditing.EnterMode = options.EnterMode;
            settings.Settings.AllowContextMenu = options.AllowContextMenu;
            settings.Settings.AllowDesignView = options.AllowDesignView;
            settings.Settings.AllowHtmlView = options.AllowHtmlView;
            settings.Settings.AllowPreview = options.AllowPreview;
        }
 
        Action<object, DevExpress.Web.ASPxFileManager.FileManagerActionEventArgsBase> editHandler = (sender, e) => {
            ((DevExpress.Web.ASPxFileManager.FileManagerActionEventArgsBase)e).Cancel = Utils.IsSiteMode;
            ((DevExpress.Web.ASPxFileManager.FileManagerActionEventArgsBase)e).ErrorText = Utils.GetReadOnlyMessageText();
        };
 
        settings.ImageSelectorItemDeleting = (sender, e) => editHandler(sender, e);
        settings.ImageSelectorFolderCreating = (sender, e) => editHandler(sender, e);
        settings.ImageSelectorFileUploading = (sender, e) => editHandler(sender, e);
        settings.ImageSelectorItemMoving = (sender, e) => editHandler(sender, e);
        settings.ImageSelectorItemRenaming = (sender, e) => editHandler(sender, e);
    }).GetHtml()

Là encore il n'y a aucun USING, alors que dans mon projet, quand je fais un copier / coller, ya plein de surlignage rouge ! :/

J'ai ajouter mes références et tout. j'ai créé ce htmlhelper :

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
using DevExpress.Utils;
using DevExpress.Web.ASPxHtmlEditor;
using DevExpress.Web.ASPxUploadControl;
using DevExpress.Web.Mvc;
using DevExpress.Web.ASPxFileManager;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web.UI.WebControls;
 
namespace LivDevis.Helpers.DevExpress
{
    public class HtmlEditorHelper
    {
        public const string ImagesDirectory = "~/Content/DevExpress/HtmlEditor/Images/";
        public const string ThumbnailsDirectory = "~/Content/DevExpress/HtmlEditor/Thumbnails/";
        public const string UploadDirectory = ImagesDirectory + "Upload/";
        public const string ImportContentDirectory = "~/Content/DevExpress/HtmlEditor/Imported";
 
        public static readonly ValidationSettings ImageUploadValidationSettings = new ValidationSettings
        {
            AllowedFileExtensions = new string[] { ".jpg", ".jpeg", ".jpe", ".gif", ".png" },
            MaxFileSize = 4000000
        };
 
        static HtmlEditorValidationSettings validationSettings;
        public static HtmlEditorValidationSettings ValidationSettings
        {
            get
            {
                if (validationSettings == null)
                {
                    validationSettings = new HtmlEditorValidationSettings();
                    validationSettings.RequiredField.IsRequired = true;
                }
                return validationSettings;
            }
        }
 
        static MVCxHtmlEditorImageSelectorSettings imageSelectorSettings;
        public static HtmlEditorImageSelectorSettings ImageSelectorSettings
        {
            get
            {
                if (imageSelectorSettings == null)
                {
                    imageSelectorSettings = new MVCxHtmlEditorImageSelectorSettings(null);
                    HtmlEditorHelper.SetHtmlEditorImageSelectorSettings(imageSelectorSettings);
                }
                return imageSelectorSettings;
            }
        }
 
        public static void OnValidation(object sender, HtmlEditorValidationEventArgs e)
        {
            const int MaxLength = 50;
            string CustomErrorText = string.Format("Custom validation fails because the HTML content&prime;s length exceeds {0} characters.", MaxLength);
 
            if (e.Html.Length > MaxLength)
            {
                e.IsValid = false;
                e.ErrorText = CustomErrorText;
            }
        }
 
        public static MVCxHtmlEditorImageSelectorSettings SetHtmlEditorImageSelectorSettings(MVCxHtmlEditorImageSelectorSettings settingsImageSelector)
        {
            settingsImageSelector.UploadCallbackRouteValues = new { Controller = "HtmlEditor", Action = "FeaturesImageSelectorUpload" };
 
            settingsImageSelector.Enabled = true;
            settingsImageSelector.CommonSettings.RootFolder = HtmlEditorHelper.ImagesDirectory;
            settingsImageSelector.CommonSettings.ThumbnailFolder = HtmlEditorHelper.ThumbnailsDirectory;
            settingsImageSelector.CommonSettings.AllowedFileExtensions = new string[] { ".jpg", ".jpeg", ".jpe", ".gif", ".png" };
            settingsImageSelector.EditingSettings.AllowCreate = true;
            settingsImageSelector.EditingSettings.AllowDelete = true;
            settingsImageSelector.EditingSettings.AllowMove = true;
            settingsImageSelector.EditingSettings.AllowRename = true;
            settingsImageSelector.UploadSettings.Enabled = true;
            settingsImageSelector.FoldersSettings.ShowLockedFolderIcons = true;
 
            settingsImageSelector.PermissionSettings.AccessRules.Add(
                new FileManagerFolderAccessRule
                {
                    Path = "",
                    Upload = Rights.Deny
                },
                new FileManagerFolderAccessRule
                {
                    Path = "Upload",
                    Upload = Rights.Allow
                });
            return settingsImageSelector;
        }
 
        public static HtmlEditorSettings SetHtmlEditorExportSettings(HtmlEditorSettings settings)
        {
            settings.Name = "heImportExport";
            settings.CallbackRouteValues = new { Controller = "HtmlEditor", Action = "ImportExportPartial" };
            settings.ExportRouteValues = new { Controller = "HtmlEditor", Action = "ExportTo" };
            settings.Width = Unit.Percentage(100);
 
            var toolbar = settings.Toolbars.Add();
            toolbar.Items.Add(new ToolbarUndoButton());
            toolbar.Items.Add(new ToolbarRedoButton());
            toolbar.Items.Add(new ToolbarBoldButton(true));
            toolbar.Items.Add(new ToolbarItalicButton());
            toolbar.Items.Add(new ToolbarUnderlineButton());
            toolbar.Items.Add(new ToolbarStrikethroughButton());
            toolbar.Items.Add(new ToolbarInsertImageDialogButton(true));
            ToolbarExportDropDownButton saveButton = new ToolbarExportDropDownButton(true);
            saveButton.CreateDefaultItems();
            toolbar.Items.Add(saveButton);
 
            settings.CssFiles.Add("~/Content/DevExpress/HtmlEditor/Css/Export.css");
 
            return settings;
        }
    }
 
    public class HtmlEditorFeaturesOptions
    {
        public HtmlEditorFeaturesOptions()
        {
            UpdateDeprecatedElements = true;
            UpdateBoldItalic = true;
            EnterMode = HtmlEditorEnterMode.Default;
            AllowContextMenu = DefaultBoolean.True;
            AllowDesignView = true;
            AllowHtmlView = true;
            AllowPreview = true;
        }
 
        public bool AllowScripts { get; set; }
        public bool AllowIFrames { get; set; }
        public bool AllowFormElements { get; set; }
        public bool UpdateDeprecatedElements { get; set; }
        public bool UpdateBoldItalic { get; set; }
        public HtmlEditorEnterMode EnterMode { get; set; }
        public DefaultBoolean AllowContextMenu { get; set; }
        public bool AllowDesignView { get; set; }
        public bool AllowHtmlView { get; set; }
        public bool AllowPreview { get; set; }
    }
}

c'est un copier / coller du helper livré dans la démo, avec 2 ou 3 modifs sans intérêt.

Pouvez-vous éclairer ma lanterne svp ? Comment puis-je faire pour que mon projet reconnaisse DevExpress sans utiliser de USING ? ça m'aiderait pas mal ...
Merci.

**Nadinette** · 02/01/2013, 15h29

Salut,

Je te suggère de ne pas utiliser DevExpress pour ça.
Tu crée un formulaire normal en razor.
Tu ajoute TinyMCE à ton site.
C'est super facile et ça fonctionne très bien.

A pluche

**thor76160** · 03/01/2013, 09h49

Je suis tout à fait d'accord avec toi, malheureusement l'entreprise m'impose des contraintes, je dois donc faire avec :/.

J'ai réussi à faire apparaitre mes éléments, je cherche donc désormais à faire du modelbinding !

mon modèle :

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
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
 
namespace LivDevis.Models
{
    public class ContactModel
    {
        // Form
        [Display(Name = "Civilité")]
        public Civility Civility { get; set; }
 
        [Required]
        [DataType(DataType.Text)]
        [Display(Name = "DisplayFirstName", ResourceType = typeof(LivDevis.Resources.Models.ContactModel))]
        public string FirstName { get; set; }
 
        [Required]
        [DataType(DataType.Text)]
        [Display(Name = "DisplayLastName", ResourceType = typeof(LivDevis.Resources.Models.ContactModel))]
        public string LastName { get; set; }
 
        [Required]
        [DataType(DataType.EmailAddress)]
        [Display(Name = "DisplayEmail", ResourceType = typeof(LivDevis.Resources.Models.ContactModel))]
        public string From { get; set; }
 
        [Required]
        [DataType(DataType.Text)]
        [Display(Name = "DisplayCompany", ResourceType = typeof(LivDevis.Resources.Models.ContactModel))]
        public string Company { get; set; }
 
        [DataType(DataType.Url)]
        [Display(Name = "DisplayWebSite", ResourceType = typeof(LivDevis.Resources.Models.ContactModel))]
        public string WebSite { get; set; }
 
        // Mail
        [Required]
        [DataType(DataType.Text)]
        [Display(Name = "DisplaySubject", ResourceType = typeof(LivDevis.Resources.Models.ContactModel))]
        public string Subject { get; set; }
 
        [Required]
        [DataType(DataType.Text)]
        [Display(Name = "DisplayBody", ResourceType = typeof(LivDevis.Resources.Models.ContactModel))]
        [MaxLength(1000)]
        public string Body { get; set; }
    }
}

mon controller :

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
using DevExpress.Web.ASPxHtmlEditor;
using LivDevis.ClassLibrary;
using LivDevis.ClassLibrary.Classes;
using LivDevis.ClassLibrary.Entities;
using LivDevis.Filters;
using LivDevis.Helpers.DevExpress;
using LivDevis.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Mvc;
 
namespace LivDevis.Controllers
{
    [AuthorizeUnauthentificated]
    public partial class HomeController : BaseController
    {
        public override string ControllerName { get { return "Home"; } }
 
        public ActionResult Index()
        {
            return View();
        }
 
        public ActionResult Prices()
        {
            return View();
        }
 
        public ActionResult About()
        {
            return View();
        }
 
        public ActionResult Contact()
        {
            ViewData["ActiveView"] = HtmlEditorView.Design;
            Session["Options"] = new HtmlEditorFeaturesOptions();
 
            ContactModel ContactModel = new ContactModel();
 
            return DevExpressView("Contact", ContactModel);
        }
 
        [HttpPost]
        public ActionResult Contact(ContactModel mail)
        {
            return View();
        }
 
        public ActionResult BodyPartial()
        {
            return PartialView("DevExpress.Contact.BodyPartial");
        }
 
        public ActionResult BodyImageUpload()
        {
            HtmlEditorExtension.SaveUploadedImage("Body", HtmlEditorHelper.ImageUploadValidationSettings, HtmlEditorHelper.UploadDirectory);
            return null;
        }
 
        public ActionResult BodyImageSelectorUpload()
        {
            HtmlEditorExtension.SaveUploadedImage("Body", HtmlEditorHelper.ImageSelectorSettings);
            return null;
        }
    }
}

une partie de ma page Layout :

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
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - Mon application ASP.NET MVC</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
 
        <!-- CSS -->
        @Styles.Render("~/Content/_Unauthentificated")
        @RenderSection("css", required: false)
 
        <!-- jQuery -->
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <!-- modernizr -->
        @Scripts.Render("~/bundles/modernizr")
        @RenderSection("jquery", required: false)
 
        <!-- DevExpress -->
        @Styles.Render("~/Content/DevExpress")
 
        @if(Utils.IsIE6()) {
            @Styles.Render("~/Content/DevExpress/IE6")
        }
 
        @Html.DevExpress().GetStyleSheets( 
            new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout }, 
            new StyleSheet { ExtensionSuite = ExtensionSuite.Editors }, 
            new StyleSheet { ExtensionSuite = ExtensionSuite.HtmlEditor }, 
            new StyleSheet { ExtensionSuite = ExtensionSuite.GridView },
            new StyleSheet { ExtensionSuite = ExtensionSuite.PivotGrid },
            new StyleSheet { ExtensionSuite = ExtensionSuite.Chart },
            new StyleSheet { ExtensionSuite = ExtensionSuite.Report },
            new StyleSheet { ExtensionSuite = ExtensionSuite.Scheduler },
 
            // Default theme for some demos
            new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout, Theme = "Default" }
        )
 
        @Scripts.Render("~/bundles/jqueryval", "~/bundles/MicrosoftAjax")
 
        @Html.DevExpress().GetScripts( 
            new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout }, 
	        new Script { ExtensionSuite = ExtensionSuite.HtmlEditor }, 
	        new Script { ExtensionSuite = ExtensionSuite.GridView },
            new Script { ExtensionSuite = ExtensionSuite.PivotGrid },
	        new Script { ExtensionSuite = ExtensionSuite.Editors }, 
            new Script { ExtensionSuite = ExtensionSuite.Chart },
	        new Script { ExtensionSuite = ExtensionSuite.Report },
            new Script { ExtensionSuite = ExtensionSuite.Scheduler } 
        )
 
        <!-- Scripts -->
        <script>
            <!-- Définition des variables d'environnement -->
            var _Culture = "@this.ViewContext.RouteData.Values["lang"].ToString()";
        </script>
        @Scripts.Render("~/bundles/_Unauthentificated/Layout")
        @RenderSection("Scripts", required: false)
    </head>

ma vue :

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
@model LivDevis.Models.ContactModel
 
@using LivDevis.Helpers
@using LivDevis.Models
@using System.Globalization
@using System.Web.UI.WebControls
 
@{
    ViewBag.Title = @LivDevis.Resources.Views.Home.Contact.Title;
    Layout = "~/Views/Shared/_Unauthentificated/Layout.cshtml";
}
 
@section css {
    @Styles.Render("~/Content/_Unauthentificated/Home/Contact")
}
 
@section jquery {
    @Scripts.Render("~/bundles/jqueryval")
}
 
@section Scripts {
    @Scripts.Render("~/bundles/_Unauthentificated/Contact")
}
 
@section featured {
 
}
 
<section id="info">
    <div class="onleft">
        <h2>Cras elementum ultrices diam</h2>
 
        <h3>Cras elementum ultrices diam</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.</p>
 
        <h3>Cras elementum ultrices diam</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.</p>
 
        <h3>Cras elementum ultrices diam</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.</p>
    </div>
    <div class="onright">
        @using (Html.BeginForm("Contact", "Home", FormMethod.Post, new { autocomplete = "off" }))
        {
            @Html.ValidationSummary(true)
 
            <fieldset>
                <legend>@ViewBag.Title</legend>
 
                <div class="editor-label">
                    @Html.LabelFor(model => model.Civility)
                </div>
                <div class="editor-field">
                    <div id="Civility">
                    @{
                        int i = 0;
                        foreach (Enum c in Enum.GetValues(typeof(Civility)))
                        {
                            string _id = string.Concat("civility-", c);
                            string _description = c.Description();
 
                            switch (i == 0)
                            {
                                case true :
                                    @Html.RadioButtonFor(model => model.Civility, c, new { id = _id, @checked = "checked" })
                                break;
 
                                case false :
                                    @Html.RadioButtonFor(model => model.Civility, c, new { id = _id})
                                break;
                            }
 
                            @Html.LabelFor(model => model, _description, new { @for = _id })
                            i++;
                        }
                    }
                    </div>
                </div>
 
                <div class="editor-field">
                    @Html.TextBoxFor(model => model.FirstName, new { placeholder = LivDevis.Resources.Models.ContactModel.DisplayFirstName })
                    @Html.ValidationMessageFor(model => model.FirstName)
                </div>
 
                <div class="editor-field">
                    @Html.TextBoxFor(model => model.LastName, new { placeholder = LivDevis.Resources.Models.ContactModel.DisplayLastName })
                    @Html.ValidationMessageFor(model => model.LastName)
                </div>
 
                <div class="editor-field">
                    @Html.TextBoxFor(model => model.From, new { placeholder = LivDevis.Resources.Models.ContactModel.DisplayEmail })
                    @Html.ValidationMessageFor(model => model.From)
                </div>
 
                <div class="editor-field">
                    @Html.TextBoxFor(model => model.Company, new { placeholder = LivDevis.Resources.Models.ContactModel.DisplayCompany })
                    @Html.ValidationMessageFor(model => model.Company)
                </div>
 
                <div class="editor-field">
                    @Html.TextBoxFor(model => model.WebSite, new { placeholder = LivDevis.Resources.Models.ContactModel.DisplayWebSite })
                    @Html.ValidationMessageFor(model => model.WebSite)
                </div>
 
                <div class="editor-field">
                    @Html.TextBoxFor(model => model.Subject, new { placeholder = LivDevis.Resources.Models.ContactModel.DisplaySubject })
                    @Html.ValidationMessageFor(model => model.Subject)
                </div>
 
                <div class="editor-label">
                    @Html.LabelFor(model => model.Body)
                </div>
                <div class="editor-field">
                    @Html.Partial("DevExpress.Contact.BodyPartial", Model)
                    @Html.ValidationMessageFor(model => model.Body)
                </div>
 
                <p>
                    <input type="submit" value="@LivDevis.Resources.Views.Home.Contact.ButtonSendMail" class="button blue" />
                </p>
            </fieldset>
        }
    </div>
</section>

et ma vue partielle :

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
@Html.DevExpress().HtmlEditor(
    settings =>
    {
        /*if (Model != null)
        {
            settings.Html = Model.Body;
        }*/
 
        settings.Name = "Body";
 
        settings.CallbackRouteValues = new { Controller = "Home", Action = "BodyPartial" };
        settings.Width = 646;
 
        settings.SettingsImageUpload.UploadCallbackRouteValues = new { Controller = "Home", Action = "BodyImageUpload" };
        settings.SettingsImageUpload.UploadImageFolder = HtmlEditorHelper.UploadDirectory;
        settings.SettingsImageUpload.ValidationSettings.Assign(HtmlEditorHelper.ImageUploadValidationSettings);
 
        HtmlEditorHelper.SetHtmlEditorImageSelectorSettings(settings.SettingsImageSelector);
 
        if (ViewData["ActiveView"] != null)
        {
            settings.ActiveView = (HtmlEditorView)ViewData["ActiveView"];
        }
 
        if (ViewData["Html"] != null)
        {
            settings.Html = (string)ViewData["Html"];
        }
 
        if(Session["Options"] != null)
        {
            HtmlEditorFeaturesOptions options = (HtmlEditorFeaturesOptions)Session["Options"];
            settings.SettingsHtmlEditing.AllowScripts = options.AllowScripts;
            settings.SettingsHtmlEditing.AllowIFrames = options.AllowIFrames;
            settings.SettingsHtmlEditing.AllowFormElements = options.AllowFormElements;
            settings.SettingsHtmlEditing.UpdateDeprecatedElements = options.UpdateDeprecatedElements;
            settings.SettingsHtmlEditing.UpdateBoldItalic = options.UpdateBoldItalic;
            settings.SettingsHtmlEditing.EnterMode = options.EnterMode;
            settings.Settings.AllowContextMenu = options.AllowContextMenu;
            settings.Settings.AllowDesignView = options.AllowDesignView;
            settings.Settings.AllowHtmlView = options.AllowHtmlView;
            settings.Settings.AllowPreview = options.AllowPreview;
        }
 
        Action<object, DevExpress.Web.ASPxFileManager.FileManagerActionEventArgsBase> editHandler = (sender, e) =>
        {
            ((DevExpress.Web.ASPxFileManager.FileManagerActionEventArgsBase)e).Cancel = Utils.IsSiteMode;
            ((DevExpress.Web.ASPxFileManager.FileManagerActionEventArgsBase)e).ErrorText = Utils.GetReadOnlyMessageText();
        };
 
        settings.ImageSelectorItemDeleting = (sender, e) => editHandler(sender, e);
        settings.ImageSelectorFolderCreating = (sender, e) => editHandler(sender, e);
        settings.ImageSelectorFileUploading = (sender, e) => editHandler(sender, e);
        settings.ImageSelectorItemMoving = (sender, e) => editHandler(sender, e);
        settings.ImageSelectorItemRenaming = (sender, e) => editHandler(sender, e);
    }).Bind(Model.Body).GetHtml()

Malheureusement, lors de mon submit le texte saisi n'apparait pas dans ma variable dans la propriété "Body".
Il n'y a pas non plus de message d'erreur lors de la validation du modèle. Qu'ai-je oublié ?

**Nadinette** · 03/01/2013, 11h21

Salut,

Tous les éditeurs WYSIWYG fonctionnent à peu près de la même façon. Il permettent d'éditer le contenu d'un bloc HTML (en général, un textarea ou un div).

Le innerHTML du bloc est transféré dans une IFrame qui fonctionne en mode édition.

Pour pouvoir "submiter" le résultat, il faut déclancher une action côté client qui va mettre à jour le bloc édité.

Si c'est un textarea, son nouveau contenu sera transféré côté serveur par le submit si c'est un autre bloc, il faudra transférer le innerHTML du bloc dans un contrôle type hidden.

Pour moi, il doit te manquer un truc qui automatise la sauvegarde, peut-être une sorte de pannel ou un lien vers un script...

Je n'ai pas cet outil, mais je suis certaine que c'est dans cette direction qu'il faut chercher.

Bonne journée

**thor76160** · 03/01/2013, 16h21

J'ai énormément avancé. J'ai réussi à faire mon binding, ça fonctionne. Je me suis en parti inspiré de tes conseils Nadinette.
Il me reste un dernier petit détail.
Lorsque je clique sur les boutons "Design", "HTML" et "Preview", mon application plante :/.
"impossible d'effectuer une liaison au moment de l'exécution sur une référence null".

voir la méthode "BodyPartial()", là où ça plante. La raison (me semble t'il), est que l'appli recharge la page mais perd l'objet que j'utilise pour mon binding. Il faudrait je pense, que je trouve un moyen pour l'envoyer jusqu'à ma méthode "BodyPartial()". Une idée ? Merci

.

mon controller :

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
using DevExpress.Web.ASPxEditors;
using DevExpress.Web.ASPxHtmlEditor;
using DevExpress.Web.Mvc;
using LivDevis.ClassLibrary;
using LivDevis.ClassLibrary.Classes;
using LivDevis.ClassLibrary.Entities;
using LivDevis.Filters;
using LivDevis.Helpers.DevExpress;
using LivDevis.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Mvc;
 
namespace LivDevis.Controllers
{
    [AuthorizeUnauthentificated]
    public partial class HomeController : BaseController
    {
        public override string ControllerName { get { return "Home"; } }
 
        public ActionResult Index()
        {
            return View();
        }
 
        public ActionResult Prices()
        {
            return View();
        }
 
        public ActionResult About()
        {
            return View();
        }
 
        public ActionResult Contact()
        {
            ViewData["ActiveView"] = HtmlEditorView.Design;
            Session["Options"] = new HtmlEditorFeaturesOptions();
 
            ContactModel ContactModel = new ContactModel();
 
            return DevExpressView("Contact", ContactModel);
        }
 
        [HttpPost]
        public ActionResult Contact(ContactModel mail)
        {
            if (ModelState.IsValid)
            {
                bool isValid = true;
 
                ViewData["ActiveView"] = HtmlEditorExtension.GetActiveView("Body");
                mail.Body = HtmlEditorExtension.GetHtml("Body", null, HtmlEditorHelper.ValidationSettings, HtmlEditorHelper.OnValidation, out isValid);
 
                if (isValid)
                {
                    //...
                }
            }
 
            return RedirectToAction("Contact");
        }
 
public ActionResult BodyPartial()
        {
            return PartialView("DevExpress.Contact.BodyPartial");
        }
    }
}

mon helper qui configure mon object :

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
public static HtmlEditorSettings SetHtmlEditor_Light(HtmlEditorSettings settings, string ControllerName, string ActionName, string ControlName)
        {
            settings.Name = ControlName;
            settings.CallbackRouteValues = new { Controller = ControllerName, Action = ActionName };
 
            MVCxHtmlEditorToolbar toolbar = settings.Toolbars.Add();
            toolbar.Items.Add(new ToolbarUndoButton());
            toolbar.Items.Add(new ToolbarRedoButton());
 
            toolbar.Items.Add<ToolbarFontNameEdit>(fontNameItem =>
            {
                fontNameItem.Items.Add("Times New Roman", "Times New Roman");
                fontNameItem.Items.Add("Tahoma", "Tahoma");
                fontNameItem.Items.Add("Verdana", "Verdana");
                fontNameItem.Items.Add("Arial", "Arial");
                fontNameItem.Items.Add("MS Sans Serif", "MS Sans Serif");
                fontNameItem.Items.Add("Courier", "Courier");
            });
 
            toolbar.Items.Add<ToolbarFontSizeEdit>(fontSizeItem =>
            {
                fontSizeItem.Items.Add("1 (8pt)", "1");
                fontSizeItem.Items.Add("2 (10pt)", "2");
                fontSizeItem.Items.Add("3 (12pt)", "3");
                fontSizeItem.Items.Add("4 (14pt)", "4");
                fontSizeItem.Items.Add("5 (18pt)", "5");
                fontSizeItem.Items.Add("6 (24pt)", "6");
                fontSizeItem.Items.Add("7 (36pt)", "7");
            });
 
            toolbar.Items.Add(new ToolbarBoldButton(true));
            toolbar.Items.Add(new ToolbarItalicButton());
            toolbar.Items.Add(new ToolbarUnderlineButton());
            toolbar.Items.Add(new ToolbarStrikethroughButton());
 
            toolbar.Items.Add(new ToolbarJustifyLeftButton(true));
            toolbar.Items.Add(new ToolbarJustifyCenterButton());
            toolbar.Items.Add(new ToolbarJustifyRightButton());
            toolbar.Items.Add(new ToolbarJustifyFullButton());
 
            return settings;
        }

ma vue :

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
@model LivDevis.Models.ContactModel
 
@using LivDevis.Helpers
@using LivDevis.Models
@using System.Globalization
@using System.Web.UI.WebControls
 
@{
    ViewBag.Title = @LivDevis.Resources.Views.Home.Contact.Title;
    Layout = "~/Views/Shared/_Unauthentificated/Layout.cshtml";
}
 
@section css {
    @Styles.Render("~/Content/_Unauthentificated/Home/Contact")
}
 
@section jquery {
    @Scripts.Render("~/bundles/jqueryval")
}
 
@section Scripts {
    @Scripts.Render("~/bundles/_Unauthentificated/Contact")
}
 
@section featured {
 
}
 
<section id="info">
    <div class="onleft">
        <h2>Cras elementum ultrices diam</h2>
 
        <h3>Cras elementum ultrices diam</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.</p>
 
        <h3>Cras elementum ultrices diam</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.</p>
 
        <h3>Cras elementum ultrices diam</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.</p>
    </div>
    <div class="onright">
        @using (Html.BeginForm("Contact", "Home", FormMethod.Post, new { autocomplete = "off", @id = "Contact" }))
        {
            @Html.ValidationSummary(true)
 
            <fieldset>
                <legend>@ViewBag.Title</legend>
 
                <div class="editor-label">
                    @Html.LabelFor(model => model.Civility)
                </div>
                <div class="editor-field">
                    <div id="Civility">
                    @{
                        int i = 0;
                        foreach (Enum c in Enum.GetValues(typeof(Civility)))
                        {
                            string _id = string.Concat("civility-", c);
                            string _description = c.Description();
 
                            switch (i == 0)
                            {
                                case true:
                                    @Html.RadioButtonFor(model => model.Civility, c, new { id = _id, @checked = "checked" })
                                break;
 
                                case false:
                                    @Html.RadioButtonFor(model => model.Civility, c, new { id = _id })
                                break;
                            }
 
                            @Html.LabelFor(model => model, _description, new { @for = _id })
                            i++;
                        }
                    }
                    </div>
                </div>
 
                <div class="editor-field">
                    @Html.TextBoxFor(model => model.FirstName, new { placeholder = LivDevis.Resources.Models.ContactModel.DisplayFirstName })
                    @Html.ValidationMessageFor(model => model.FirstName)
                </div>
 
                <div class="editor-field">
                    @Html.TextBoxFor(model => model.LastName, new { placeholder = LivDevis.Resources.Models.ContactModel.DisplayLastName })
                    @Html.ValidationMessageFor(model => model.LastName)
                </div>
 
                <div class="editor-field">
                    @Html.TextBoxFor(model => model.From, new { placeholder = LivDevis.Resources.Models.ContactModel.DisplayEmail })
                    @Html.ValidationMessageFor(model => model.From)
                </div>
 
                <div class="editor-field">
                    @Html.TextBoxFor(model => model.Company, new { placeholder = LivDevis.Resources.Models.ContactModel.DisplayCompany })
                    @Html.ValidationMessageFor(model => model.Company)
                </div>
 
                <div class="editor-field">
                    @Html.TextBoxFor(model => model.WebSite, new { placeholder = LivDevis.Resources.Models.ContactModel.DisplayWebSite })
                    @Html.ValidationMessageFor(model => model.WebSite)
                </div>
 
                <div class="editor-field">
                    @Html.TextBoxFor(model => model.Subject, new { placeholder = LivDevis.Resources.Models.ContactModel.DisplaySubject })
                    @Html.ValidationMessageFor(model => model.Subject)
                </div>
 
                <div class="editor-field">
                    @Html.Partial("DevExpress.Contact.BodyPartial", Model)
 
                    <span><b id="Body_contentLength"></b> caractère(s) restant(s)</span>
                    @Html.HiddenFor(model => model.Body)
                    @Html.ValidationMessageFor(model => model.Body)
                </div>
 
                <p>
                    <input type="submit" value="@LivDevis.Resources.Views.Home.Contact.ButtonSendMail" class="button blue" />
                </p>
            </fieldset>
        }
    </div>
</section>

ma vue partielle :

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
@Html.DevExpress().HtmlEditor(
    settings =>
    {
        LivDevis.Helpers.DevExpress.HtmlEditorHelper.SetHtmlEditor_Light(settings, "Home", "BodyPartial", "Body");
 
        settings.Width = 646;
 
        settings.SettingsValidation.Assign(HtmlEditorHelper.ValidationSettings);
        settings.ClientSideEvents.Validation = "Body_ValidationHandler";
        settings.ClientSideEvents.HtmlChanged = "Body_HtmlChangedHandler";
 
        if (ViewData["ActiveView"] != null)
        {
            settings.ActiveView = (HtmlEditorView)ViewData["ActiveView"];
        }
 
    }).Bind(Model.Body).GetHtml()

mon code javascript :

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
var Body_MaxLength = 1000;
var Body_CustomErrorText = "Custom validation fails because the HTML content&prime;s length exceeds " + Body_MaxLength.toString() + " characters.";
 
function Body_ValidationHandler(s, e) {
    if (e.html.length > Body_MaxLength) {
        e.isValid = false;
        e.errorText = Body_CustomErrorText;
    }
}
 
function Body_HtmlChangedHandler(s, e) {
    var Body_RemainingCharacters = (Body_MaxLength - s.GetHtml().length);
    $("#Body_contentLength").html(Body_RemainingCharacters);
}
 
$(function () {
 
    $("#Civility").buttonset();
 
    $("#Body_contentLength").html(Body_MaxLength);
 
    $("section#info form#Contact").submit(function () {
 
        var BodyDataContent = $("section#info form#Contact input[type=hidden]#Body_Html").val();
        var BodyModelField = $("section#info form#Contact input[type=hidden]#Body");
        var IsEmpty = (BodyDataContent.length == 0);
        BodyModelField.val((IsEmpty) ? "" : BodyDataContent);
 
        var IsValid = $("section#info form#Contact").valid();
 
        alert(IsValid);
 
        return false;
        return $("section#info form#Contact").valid();
 
    });
 
});

**Nadinette** · 03/01/2013, 16h27

Salut,

Je ne comprends pas l'intérêt de passer par le serveur pour faire ce que tu veux.
L'affichage de la source HTML d'une bloc en cours ne doit pas passer par le serveur.

Pour ce qui est du mode previeuw, je ne le passerais pas par le serveur non plus. J'utiliserais un windows.open et je construirais le code HTML dynamiquement à l'aide de JQuery.

++

Utilisation de DevExpress

ASP.NET MVC

Vue hybride

Discussions similaires

Partager

Partager