Umbraco 8: Lưu giá trị từ ContentService (Part 2)

Trong bài viết này, mình sẽ hướng dẫn bạn cách xử lý data sau khi submit form.

Các bước cần thực hiện:

1. Tạo Template -> Page 
2. Tạo Model -> Action
3. Xử lý Data

Tạo Template - Page

Tại trang BackOffice, nhấp Settings -> Templating -> Nhấp phải vào layout, chọn Create. Gõ tên template mà bạn cần tạo. Trong ví dụ này là About Us

Sau đó bạn vào Document Types, tạo page About Us

Lưu ý: Sau khi bạn gõ tên page About Us, bên phải sẽ xuất hiện tên 'aboutUs', đây là Page Alias.

Mở tab Permission, bạn cho phép Child Node Type

Quay trở lại Homepage, tạo ContactUs là 1 child node của HomePage.

Quay trở lại menu Content, tạo Page Contact Us là 1 trang con của Home Page. Sau khi tạo page xong, bạn sẽ có Page Id.

Tạo Model

Bạn tạo model gồm các field: UserName, Email, Message như sau:

Tạo Controller - Model

Để xử lý data, bạn cần có Controller-Model-View

Trong folder Models, tạo file ContactModel

public class ContactModel
{
	[Required]
	public string Name { get; set; }
	[Required]
	[EmailAddress]
	public string Email { get; set; }
	//[Required]
	public string Message { get; set; }
}

Tạo mới Controller ContactFormController:

public class ContactFormController : SurfaceController
{
	private readonly IContentService _contentService;
	public ContactFormController(IContentService contentService)
	{
		_contentService = contentService;
	}

	private const string PartialViewPath = "~/Views/Partials/Contact/";
	// GET: ContactForm
	public ActionResult RenderForm()
	{
		return PartialView(PartialViewPath + "_Contact.cshtml");
	}

	[HttpPost]
	public ActionResult SubmitForm(ContactModel model)
	{
		if (ModelState.IsValid)
		{
			// this is the "parent" node where we'll create the new node
			// it can be GetRootContent() or GetById(someRootId)
			var parentId = CurrentPage.Id;
			var parentNode = _contentService.GetById(parentId);
			var parentUdi = new GuidUdi(parentNode.ContentType.ToString(), parentNode.Key);			
			//var newContent = _contentService.CreateAndSave("Record Name", parentId, "Record Document Type");
			var newContent = _contentService.CreateContent(model.Name, parentUdi, "contactUs");
			TempData["ContactSuccess"] = true;
			// get an instance of the contentService
			// create new content, the last param is the userId and is optional [default = 0]
			// set property values
			newContent.SetValue("UserName", model.Name);
			newContent.SetValue("Email", model.Email);
			newContent.SetValue("Message", model.Message);
			// save (or save and publish)
			_contentService.SaveAndPublish(newContent);
			return RedirectToCurrentUmbracoPage();
		}

		return CurrentUmbracoPage();
	}
}

Surface Controller là 1 MVC controller đặc biệt trong Umbraco dùng để giao tiếp với front-end. Surface Controller dùng để hiển thị views từ child action và xử lý form-data. Surface Controller sử dụng auto-routed, nghĩa là bạn không cần thêm routes cho chúng.

Để giao tiếp với data trong Umbraco, bạn sẽ sử dụng ContentService

"The ContentService acts as a "gateway" to Umbraco data for operations which are related to Content."

CurrentPage.Id: lấy Id hiện tại của Page, trong ví dụ này là 1162

Tạo file Partial View với nội dung như sau:

@inherits Umbraco.Web.Mvc.UmbracoViewPage<GettingStarted.Models.ContactModel>
@using GettingStarted.Controllers


<div class="row">
    <div class="col-lg-6">
        <h2>Welcome to Avenger Team</h2>

        @using (Html.BeginUmbracoForm<ContactFormController>("SubmitForm", FormMethod.Post))
        {
            <div class="form-group">
                @Html.LabelFor(m => m.Name)
                @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
                @Html.ValidationMessageFor(m => m.Name)
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.Email)
                @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
                @Html.ValidationMessageFor(m => m.Email)
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.Message)
                @Html.TextAreaFor(m => m.Message, new { @class = "form-control" })
                @Html.ValidationMessageFor(m => m.Message)
            </div>
            <input type="submit" class="btn btn-primary" name="Submit" value="Submit" />
        }
    </div>
</div>

Mở page ContactUs.cshtml, thêm đoạn code sau:

@{ Html.RenderAction("RenderForm", "ContactForm"); } 

Bạn sẽ có giao diện như sau:

Sau khi Submit form, bạn vào Content->Home->ContactUs sẽ thấy nội dung đã submit:

Chúc các bạn thành công!!!