asp.net mvc - Adding another "Pet" to a Model Form -
simplified example.
i have model has few fields:
ownerfirstname ownerlastname list<pet> pets (pet few string fields)
the ui needs allow user add number of new pets. ui pet entry mvc template _peteditor.cshtml
client side, how add new pet model's pet collection, add new set of fields pet _peteditor.cshtml ?
when user submits form, mvc model pets added.
you use javascript dynamically create indexed inputs post back. example create dummy set of inputs cloned , displayed when click 'add pet' button (assumes pet properties displayed in table 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 use of dummy indexer prevent 1 being posted back
and script
$('#addbutton').click(function() { var index = (new date()).gettime(); var clone = $('#newpet').clone(); // update index of clone clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']')); clone.html($(clone).html().replace(/"%"/g, '"' + index + '"')); $('#pets tbody').append(clone.html()); }
Comments
Post a Comment