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

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

openid - Okta: Failed to get authorization code through API call -

ios - Change Storyboard View using Seague -