我应该如何设计这个网页？ [英] How should I design this page?

问题描述

请看到这个图片：

我有一个如之间的许多关系。 Person和Address。这里的问题是，它是一个增加的形式，因此，即使掌握记录不在数据库。我应该如何设计这个UI和实施？如果这个人点击，在弹出的保存地址。我应该什么关联PERSONID与特定的地址吗？在Asp.Net我早就把它存储在ViewState中，因此这个问题就不会来了。但我怎么做到这一点Asp.Net MVC 3.0吗？我是否应该将其存储在会话，然后单击主窗体上的时候终于拯救是我检索会话中的所有地址，并将其保存。这看起来是一个非常hackish的方法，因为如果有什么人在两个选项卡打开相同的形式？我应该保持子窗体上创建隐藏字段，并以CSV格式什么的有店？这工作，但会导致ungly的JavaScript code。

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.

我希望我对我的问题清楚。如果没有，请让我知道。如何在Asp.Net MVC处理呢？

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

感谢。

推荐答案

在的人点击，在弹出的保存地址，使用一些JavaScript来的条目添加到底层的主网页，无论是作为文字和一组隐藏包含的数据字段。当窗体终于调回，那些隐藏的投入可以变成相关数据的主记录。

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>

请注意这是假定您的视图模式有一个列表＆LT;地址＆gt; 名为地址与适当的属性的地址类。注意，指数必须是连续的。您可以使用一些JavaScript来更新这些时提交表单。

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.

这篇关于我应该如何设计这个网页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！