このトピックでは、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