Integrate and Retrive HTML Textbox Editor Value In Asp.Net MVC Using C#.Net

In this article I will show you how you can use HTML text box editor in you asp.net mvc application and how you will be able to retrieve the html data from your editor using C#.Net. This article you can use in your MVC2/MVC3/MVC4/MVC5 applications.

Some of my previous articles are as follows: File Upload and Display Uploaded Previsw in MVC3 Razor Example Using C#.Net, File Upload in MVC3 By Using Razor, Restrict Number of Characters to be Entered in the TextArea Using jQuery in Asp.Net MVC, Display No of Characters Entered In TextArea Using jQuery, How to style input and submit button with CSS in Asp.net.

Now for this article first  we will create a new asp.net mvc application and add a new controller. After adding controller we will generate view for the controller. After generating view we will create the model file. In this file we will define the property.

Model

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace HTMLTextEditor.Models {     public class HtmlTextEditorData     {         [AllowHtml]         public string TextData { get; set; }     } }

Note: In above property I have used an attribute [AllowHtml]. In we will not use this on that case ewe will get an error.

Controller

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using HTMLTextEditor.Models; namespace HTMLTextEditor.Controllers {     public class HomeController : Controller     {         //         // GET: /Home/         public ActionResult Index()         {             return View();         }         [HttpPost]         public ActionResult Index(HtmlTextEditorData objhtmltexteditordata)         {             string textdata = objhtmltexteditordata.TextData;             /*              * Coe toe save data in data base              */             ViewBag.Data = objhtmltexteditordata.TextData;             return View();         }     } }

In controller we have get and post method. In this post method will invoke when we click on submit button. In this we will we will retrieve the posted value in our model property.

View

@model HTMLTextEditor.Models.HtmlTextEditorData @{     ViewBag.Title = "Integrate and Retrive HTML Textbox Editor Value In Asp.Net MVC Using C#.Net"; } <script src="../../nicEdit.js" type="text/javascript"></script> <script type="text/javascript" language="javascript">     bkLib.onDomLoaded(function () {         new nicEditor().panelInstance('txthtmldata');     }); </script> @using (Html.BeginForm("Index", "Home")) {     @Html.TextAreaFor(m => m.TextData, new { @id = "txthtmldata", @cols = "50", @rows = "5" })     <br />     <input type="submit" value="Submit" />     <div>         Submitted Data</div>     <div>@ViewBag.Data</div> }

In above code we have used view bag to show the retrieved html tag.

Here is the final output

DOWNLOAD