How to Add/Integrate RichTextBox Editor in Asp.net Core MVC, C#.Net

In today's article I will show a simple tutorial with an example how you can integrate or add a RichTextBox editor in your asp.net core mvc application and retrieve added value at controller end in using C#.net. Here I am using minimal rich text editor with jQuery and FontAwesome. So, for this article first we will download the rich text box editor.

Downlaod Link Minimal Rich Text Editor With jQuery And FontAwesome

After downloading we will create a new asp.net core 8 mvc application and a controller model class file. In this class file we will add the below code. 

public class FormTextData
{
    public string Content { get; set; }
} 

Now add controller class file and add httpget method. named as index.

[HttpGet]
public IActionResult Index()
{           
    return View();
} 

Now add the jQuery and CSS library file in wwroot folder css and js folder as shown below.

After adding library files, we will create view and add the library reference in view. Remember don't put js library and css reference in header of page. 

@model FormTextData;
@{
    ViewData["Title"] = "Index";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="~/css/richtext.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="~/js/jquery.richtext.min.js"></script>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    <div class="page-wrapper box-content">
        @Html.TextAreaFor(m => m.Content, new { @class = "content" })
    </div>
    <input type="submit" value="Submit" />
}
<script>
    $('#Content').richText();
</script> 

In above code I have added model class reference and added reference of all required CSS and JavaScript files. As mentioned earlier don't put CSS and JavaScript file reference in header part of the page. Here I have used TextAreaFor control to prepare RichTextBox control. After this we will write code to get the added value in RichTextBox control at controller end. For this I have added a submit button. Now let's check code to get added value at controller end. 

[HttpPost]
public IActionResult Index(FormTextData formTextData)
{
    string value = formTextData.Content;
    return View(formTextData);
} 

In above code I have taken model class as parameter reference in httppost method. Now let's run the code by putting a breakpoint.

Above I have added some formatted value. After this click on submit Your breakpoint will execute.

 

How to Add/Integrate RichTextBox Editor in Asp.net Core MVC, C#.Net.zip 1.75MB