I am trying to write a page to allow a user to create a template for a property inspection. Basically the page has a TemplateCompany model which has a collection of Template Areas, which has a collection of templateareaitems. When I click an add area button it generates a partial view containing the area textboxes and checkboxes. In this partial view there is a button to generate another partial view to display area item textboxes - which is to handle the user adding MANY area items to the TemplateCompany object.
Problem with this current design is submitting the data to the backend - I have no real way of associating the area item and areaItems with the template
Here is my below code:
//Template class
public partial class TemplateCompany
{
public string Title { get; set; }
public string Description { get; set; }
public string ColourIndicatorHex { get; set; }
...
public virtual ICollection<TemplateCompanyArea> TemplateCompanyAreas { get; set; }
}
Create Template html:
@model ITest.TEST.DAL.TemplateCompany
@using (Html.BeginForm())
{
@Html.LabelFor(m => m.Title)
@Html.EditorFor(m => m.Title, "")
<br /><br />
@Html.LabelFor(m => m.Description)
<br />
@Html.TextAreaFor(m => m.Description, new { cols = 40, rows = 5 })
<br /><br />
@Html.LabelFor(m => m.ColourIndicatorHex)
@Html.EditorFor(m => m.ColourIndicatorHex)
@Html.LabelFor(m => m.UserTemplateRef)
@Html.DisplayFor(m => m.UserTemplateRef)
<br /><br />
@Html.CheckBoxFor(m => m.IsMandatoryEnabledAsDefaultForAllItems)
@Html.LabelFor(m => m.IsMandatoryEnabledAsDefaultForAllItems)
<br /><br />
@Html.CheckBoxFor(m => m.IsRepairModeEnabled)
@Html.LabelFor(m => m.IsRepairModeEnabled)
<br /><br />
@Html.CheckBoxFor(m => m.IncludesFrontTitlePageInReport)
@Html.LabelFor(m => m.IncludesFrontTitlePageInReport)
<br /><br />
//Is there occupancy details in report?
@Html.CheckBoxFor(m => m.DisplayItemNameInActionsReport)
@Html.LabelFor(m => m.DisplayItemNameInActionsReport)
<br /><br />
@Html.CheckBoxFor(m => m.DisplayPhotoCountInReport)
@Html.LabelFor(m => m.DisplayPhotoCountInReport)
<br /><br />
@Html.LabelFor(m => m.ReportRepairsDisclaimerStatement)
<br />
@Html.TextAreaFor(m => m.ReportRepairsDisclaimerStatement, new { cols = 40, rows = 5})
<br />
@Html.LabelFor(m => m.ReportConfidentialityStatement)
<br />
@Html.TextAreaFor(m => m.ReportConfidentialityStatement, new { cols = 40, rows = 5 })
<br />
@Html.LabelFor(m => m.ReportDisclaimerStatement)
<br />
@Html.TextAreaFor(m => m.ReportDisclaimerStatement, new { cols = 40, rows = 5 })
<br />
<div id="addarea">
@Ajax.ActionLink("Click to add area", "_AddArea", "Template", null, new AjaxOptions
{
UpdateTargetId = "addarea",
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET"
})
</div>
<input type="submit" value="Save Template" />
}
Add Area html:
@model ITest.ITest.DAL.TemplateCompanyArea
<h2>Area</h2>
@Html.LabelFor(m => m.AreaName)<br />
@Html.TextAreaFor(m => m.AreaName, htmlAttributes: new {placeholder = "Enter area name here" })
<br />
@Html.LabelFor(m => m.AreaGuideline)<br />
@Html.TextAreaFor(m => m.AreaGuideline, htmlAttributes: new { placeholder = "Enter area guideline here" })
<div id="addareaitem">
@Ajax.ActionLink("Click to add area item", "_AddAreaItem", "Template", null, new AjaxOptions
{
UpdateTargetId = "addareaitem",
InsertionMode = InsertionMode.InsertAfter,
HttpMethod = "GET"
},new { id = "addareaitemlink" })
</div>
Add Area Item html:
@model ITest.ITest.DAL.TemplateCompanyAreaItem
<h2>Area Item</h2>
@Html.LabelFor(m => m.AreaItemName)
@Html.TextAreaFor(m => m.AreaItemName, htmlAttributes: new { placeholder = "Enter area item name here" })
@Html.LabelFor(m => m.AreaItemGuideline)
@Html.TextAreaFor(m => m.AreaItemGuideline, htmlAttributes: new { placeholder = "Enter area item guideline here" })
@Html.CheckBoxFor(m => m.HasRepairs)
@Html.LabelFor(m => m.HasRepairs)
@Html.CheckBoxFor(m => m.IsMandatory)
@Html.LabelFor(m => m.IsMandatory)
<br />
@Ajax.ActionLink("Click to add area item", "_AddAreaItem", "Template", null, new AjaxOptions
{
UpdateTargetId = "addareaitem",
InsertionMode = InsertionMode.InsertAfter,
HttpMethod = "GET"
})
I have considered using a ViewModel for the company, which would just contain the Template Company Information, in addition to a collection of TemplateArea and TemplateAreaItems, then using an EditorFor helper on the create template page. The issue with this is that it includes ALL information of the collection classes - which I do not necessarily need. I am happy to go with an approach like this but I need a solution to this problem and more help on implementing it
Any assistance with a good approach on developing this would be greatly appreciated.
Thanks in advance!