MVC 3 - Edit Editor Templates for Child Objects

Question

I am trying to create a form that allows the user to create an object with a 0x child, the main object of which is Lead , which has 0 many Beneficiary and Payer objects. The relationship between the three is as follows:

 Lead has many Beneficiaries (one to many) Lead has many Payers (many to many) joined through LeadsPayers 

In my editor for my lead presentation model, I have a loop that generates an editor for each recipient and payer connected to the lead, but I want to have a button that will dynamically add another beneficiary or payer to the lead and use the editor template so that I there was no duplicate html in my javascript code.

I have the job of binding everything to Lead when my form is submitted to the controller. I just don’t know how to reuse the editor template code to create compatible html with my current form, has anyone done this before? There should be a better way than ajax button that displays html

Answer 1

This helped me to get on the right path , but not completely what I wanted to do, and since it does not seem to be easily supported in MVC, here is my job to get all this working with binding the model to the controller.

My ultimate goal

To dynamically add child objects to the form with the corresponding html so that they automatically bind to the parent object when passed to the control method, that is, I needed HTML like this

 <input name='Lead_Beneficiaries_1__{Property}' id=... /> 

And not so (this is what leads the blog post)

 <input name='Beneficiary__{Property}' /> 

which does not auto-bind to the parent when sent to the controller.

Decision

Instead of using Ajax to visualize the html editor template from the controller, I automatically expose one editor template when the form loads, and then can be loaded as necessary by the user. JQuery code

 $("#addBeneficiary").click(function(e) { e.preventDefault(); var beneficiary = $(".beneficiary:last").clone(); var count = parseInt(beneficiary.find("input:first").attr("id").match(/\d+/), 10); beneficiary.find("input").each(function(indx, element) { var name = $(element).attr('name').replace(count, count+1), id = $(element).attr('id').replace(count, count+1); $(element).attr('name', name); $(element).attr('id', id); $(element).val(''); }); $("#beneficiaries").append(beneficiary); }); 

I just wrapped my editorial template in a div so that it could be easily grabbed as an integer from jquery, clone it, clear input values ​​and increase the counter for each element, so when I publish, I get a set of child objects on my parent without the need to explicitly catch them in method or pull out of the dictionary form.

Although this is probably not the best solution, it does the job as I expected, and I did not duplicate the HTML for the editor template. Also, if there are form errors, since the parent has several children, they are automatically generated using my form code and nothing is lost due to client-side additions.

Answer 2

For a variable-length list with jquery, you can take a look at after the blog post .

In your main view:

 @using (Html.BeginForm()) { ... some other input fields on the main view model @Html.EditorFor(x => x.Beneficiaries) <input type="submit" value="OK" /> } 

and inside the editor template ( ~/Views/Shared/EditorTemplate/Beneficiary.cshtml ):

 @model AppName.Models.Beneficiary <div> @Html.LabelFor(x => x.BeneficiaryName) @Html.TextBoxFor(x => x.BeneficiaryName) </div> .... 

The naming convention is important: the editor template should be called XXX.cshtml and located in the ~ / Views / Shared / EditorTemplates folder, where XXX is the type of collection:

 public IEnumerable<XXX> Beneficiaries { get; set; } 

Answer 3

This question is very old, but I have another way to solve it.

I am creating a script template, i.e.

 <script type="text/html" id="deliveryTemplate"> @{ var Deliveries = new List<ChristmasOrderDeliveryForm> { new ChristmasOrderDeliveryForm() }; @Html.EditorFor(model => model.Deliveries ) } </script> 

I use this to create a new section and with javascript similar to @ pistol-pete

The reason I use the template instead of cloning an existing row is because all the data is set to default values, etc.

Answer 4

I just needed to do it myself, and came up with a very similar solution before finding this question. My solution seems cleaner (for me) and processes not only the <input> , but also the <label> and <select> tags and any other form elements. I adapted my code according to the original question.

Html Sample:

 <ul id="beneficiaries"> <li class="beneficiary"> <p> <label for="Lead_Beneficiaries_0__FirstName">First Name</label> <input type="text" id="Lead_Beneficiaries_0__FirstName" name="Lead.Beneficiaries[0].FirstName" /> </p> <p> <label for="Lead_Beneficiaries_0__LastName">Last Name</label> <input type="text" id="Lead_Beneficiaries_0__LastName" name="Lead.Beneficiaries[0].LastName" /> </p> </li> </ul> <button type="button" id="addBeneficiary">Add Beneficiary</button> 

JavaScript to add a new editor template element:

 $('#addBeneficiary').click(function () { var count = $('.beneficiary').length; var clone = $('.beneficiary:first').clone(); clone.html(function (index, html) { return html .replace(/Beneficiaries\[0\]/g, 'Beneficiaries[' + count + ']') .replace(/Beneficiaries_0__/g, 'Beneficiaries_' + count + '__'); }); $('.beneficiary:last').after(clone); });