Umbraco で入力・確認・処理・結果みたいなフローを作成

Webサイトで良くある
1.入力ページ
2.確認ページ
3.何か処理
4.ありがとうページ
みたいなフローをUmbracoで実装する場合の一例です。

 

環境準備

1.ASP.NET MVC 4 Web アプリケーションでプロジェクトテンプレートは「空」でプロジェクトを作成

2.NuGetでインストール(Install-Package UmbracoCms)

3.プロジェクトを実行して、ウィザードに従ってUmbracoのインストール。
※ 途中でDBを指定するので事前に作成しておきましょう。

4.デフォルトレタリングエンジンを変更

って感じで作ったローカル環境を使ってます。今回は スターターキット「シンプル」、スキン「Friendly Ghost」でUmbracoをインストールしています。

 

サンプル

実際の操作手順を説明すると長くなるので、今回の成果物M・V・Cをペタッと貼っていきます。尚、ここからはViewファイルの作成以外はVisual Studioで作業しています。

[Model]

プロジェクトのModels内に問い合わせで使用するモデルを作成します。

ContactModel.cs

 
    public class ContactModel
    {
        [Required]
        public string Name { get; set; }

        [Required]
        public string Email { get; set; }

        [Required]
        public string Comment { get; set; }
    }

 

[View]

Viewは以下の感じ。ドキュメントタイプは、環境準備で作成されたTextpageを使用。テンプレートはマスター、入力、確認、ありがとうの4つ。

マスター

名前:Contact Master
エイリアス:ContactMaster
マスターテンプレート:None

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>Content</title>
</head>
<body>
    <div>
        <p>@Umbraco.Field("bodyText")</p>
		@RenderSection("ContentSection", required: true)        
    </div>
</body>
</html>

 

入力
名前:Contact Form
エイリアス:ContactForm
マスターテンプレート:Contact Master

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "ContactMaster.cshtml";
}

@section ContentSection
{
    @Html.Action("Contact", "ContactSurface")
}

 

確認
名前:Contact Confirm
エイリアス:ContactConfirm
マスターテンプレート:Contact Master

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "ContactMaster.cshtml";
}

@section ContentSection
{
    @Html.Action("ContactConfirm", "ContactSurface", Model)
}

 

ありがと
名前:Contact Thanks
エイリアス:Contact Thanks
マスターテンプレート:Contact Thanks

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "ContactMaster.cshtml";
}

@section ContentSection
{
}

 

Partial Viewは入力と確認の2つ。

ContactForm.cshtml

@inherits UmbracoViewPage<Test02.Models.ContactModel>

@using (Html.BeginUmbracoForm<ContactSurfaceController>("Contact"))
{
    @Html.EditorFor(x => Model)<br />
    <br />
    <input type="submit" value="送信"/>
}

 

ContactConfirm.cshtml

@inherits UmbracoViewPage<Test02.Models.ContactModel>

@using (Html.BeginUmbracoForm<ContactSurfaceController>("ContactCommit"))
{
    @Html.DisplayFor(x => Model)    

    @Html.HiddenFor(m => m.Name)
    @Html.HiddenFor(m => m.Email)
    @Html.HiddenFor(m => m.Comment)
    <br />
    <input type="submit" value="送信"/>
}

 

[Controller]

プロジェクトのControllers内にSurfaceControllerを継承したコントローラーを作成します。1081や1086などの数字は各コンテンツのプロパティに表示されているIDです。

    public class ContactSurfaceController : SurfaceController
    {
        [ChildActionOnly]
        public ActionResult Contact()
        {
            return PartialView("ContactForm");
        }

        [NotChildAction]
        [HttpPost]
        public ActionResult Contact(ContactModel model)
        {
            if (!ModelState.IsValid)
            {
                return CurrentUmbracoPage();
            }

            //  1086は「確認ページのID」
            var content = Umbraco.TypedContent(1081);
            var renderModel = new RenderModel(content);
            return View("ContactConfirm", renderModel);
        }

        [ChildActionOnly]
        public ActionResult ContactConfirm(ContactModel model)
        {
            return PartialView("ContactConfirm", model);
        }

        public ActionResult ContactCommit(ContactModel model)
        {
            // ここでメールやDBに書き込んだり。

            // 1086は「ありがとうページのID」
            return new RedirectToUmbracoPageResult(1086);
        }
    }

 

こんな感じで完了です。

20130918-003

Comments are closed.

Post Navigation