Version

Saving the HTML Content Programmatically

Topic Overview

Purpose

This topic explains how to save igHtmlEditor™ content to a web server.

Required Background

  • ASP.NET Request Validation

Topics

External Resources

  • Understanding Request Validation in ASP.NET MVC 3
  • Request Validation - Preventing Script Attacks

In This Topic

This topic contains the following sections:

Posting the HTML content in an ASP.NET MVC 3 Form

Introduction

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.

Preview

The following screenshot is a preview of the final result.

Requirements

To complete the procedure, you need the following:

  • An ASP.NET MVC 3 project with included Ignite UI for jQuery resources

Overview

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:

1. Defining the Model

2. Defining the Controller

3. Defining the igHtmlEditor in the View

Steps

The following steps demonstrate how to configure the igHtmlEditor in an ASP.NET MVC 3 project.

  1. Define the Model.

    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; }
    
  2. Define the Controller.

    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");
     }
    
  3. 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()
    

Sending the HTML content in an AJAX call

Introduction

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.

Preview

The following screenshot is a preview of the final result.

Requirements

To complete the procedure, you need the following:

  • An ASP.NET MVC 3 project with included Ignite UI for jQuery resources

Overview

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:

1. Defining the form

2. Initializing the igHtmlEditor

3. Defining the AJAX function

4. Defining the server Action Method

Steps

The following steps demonstrate how to configure the igHtmlEditor in an ASP.NET MVC 3 project to be used in an AJAX POST request.

  1. Define the form

    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" />
     }
    
  2. Initialize the igHtmlEditor

    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()
    
  3. Define the Ajax function

    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"
         });
     }
    
  4. 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
     }
    

Related Content

Topics

The following topics provide additional information related to this topic.

Samples

The following samples provide additional information related to this topic.

  • Edit Content: In this forum post example, an initial piece of content provided in the HTML Editor.

View on GitHub