0

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!

Mark
  • 501
  • 2
  • 11
  • 28
  • Your current implementation will not work because your `@Ajax.ActionLink()` methods are adding partial views with form controls that have no relationship to your model. Refer the answers [here](http://stackoverflow.com/questions/29161481/post-a-form-array-without-successful/29161796#29161796) and [here](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) for options (and not the `BeginCollectionItem` option will not work because it only supports one level of nesting) –  Jul 11 '16 at 00:59
  • @StephenMuecke I have read through your solutions but I'm still unsure about how to generate the items form each time a button is clicked. The form for items is to cascade down the page each time the button is clicked, rather than replacing the fields. Do you have a solution for something like this? I've changed around my solution so that there are no partial views and the create template page uses a ViewModel which contains the Area List and AreaItem Lists, as well as the raw template fields such as Title, description etc. Is this a good idea to remove partial views altogether? – Mark Jul 11 '16 at 02:05
  • 1
    Have a look at [this DotNetFiddle](https://dotnetfiddle.net/I8q07y) to get you started –  Jul 11 '16 at 03:22
  • Thanks @StephenMuecke you've been a big help – Mark Jul 12 '16 at 10:04

0 Answers0