Question

请看这张照片：

enter image description here

我之间有一对多的关系。人和地址。这里的问题是它是一个“添加”形式，所以即使主记录也不在数据库中。我该如何设计这个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>类中具有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，以便您知道它应该在帖子中删除。我已经在这里展示了它没有索引，因为创建它们将按它们发生的顺序绑定。在编辑时，如果添加一个，则可能需要为新元素计算正确的索引。

我该如何设计这个页面？

1 个答案: