Question

Please see this pic:

I have a one to many relationship between eg. Person and Address. Problem here is that it is a “add” form and so even master record is not in database. How should I design this UI and implementation? What if the person clicks “save address” in popup. What personId should I associate that particular address with? In Asp.Net I would have stored it in ViewState and so this problem wouldn’t have come. But how do I do this Asp.Net MVC 3.0? Should I store it in Session and then when finally “save” is clicked on main form I retrieve all address from session and save it. This looks to be a very hackish approach because what if the person open same form in two tabs? Should I keep creating hidden fields on the child form and store it there in CSV format or something? This works but will result in an ungly javascript code.

I hope I am clear on my question. If not please let me know. How do you handle this in Asp.Net MVC?

Thanks.

Answer 1

When the person clicks “Save Address” in the popup, use some javascript to add the entry to the underlying main page, both as text and a set of hidden fields containing the data. When the form is finally posted back, those hidden inputs can be turned into the related data for the main record.

It will look something like this when you are done.

<div class="addresses">
    <div class="address">
        123 Street, Foo City, Idaho, 22222-2222
        <a href="#" class="delete-address">Delete</a>
        <input type="hidden" name="Addresses[0].Street" value="123 Street" class="address-start" />
        <input type="hidden" name="Addresses[0].City" value="Foo City" />
        <input type="hidden" name="Addresses[0].State" value="Idaho" />
        <input type="hidden" name="Addresses[0].Zip" value="22222-2222" />
    </div>
    ...
</div>

<!-- so you can remove them once added -->
<script type="text/javascript">
    $(function() {
         $('.delete-address').click( function() {
               $(this).closest('.address').remove();
         });
    });
</script>

Note this assumes your view model has a List<Address> named Addresses with the appropriate properties on the Address class. Note that the indices need to be consecutive. You can use a bit of javascript to update these upon form submit.

 $('form').submit( function() {
      $('.address-start').each( function(idx) {
          var prefix = 'Addresses[' + idx + '].';
          $(this).attr('name',prefix + 'Street')
                 .next(':hidden')
                 .attr('name',prefix + 'City' )
                 .next(':hidden')
                 .attr('name',prefix + 'State' )
                 .next(':hidden')
                 .attr('name',prefix + 'Zip' );
      });
      return true;
 });

Note also that if you do this sort of thing when editing and use something similar, you will probably want to add a Deleted property to the Address class and merely hide the address being deleted, while setting the corresponding Deleted input to value True so that you know it should be removed on post. I’ve shown it here without indices as on create they will be bound in the order they occur. On edit if you add one, you may need to calculate the correct index for the new elements.