c# - 这个页面应该怎么设计？

Question

请看这张照片:

我有一个一对多的关系，例如。人和地址。这里的问题是它是一个“添加”表单，所以即使主记录也不在数据库中。我应该如何设计这个 UI 和实现？如果此人在弹出窗口中单击“保存地址”怎么办。我应该将该特定地址与哪个 personId 相关联？在 Asp.Net 中，我会将其存储在 ViewState 中，因此不会出现此问题。但是我该如何做这个 Asp.Net MVC 3.0？我应该将它存储在 session 中，然后当最后在主窗体上单击“保存”时，我从 session 中检索所有地址并保存它。这看起来是一种非常 hackish 的方法，因为如果这个人在两个选项卡中打开相同的表单怎么办？我应该继续在子表单上创建隐藏字段并将其以 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>

请注意，这假设您的 View 模型有一个 List<Address>名为 Addresses在 Address 上具有适当的属性类(class)。请注意，索引需要是连续的。您可以使用一些 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属性(property)给Address类，只是隐藏被删除的地址，同时设置相应的Deleted输入值 True这样您就知道应该在发布时将其删除。我在这里展示了它没有索引，因为在创建时它们将按照它们出现的顺序进行绑定(bind)。如果添加一个编辑，您可能需要为新元素计算正确的索引。