We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to make Data annotations to work with RTE

Platform: ASP.NET MVC |
Control: RichTextEditor |
Published Date: July 11, 2018 |
Last Revised Date: May 8, 2019

Using data annotations with RTE

To use data annotations with RTE, kindly ensure the following steps:

   

Step 1:  Add necessary scripts and theme files for RTE and validation to work properly in the _Layout.cshtml.

 

@Styles.Render("~/Content/ej/web/default-theme/ej.web.all.min.css") 
@Scripts.Render("~/Scripts/jquery-3.1.1.min.js") 
@Scripts.Render("~/Scripts/jsrender.min.js") 
@Scripts.Render("~/Scripts/jquery.validate.min.js") 
@Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js") 
@Scripts.Render("~/Scripts/ej/ej.web.all.min.js")     
@Scripts.Render("~/Scripts/ej/ej.unobtrusive.min.js") 

 

Step 2: Enable client validation and unobtrusive JavaScript in the web.config file.   

<appSettings> 
  <add key="ClientValidationEnabled" value="true" /> 
  <add key="UnobtrusiveJavaScriptEnabled" value="true" /> 
</appSettings> 

 

Step 3: Add a model class and make sure to include “AllowHtml” attribute for the RTE’s field to allow HTML content to be posted to the controller. 

public class RTEmodel 
{ 
    [AllowHtml] 
    [Display(Name = "Description")] 
    [Required(ErrorMessage = "Description is Required")] 
    public string description { get; set; } 
}

 

Step 4: Add a form with the RTEFor control. Include the label and validation message placeholders for RTE control.   

@model RTEdataAnnotation.Models.RTEmodel 
<h2>RTE - Data Annotation:</h2> 
<br/> 
@using (Html.BeginForm()) 
{ 
    @Html.LabelFor(model => model.description) 
    @Html.EJ().RTEFor(model => model.description) 
    @Html.ValidationMessageFor(model => model.description, "", new { @class = "text-danger" }) 
    <br /> 
    @Html.EJ().Button("btn").Size(ButtonSize.Small).Text("Post").Type(ButtonType.Submit) 
     
} 

 

Step 5: Add script to modify the validator settings and include the hidden fields in validation. Since RTE uses hidden <textarea> element to store its content.  

<script> 
    $.validator.setDefaults({ 
        ignore: [],// To include hidden fields in validation. 
    }); 
</script>

 

Step 6: Add an Action method in the controller to handle the form post. You can retrieve the RTE’s content from the model.   

[HttpPost] 
public ActionResult RichTextEditorFeatures(RTEmodel model) 
{ 
    return View(); 
} 

 

Sample

2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon