Using data annotations with RTETo 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();
}
|
2X faster development
The ultimate ASP.NET MVC UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
