Rich Text Editor in MVC

As pervious we learn about rich text editor in asp.net c# using DLL from FreeTextBox.com. Now we learn that how to embed rich text editor we also validate rich text editor with required field validator using Data Annotations in MVC .You can also learn about Data Annotations for more validation. In this article, we applied TinyMCE plugin for rich text editor.


Model:-
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCCODESOLUTIONS.Models
{


    public class validationsmodel
    {

        [Required(ErrorMessage = "{0} is required")]
        [StringLength(100, MinimumLength = 3,
         ErrorMessage = "Name Should be minimum 3 characters and a maximum of 100 characters")]
        [DataType(DataType.Text)]
        [AllowHtml]
        public string Name { get; set; }

    }
}

Controller:-
using MVCCODESOLUTIONS.Models;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Net.Mail;
using System.Web;
using System.Web.Mvc;

namespace MVCCODESOLUTIONS.Controllers
{
    public class HomeController : Controller
    {

        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(validationsmodel name)
        {
            return View(name);
        }
    }
}

View:-
@model MVCCODESOLUTIONS.Models.validationsmodel

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Rich Text Editor in MVC </title>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        @Html.LabelFor(m => m.Name)<br />
        @Html.TextAreaFor(m => m.Name)
        @Html.ValidationMessageFor(m => m.Name, "", new { @class = "error" })
        <br /><br />
        <input type="submit" value="Submit" />
    }
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript" src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
    <script type="text/javascript">
        tinymce.init({ selector: 'textarea', width: 500 });
    </script>
</body>
</html>

Out-Put:-



Rich Text Editor in MVC Rich Text Editor in MVC Reviewed by NEERAJ SRIVASTAVA on 12:45:00 PM Rating: 5

No comments:

Powered by Blogger.