このトピックでは、igHtmlEditor™ コンテンツを Web サーバーに保存する方法について説明します。
トピック
igHtmlEditor の概要: このトピックでは、igHtmlEditor の機能について説明します。
igHtmlEditor の追加: このトピックでは、igHtmlEditor を Web ページに追加する方法について説明します。
外部リソース
このトピックは、以下のセクションで構成されます。
この手順は、ASP.NET MVC アプリケーションで igHtmlEditor を構成する方法を示します。igHtmlEditor には HTML コードが含まれているため、ASP.NET Request Validation を操作する必要があります。Request Validation はセキュリティ機能で、ユーザーが JavaScript や HTML など悪意のある可能性があるコードをサーバーに投稿できないようにします。
ASP.NET MVC 3 で、プロパティ単位で Request Validation をオフにできます。これを行うには、AllowHtml 属性を igHtmlEditor コンテンツを保存するプロパティに追加します。
ASP.NET MVC 2 で、オブジェクト単位で Request Validation をオフにできます。ValidateInput 属性をコントローラー メソッドに追加します。
以下のスクリーンショットは最終結果のプレビューです。
この手順を実行するには、以下が必要です。
このトピックでは、ASP.NET MVC 3 フォームで igHtmlEditor を構成する方法を手順ごとに示します。以下はプロセスの概念的概要です。
以下の手順は、ASP.NET MVC 3 プロジェクトで igHtmlEditor を構成する方法を示しています。
a. ForumPost クラスを作成します。
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. AllowHtml 属性を Post プロパティに追加します。
C# の場合:
[AllowHtml]
public string Post { get; set; }
a. AddPost アクション メソッドをコントローラーで定義します。
このメソッドは、デフォルト ビューを返します。
C# の場合:
public ActionResult AddPost()
{
return View();
}
b. SavePost アクション メソッドをコントローラーで定義します。
このメソッドには、モデル クラス ForumPost のオブジェクト インスタンスであるパラメーターが 1 つあります。SaveForumPost はヘルパー メソッドで、コンテンツをデータベースに保存します。フォーラム投稿を保存した後、ユーザーには ListForumPosts ビューが表示され、フォーラム投稿のリストを表示します。
MVC 3 の場合
C# の場合:
public ActionResult SavePost(ForumPost forumPost)
{
SaveForumPost(forumPost);
return View("ListForumPosts");
}
private void SaveForumPost(ForumPost forumPost)
{
//Save forum post to database
}
MVC 2 の場合
C# の場合:
[ValidateInput(false)]
public ActionResult SavePost(ForumPost forumPost)
{
SaveForumPost(forumPost);
return View("ListForumPosts");
}
AddPost ビューを定義します。
a. 厳密に型指定されたモデルをビューに追加します。
このモデルにより、ASP.NET MVC モデル バインドのある HtmlEditorFor ヘルパー メソッドを使用できます。
C# の場合:
@model igHtmlEditor.Models.ForumPost
b. igHtmlEditor をビューで初期化します。
HtmlEditorFor を使用して、モデルの特定フィールドの igHtmlEditor を初期化します。
C# の場合:
@Html.Infragistics().HtmlEditorFor(m => m.Post).ID("igHtmlEditor").Width("500px").Height("500px").Render()
この手順は、AJAX 呼び出しの igHtmlEditor コンテンツを ASP.NET MVC 3 アクションに投稿する方法を示します。ASP.NET Request Validation もここで適用されます。
注: ASP.NET Web Forms プロジェクトでこのコードを簡単に使用できます。
以下のスクリーンショットは最終結果のプレビューです。
この手順を実行するには、以下が必要です。
このトピックでは、AJAX 呼び出しの igHtmlEditor コンテンツを送信する方法を手順ごとに示します。以下はプロセスの概念的概要です。
以下の手順は、ASP.NET MVC 3 プロジェクトの igHtmlEditor が AJAX POST 要求で使用されるように構成する方法を示しています。
フォームを HTMLで定義します。
HTML の場合:
<form id="forumPostForm" method="post" action="/Home/SavePost">
<div id="htmlEditor"></div>
<input type="button" onclick="postHtmlEditorContent();" value="Save" />
</form>
または Razor で定義します。
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" />
}
指定されたアクション パラメーターまたはモデル フィールドのコンテンツを取得するために、Infragistics Loader で初期化し、inputName オプションを設定します。
JavaScript の場合:
$.ig.loader(function () {
$('#htmlEditor').igHtmlEditor({inputName: "Post"});
});
Razor で HtmlEditorFor メソッドを使用して初期化し、エディターをモデル フィールドにバインドします。
C# の場合:
@Html.Infragistics().HtmlEditorFor(m => m.Post).ID("htmlEditor").Render()
JavaScript 関数を定義し、フォームを AJAX 呼び出しで投稿します。モデル バインドを使用する場合、モデル オブジェクトがメソッド パラメーターとしてそのまま構築されます。
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"
});
}
ForumPost パラメーターで定義されたアクション メソッドを作成します。AJAX call 呼び出しが処理されると、フォームの値が入力された ForumPost インスタンスが作成されます。SaveForumPost メソッドを使用して、永続ストレージに保存します。
C# の場合:
public ActionResult SavePost(ForumPost forumPost)
{
SaveForumPost(forumPost);
return View("ListForumPosts");
}
private void SaveForumPost(ForumPost forumPost)
{
//Save forum post to database
}
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
ツールバーとボタンの構成: このトピックでは、igHtmlEditor のツールバーとボタンを構成する方法について説明します。
プログラムによるコンテンツの変更: このトピックでは、API を使用して igHtmlEditor のコンテンツを修正する方法について説明します。
このトピックについては、以下のサンプルも参照してください。
オンラインで表示: GitHub