Adding another “Pet” to a Model Form

by

You could use javascript to dynamically create indexed inputs for post back. As an example create a dummy set of inputs that are cloned and displayed when you click an ‘add pet’ button (assumes Pet properties are displayed in a table with id=’Pets’)

<div id="NewPet" style="display:none">
  <tr>
    <td><input type="text" name="Pets[#].Type value /></td>
    <td><input type="text" name="Pets[#].Breed value /></td>
    <td>.....</td> // more properties of Pet
    <td><input type="hidden" name="Pets[#].Index" value ="%"/></td>
  </tr>
</div>

Note the use of a dummy indexer to prevent this one being posted back

And the script

$('#AddButton').click(function() {
  var index = (new Date()).getTime(); 
  var clone = $('#NewPet').clone();
  // Update the index of the clone
  clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
  clone.html($(clone).html().replace(/"%"/g, '"' + index  + '"'));
  $('#Pets tbody').append(clone.html());
}

More Related Contents:

  1. Why is Model Binding not working in my POST action method?
  2. Razor View throwing “The name ‘model’ does not exist in the current context”
  3. How can I pass parameters to a partial view in mvc 4
  4. Razor actionlink autogenerating ?length=7 in URL?
  5. How to link HTML5 form action to Controller ActionResult method in ASP.NET MVC 4
  6. How do I create a MVC Razor template for DisplayFor()
  7. MVC4 DataType.Date EditorFor won’t display date value in Chrome, fine in Internet Explorer
  8. How do I specify different Layouts in the ASP.NET MVC 3 razor ViewStart file?
  9. How to add Web API to an existing ASP.NET MVC 4 Web Application project?
  10. How to pass IEnumerable list to controller in MVC including checkbox state?
  11. ASP.NET MVC 3 – Partial vs Display Template vs Editor Template
  12. Writing/outputting HTML strings unescaped
  13. In MVC3 Razor, how do I get the html of a rendered view inside an action?
  14. How to render a Section in a Partial View in MVC3?
  15. Why is my CSS bundling not working with a bin deployed MVC4 app?
  16. ASP.NET MVC load Razor view from database
  17. Differences between Html.TextboxFor and Html.EditorFor in MVC and Razor
  18. Razor View Engine : An expression tree may not contain a dynamic operation
  19. How to display an image from a path in asp.net MVC 4 and Razor view?
  20. MVC 5 Dynamic Rows with BeginCollectionItem
  21. asp.net mvc keep object alive, information
  22. WebAPI Delete not working – 405 Method Not Allowed
  23. Set disable attribute based on a condition for Html.TextBoxFor
  24. Why is DisplayFormat DataFormatString not working?
  25. MVC4 enum and radio button list
  26. How to compile cshtml before runtime
  27. MVC 4 how to validate a non-US date with client validation?
  28. Razor Nested WebGrid
  29. Include all files in a folder in a single bundle
  30. Html.Raw() in ASP.NET MVC Razor view

Leave a Comment