This topic explains how to save igHtmlEditor™ content to a web server.
Topics
igHtmlEditor Overview: This topic explains the features of the igHtmlEditor.
Adding igHtmlEditor: This topic explains how to add the igHtmlEditor to a web page.
External Resources
This topic contains the following sections:
This procedure shows you how to configure an igHtmlEditor in an ASP.NET MVC application. Because the igHtmlEditor contains HTML code, you have to work with ASP.NET Request Validation. Request Validation is a security feature that prevents users from posting potentially malicious code like JavaScript and HTML to the server.
In ASP.NET MVC 3, you can turn off request validation on a per property basis. To do this, add the AllowHtml attribute to the property on which you store the igHtmlEditor content.
In ASP.NET MVC 2, you can turn off request validation on a per object basis. Add the ValidateInput attribute to the controller method.
The following screenshot is a preview of the final result.
To complete the procedure, you need the following:
This topic takes you step-by-step toward configuring the igHtmlEditor in an ASP.NET MVC 3 Form. The following is a conceptual overview of the process:
3. Defining the igHtmlEditor in the View
The following steps demonstrate how to configure the igHtmlEditor in an ASP.NET MVC 3 project.
a. Create a ForumPost class
In C#:
public class ForumPost
{
public int Id { get; set; }
public string User { get; set; }
public string Title { get; set; }
public DateTime DatePosted { get; set; }
public string Post { get; set; }
}
b. Add the AllowHtml attribute to the Post property.
In C#:
[AllowHtml]
public string Post { get; set; }
a. Define an AddPost action method in your controller
This method returns the default view.
In C#:
public ActionResult AddPost()
{
return View();
}
b. Define a SavePost action method in your controller
This method has one parameter which is the object instance of the model class, ForumPost. SaveForumPost is a helper method in which the content is saved to a database. After saving the forum post the user is shown the ListForumPosts view, which shows the list of the forum posts.
For MVC 3
In C#:
public ActionResult SavePost(ForumPost forumPost)
{
SaveForumPost(forumPost);
return View("ListForumPosts");
}
private void SaveForumPost(ForumPost forumPost)
{
//Save forum post to database
}
For MVC 2
In C#:
[ValidateInput(false)]
public ActionResult SavePost(ForumPost forumPost)
{
SaveForumPost(forumPost);
return View("ListForumPosts");
}
Define the igHtmlEditor in the View.
Define an AddPost View.
a. Add a strongly typed model to the View
This model allows you to use the HtmlEditorFor helper method with ASP.NET MVC model binding.
In C#:
@model igHtmlEditor.Models.ForumPost
b. Initialize the igHtmlEditor in the view
Use HtmlEditorFor to initialize the igHtmlEditor for a specific field of the model.
In C#:
@Html.Infragistics().HtmlEditorFor(m => m.Post).ID("igHtmlEditor").Width("500px").Height("500px").Render()
This procedure shows you how to post igHtmlEditor content in an AJAX call to an ASP.NET MVC 3 action. ASP.NET Request Validation is also applied here.
Note: You can easily use this code in an ASP.NET Web Forms project.
The following screenshot is a preview of the final result.
To complete the procedure, you need the following:
This topic takes you step-by-step toward sending the igHtmlEditor content in an AJAX call. The following is a conceptual overview of the process:
2. Initializing the igHtmlEditor
4. Defining the server Action Method
The following steps demonstrate how to configure the igHtmlEditor in an ASP.NET MVC 3 project to be used in an AJAX POST request.
Define the form in HTML:
In HTML:
<form id="forumPostForm" method="post" action="/Home/SavePost">
<div id="htmlEditor"></div>
<input type="button" onclick="postHtmlEditorContent();" value="Save" />
</form>
or in Razor:
In C#:
@using (Html.BeginForm("SavePost", "Home", FormMethod.Post, new { id = "forumPostForm" }))
{
@Html.Infragistics().HtmlEditorFor(m => m.Post).ID("htmlEditor").Render()
<input type="button" onclick="postHtmlEditorContent();" value="Save" />
}
Initialize with the Infragistics loader and set the inputName option in order to get the content in a named action parameter or model field.
In JavaScript:
$.ig.loader(function () {
$('#htmlEditor').igHtmlEditor({inputName: "Post"});
});
Initialize in Razor with the HtmlEditorFor method and bind the editor to the model field.
In C#:
@Html.Infragistics().HtmlEditorFor(m => m.Post).ID("htmlEditor").Render()
Define a JavaScript function to post the form in an AJAX call. When you use model binding, the model object is constructed out of the box as the method parameter.
In JavaScript:
function postHtmlEditorContent() {
// serialize the form
var data = $("#forumPostForm").serialize();
// post the form as an ajax call
$.ajax({
type: "POST",
url: "/Home/SavePost",
data: data,
dataType: "text"
});
}
Define the server Action Method
Create an action method defined with a ForumPost parameter. When the AJAX call is processed it will create a ForumPost instance populated with the values of the form. The SaveForumPost method is used to save to persistent storage.
In C#:
public ActionResult SavePost(ForumPost forumPost)
{
SaveForumPost(forumPost);
return View("ListForumPosts");
}
private void SaveForumPost(ForumPost forumPost)
{
//Save forum post to database
}
The following topics provide additional information related to this topic.
Configuring Toolbars and Buttons: This topic explains how to configure igHtmlEditor toolbars and buttons.
Modifying Contents Programmatically: This topic explains how to modify igHtmlEditor contents by using the API.
The following samples provide additional information related to this topic.
View on GitHub