Model View Controller : How To Integrate HTML Textbox Editor and How You Can Retrive Textbox Value In MVC3

In this article i will show you how you can integrate html textbox editor in you mvc application and how you can retrieve the value entered in the html textbox editor.

So for this first you needed to create a new mvc3 application. and add new controller and create view for the index method. Now create the model.

Your model Code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Demo_Application.Models
{
    public class EditorTextModel
    {
        public string TextData { get; set; }
    }
}

Now in you view add the below code.

@model Demo_Application.Models.EditorTextModel
@{
    ViewBag.Title = "How To Integrate HTML Textbox Editor and How You Can Retrive Textbox Value In MVC3";
}
<script src="../../Scripts/Editor/nicEdit.js" type="text/javascript"></script>
<script type="text/javascript">
    bkLib.onDomLoaded(function () {
        new nicEditor({ iconsPath: `../../Scripts/Editor/nicEditorIcons.gif`, maxHeight: 100 }).panelInstance(`txtdetail`);
    });
    function Validateform() {
        if ($("#txttitle").attr(`value`) == "") {
            alert("Please enter title");
            return false;
        }
        return true;
    }
</script>
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{

    <div style="color: Red; font-weight: bold;">@ViewBag.Message</div>
    <table width="100%" cellpadding="5" cellspacing="2" border="0" style="background-color: White;">
        <tr>
            <td class="headertitle-contect" valign="middle">
               How To Integrate HTML Textbox Editor and <br />How You Can Retrive Textbox Value In MVC3
            </td>
        </tr>
        <tr>
            <td align="left">
                <table width="99%" cellpadding="5" cellspacing="0" border="0">
                    <tr>
                        <td align="left">
                            Detail
                        </td>
                    </tr>
                    <tr>
                        <td align="left">
                            @Html.TextAreaFor(m => m.TextData, new { @id = "txtdetail", @rows = "20", @cols = "50" })
                        </td>
                    </tr>
                    <tr>
                        <td align="left">
                            <input type="submit" name="Command" value="Submit"/>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
}

Now create he post method for the index actionresult.

[HttpPost]
        public ActionResult Index(EditorTextModel objeditortextmodel)
        {
            ViewBag.Text = objeditortextmodel.TextData;
            return View();
        }

Now run the application and enter some value as you make the post you will get the below error.

A potentially dangerous Request.Form value was detected from the client (TextData="<p>This is a <strong...").

Now i will tell how you can handle the above error. Just by making small modification in you model code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Demo_Application.Models
{
    public class EditorTextModel
    {
        [AllowHtml]
        public string TextData { get; set; }
    }
}

Now run the application