我该如何设计这个页面？

Question

请看这张照片:

我之间有一对多的关系.人和地址.这里的问题是它是一个"添加"形式,所以即使主记录也不在数据库中.我该如何设计这个UI和实现？如果此人在弹出窗口中单击"保存地址",该怎么办？我应该将该特定地址与哪个人联系起来？在Asp.Net中我会将它存储在ViewState中,所以这个问题不会出现.但是我如何做这个Asp.Net MVC 3.0？我应该将它存储在Session中,然后当最后在主窗体上单击"保存"时,我会从会话中检索所有地址并保存它.这看起来是一种非常强硬的方法,因为如果这个人在两个标签中打开相同的表单怎么办？我应该继续在子表单上创建隐藏字段并以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>命名.请注意,索引需要是连续的.您可以使用一些javascript在表单提交时更新这些.AddressesAddress

 $('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输入设置为value,True以便您知道它应该是在帖子上删除.我已经在这里展示了它没有索引,因为创建它们将按它们发生的顺序绑定.在编辑时,如果添加一个,则可能需要为新元素计算正确的索引.