Как мне оформить эту страницу?

Question

Пожалуйста, смотрите эту картинку:

У меня есть отношения один ко многим, например.Персона и адрес.Проблема здесь в том, что это «добавочная» форма, поэтому даже основной записи нет в базе данных.Как мне разработать этот интерфейс и реализацию?Что, если человек нажимает «сохранить адрес» во всплывающем окнеС кем мне следует связать этот конкретный адрес?В Asp.Net я бы сохранил его во ViewState, и поэтому эта проблема не возникла бы.Но как мне сделать это Asp.Net MVC 3.0?Должен ли я сохранить его в сеансе, а затем, когда, наконец, нажмете «Сохранить» в главной форме, я получу все адреса из сеанса и сохраню ихЭто выглядит очень хакерским подходом, потому что, если человек откроет одну и ту же форму в двух вкладках?Должен ли я продолжать создавать скрытые поля в дочерней форме и хранить их там в формате CSV или как-то еще?Это работает, но в результате получится некрасивый код javascript.

Надеюсь, у меня ясный вопрос.Если нет, пожалуйста, дайте мне знать.Как вы справляетесь с этим в Asp.Net MVC?

Спасибо.

Answer 1

Когда человек нажимает «Сохранить адрес» во всплывающем окне, используйте некоторый JavaScript, чтобы добавить запись на основную главную страницу, как в виде текста, так и в виде набора скрытых полей, содержащих данные.Когда форма, наконец, будет отправлена ​​обратно, эти скрытые входные данные можно превратить в связанные данные для основной записи.

Когда вы закончите, это будет выглядеть примерно так:

<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>

Примечаниеэто предполагает, что ваша модель представления имеет List<Address> с именем Addresses с соответствующими свойствами в классе Address.Обратите внимание, что индексы должны быть последовательными.Вы можете использовать немного javascript для обновления этих данных при отправке формы.

 $('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;
 });

Обратите внимание, что если вы делаете такие вещи при редактировании и используете что-то подобное, вы, вероятно, захотите добавить Deletedсвойством класса Address и просто скрыть адрес, который удаляется, при установке соответствующего ввода Deleted в значение True, чтобы вы знали, что он должен быть удален при публикации.Я показал это здесь без индексов, так как при создании они будут связаны в порядке их появления.При редактировании, если вы добавите один, вам может потребоваться рассчитать правильный индекс для новых элементов.