Umbraco 7 Custom Form development using MVC controller

Umbraco 7 is one the best and powerful CMS platform based on asp.net MVC. You can also create a custom form in Umbraco. You can easily create a custom form in Umbraco using Razor view and Partial view. Umbraco 7 controllers need to inherit from SurfaceController for creating custom form methods in asp.net MVC.

Let’s discuss how you can create a stunning custom web form in Umbraco 7 cms system. here I am going to explain step by step web form customization in asp.net MVC.

These are some steps to create a custom form in Umbraco 7.

  • Create a model that will be used in Razor view.
  • Add Partial View which contains model elements.
  • Then you have to create SurfaceController.
  • Add View which will call methods of SurfaceController.

For Example, suppose we create forgot password Page in Umbraco 7 cms system. here is total asp.net MVC developer guidelines for creating a custom form. kindly follow the below step by step guideline for the customization.

Step1: Create model that will be used in Razor view.

Create ForgotPasswordModel inside Models folder. kindly follow the below Javascript code for the solution.

public class ForgotPasswordModel
 {
 public ForgotPasswordModel();

 [DataType(DataType.EmailAddress)]
 [Display(Name = "Email Address")]
 [Required(ErrorMessage = "Email Address is required.")]
 [UIHint("Text")]
 public string EmailAddress { get; set; }
 }

Step 2: Add Partial View which contains model elements.

Create Partial View inside ~\Views\Partials folder. keep one thing in mind you do not have to add javascript of that page here. kindly add it in a view. follow the below HTML code for the solution.

@model BussinessLayer.ViewModel.ForgotPasswordModel
@{
 ViewBag.Title = "_ForgotPassword";
}
<div class="container" id="MainContainer">
 <div class="editor-field">
 @Html.EditorFor(model => model.EmailAddress)
 @Html.ValidationMessageFor(model => model.EmailAddress)
 </div>
 <div class="editor-field">
 <button type="submit" id="btnSendIns" class="btn btn-lg btn-sl-red btn-block"><span class="blue icon-key bigger-125"></span>Send Mail</button>
 </div>
</div>

Step3:  Create SurfaceController as following and add ForgotPassword method. Please note that here it returns partial view instead of a view.

public class AccountSurfaceController : SurfaceController
{
public ActionResult ForgotPassword()
{
return PartialView("_ForgotPassword");
}
}
Step 4: Add View which will call methods of SurfaceController. Create Section called "scripts" in Layout page then 
add javascipts related to this page in scripts section as following.

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

@Html.Action("ForgotPassword", "AccountSurface")

@section scripts{
 <script type="text/javascript">
 $(document).ready(function () {
 console.log("Initialize Page");
 });
 </script>
}

Step 5: If you want to post Forgot password form then you need to use a method in view like following then create Post method in AccountSurfaceController.

@using (Html.BeginUmbracoForm("ForgotPassword", "AccountSurface", FormMethod.Post))
{
 <div class="container" id="MainContainer">
 <div class="editor-field">
 @Html.EditorFor(model => model.EmailAddress)
 @Html.ValidationMessageFor(model => model.EmailAddress)
 </div>
 <div class="editor-field">
 <button type="submit" id="btnSendIns" class="btn btn-lg btn-sl-red btn-block"><span class="blue icon-key bigger-125"></span>Send Mail</button>
 </div>
 </div>
}

 

I Hope that this article is useful for Umbraco 7 developers for creating a custom web form in Umbraco 7 using with asp.net MVC and coding implementation.

By | 2017-01-06T18:50:39+00:00 April 4th, 2015|Asp.Net MVC, Content Management System, Umbraco 7|