Episerver Forms FormContainerBlock

FormContainerBlock.cshtml

@using EPiServer.Editor
@using EPiServer.Forms
@using EPiServer.Forms.Configuration
@using EPiServer.Forms.Core
@using EPiServer.Forms.Helpers.Internal
@using EPiServer.Forms.EditView.Internal
@using EPiServer.Forms.Implementation.Elements
@using EPiServer.ServiceLocation
@using EPiServer.Web.Mvc.Html

@model FormContainerBlock

@{
	var formConfig = ServiceLocator.Current.GetInstance<IEPiServerFormsImplementationConfig>();
}

@if (PageEditing.PageIsInEditMode)
{
	<link rel="stylesheet" type="text/css" data-epiforms-resource="EPiServerForms.css" href="@ModuleHelper.ToClientResource(typeof(FormsModule), "clientresources/viewmode/episerverforms.css")" />

	if (Model.Form != null)
	{
		<div class="EPiServerForms">
			@Html.PropertyFor(m => m.Title, new { CustomTag = "h2", CssClass = CssClasses.Text.Headings.H2 })
			@Html.PropertyFor(m => m.Description, new { CustomTag = "p", CssClass = CssClasses.Text.Scope })
			@Html.PropertyFor(m => m.ElementsArea)
		</div>
	}
	else
	{
		// In case FormContainerBlock is used as a property, we cannot build Form model so we show a warning message to notify user
		<div class="EPiServerForms">
			<span class="Form__Warning">@Html.Translate("/episerver/forms/editview/cannotbuildformmodel")</span>
		</div>
	}
}
else if (Model.Form != null)
{
	// Using form tag (instead of div) for the sake of html elements' built-in features e.g. reset, file upload
	// Using enctype="multipart/form-data" for post data and uploading files

	<form method="post"
		  id="@Model.Form.FormGuid"
		  class="EPiServerForms @(ViewBag.ValidationFail ? "ValidationFail" : "ValidationSuccess")"
		  enctype="multipart/form-data"
		  data-epiforms-type="form"
		  data-epiforms-metadata="@Model.MetadataAttribute">

		@* Meta data, authoring data of this form is transfer to clientside here. We need to take form with language coresponse with current page's language *@

		<script src="@(formConfig.CoreController)/GetFormInitScript?formGuid=@(Model.Form.FormGuid)&formLanguage=@(FormsExtensions.GetCurrentPageLanguage())"></script>

		@* Meta data, send along as a SYSTEM information about this form, so this can work without JS *@
		<input type="hidden" class="Form__Element Form__SystemElement FormHidden FormHideInSummarized" name="__FormGuid" value="@Model.Form.FormGuid" />
		<input type="hidden" class="Form__Element Form__SystemElement FormHidden FormHideInSummarized" name="__FormHostedPage" value="@FormsExtensions.GetCurrentPageLink().ToString()" />
		<input type="hidden" class="Form__Element Form__SystemElement FormHidden FormHideInSummarized" name="__FormLanguage" value="@FormsExtensions.GetCurrentPageLanguage()" />
		<input type="hidden" class="Form__Element Form__SystemElement FormHidden FormHideInSummarized" name="__FormCurrentStepIndex" value="@(ViewBag.CurrentStepIndex ?? string.Empty)" />
		<input type="hidden" class="Form__Element Form__SystemElement FormHidden FormHideInSummarized" name="__FormSubmissionId" value="@(ViewBag.FormSubmissionId)" />

		@Html.PropertyFor(m => m.Title, new { CustomTag = "h2", CssClass = CssClasses.Text.Headings.H2 })
		@Html.PropertyFor(m => m.Description, new { CustomTag = "p", CssClass = CssClasses.Text.Scope })

		@{
			var statusDisplay = "hide";
			var message = ViewBag.Message;

			if (ViewBag.FormFinalized || ViewBag.IsProgressiveSubmit)
			{
				statusDisplay = "Form__Success__Message";
			}
			else if (ViewBag.Submittable == false && string.IsNullOrEmpty(message) == false)
			{
				statusDisplay = "Form__Warning__Message";
			}
		}

		@if (ViewBag.IsReadOnlyMode)
		{
			<div class="Form__Status Form__Readonly__Message">
				@Html.Translate("/episerver/forms/viewmode/readonlymode")
			</div>
		}

		<div class="Form__Status Form__Status__Message @statusDisplay">
			@if (ViewBag.FormFinalized)
			{
				@Html.Raw(message)
			}
			else
			{
				@message
			}
		</div>

		<div class="Form__MainBody">
			@{
				var stepIndex = 0;
				var numberOfSteps = Model.Form.Steps.Count();
				var currentStepIndex = ViewBag.CurrentStepIndex == null ? -1 : (int)ViewBag.CurrentStepIndex;
				var displayStepNavigation = numberOfSteps > 1 && currentStepIndex > -1 && currentStepIndex < numberOfSteps && !ViewBag.FormFinalized;

				var stepDisplaying = string.Empty;
			}

			@foreach (var step in Model.Form.Steps)
			{
				stepDisplaying = (currentStepIndex == stepIndex && !ViewBag.FormFinalized && (bool)ViewBag.IsStepValidToDisplay) ? null : "hide";

				<div class="FormStep @stepDisplaying" id="@step.ElementName" data-epiforms-element-name="@step.ElementName" data-epiforms-stepindex="@stepIndex">
					@{
						var stepBlock = (step.SourceContent as ElementBlockBase);

						if (stepBlock != null)
						{
							Html.RenderContentData(step.SourceContent, false);
						}

						// Each FormStep groups the elements below it til the next FormStep
						Html.RenderFormElements(stepIndex, step.Elements);

						stepIndex++;
					}
				</div>
			}

			@if (displayStepNavigation)
			{
				// show Next/Previous buttons when having Steps > 1 and navigationBar when currentStepIndex is valid
				var prevButtonDisableState = (currentStepIndex == 0) || !ViewBag.Submittable ? "disabled" : null;
				var nextButtonDisableState = (currentStepIndex == numberOfSteps - 1) || !ViewBag.Submittable ? "disabled" : null;

				if (Model.ShowNavigationBar)
				{
					<div class="Form__NavigationBar">
						<button @prevButtonDisableState type="submit" name="submit" value="@SubmitButtonType.PreviousStep.ToString()" class="Form__NavigationBar__Action FormExcludeDataRebind btnPrev">
							@Html.Translate("/episerver/forms/viewmode/stepnavigation/previous")
						</button>

						@{
							// calculate the progress style on-server-side
							var currentDisplayStepIndex = currentStepIndex + 1;
							var progressWidth = (100 * currentDisplayStepIndex / numberOfSteps) + "%";
						}

						<div class="Form__NavigationBar__ProgressBar">
							<div class="Form__NavigationBar__ProgressBar--Progress" style="width: @progressWidth"></div>
							<div class="Form__NavigationBar__ProgressBar--Text">
								<span class="Form__NavigationBar__ProgressBar__ProgressLabel">@Html.Translate("/episerver/forms/viewmode/stepnavigation/page")</span>
								<span class="Form__NavigationBar__ProgressBar__CurrentStep">@currentDisplayStepIndex</span>/<span class="Form__NavigationBar__ProgressBar__StepsCount">@numberOfSteps</span>
							</div>
						</div>

						<button  @nextButtonDisableState type="submit" name="submit" value="@SubmitButtonType.NextStep.ToString()" class="Form__NavigationBar__Action FormExcludeDataRebind btnNext">
							@Html.Translate("/episerver/forms/viewmode/stepnavigation/next")
						</button>
					</div>
				}
			}
		</div>
	</form>
}