In this article I will explain with an example, how to use Html.Raw Helper Method in ASP.Net MVC.
The Html.Raw Helper Method is used to display HTML in Raw format i.e. without encoding in ASP.Net MVC.
Configuring Bundles
Please refer the following article for complete information on how to configure Bundles in ASP.Net MVC project.
Model
The following Model class consists of one property PersonalDetails to which the following Data Annotation attributes have been applied.
1. Display – Data Annotation attribute is used for displaying the Label for the property.
2. Required – Data Annotation attribute is used for validation of the property.
3. AllowHtml – Data Annotation attribute is used for enabling posting of HTML content via input fields which by default is disabled.
public class PersonModel
{
[Display(Name = "Personal Details:")]
[Required(ErrorMessage = "Personal Details is required.")]
[AllowHtml]
public string PersonalDetails { get; set; }
}
Controller
The Controller consists of following Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned along with the object of the PersonModel class.
Action method for handling POST operation
This Action method handles the POST operation when the form is submitted and it accepts PersonModel class object as a parameter.
Finally, the PersonModel class object is returned to the View.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View(new PersonModel());
}
[HttpPost]
public ActionResult Index(PersonModel person)
{
return View(person);
}
}
View
Inside the View, in the very first line the PersonModel class is declared as Model for the View.
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
Inside the View, the Label, TextArea and ValidationMessage (Label for displaying error message) elements are created using following HTML Helper functions:–
1. Html.LabelFor – Displaying the Model property name.
2. Html.TextAreaFor – Creating a TextArea (Multiline TextBox) for the Model property.
3. Html.ValidationMessageFor – Displaying the Validation message for the property.
The View also consists of a Submit button.
Implementing JavaScript TinyMCE library
Inside the View, the following
TinyMCE JS script file is inherited:
1. tinymce.min.js
Initializing TinyMCE (RichTextEditor)
TinyMCE (RichTextEditor) is initialized using
init function and applied to an HTML TextArea element.
The
jQuery script bundles are rendered at the end using
Scripts.Render function inside which the path of the
jQuery bundle is passed.
Submitting the Form
When
Submit button is clicked, the content of the
TinyMCE TextArea is fetched using value of the
PersonalDetails property and is set into the HTML SPAN using
Html.Raw Helper Method.
@model TinyMCE_MVC.Models.PersonModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.0.20/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({ selector: 'textarea', width: 500 });
</script>
@Scripts.Render("~/bundles/jquery")
</head>
<body>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
@Html.LabelFor(m => m.PersonalDetails)<br />
@Html.TextAreaFor(m => m.PersonalDetails)
@Html.ValidationMessageFor(m => m.PersonalDetails, "", new { @class = "error" })
<br /><br />
<input type="submit" value="Submit" />
<br />
<span>@Html.Raw(Model.PersonalDetails)</span>
}
</body>
</html>
Screenshot
![Using Html.Raw Helper Method in ASP.Net MVC]()
Downloads
