ASP.NET MVC在一个视图中创建具有相关对象的对象

时间:2015-03-14 00:34:25

标签: c# asp.net asp.net-mvc asp.net-mvc-4

我是ASP.NET MVC的新手,我想创建一个视图,我可以在其中创建一个新对象以及相关对象。

例如:我有以下类Person:

public class Person
{
    public int PersonId { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }

    public virtual List<Address> Addresses { get; set; }
}

班级地址:

public class Address
{
    public int AddressId { get; set; }
    public string City { get; set; }
    public string Street { get; set; }

    public int PersonId { get; set; }
    public virtual Person Person { get; set; }
}

我想要实现的目的是让用户可以输入此人的数据和该用户的任意数量的地址。

我的第一个(简单)尝试只是提供一个映射到控制器方法的动作链接。此方法将Person对象作为参数,将Address对象添加到集合Addresses并返回一个新的create视图(可能不太好,但这很有效)。但是当我试图添加第二个地址时,我注意到Person的地址集合再次为空。

针对此类问题的任何夸大/最佳做法?

谢谢!

1 个答案:

答案 0 :(得分:0)

我建议你采用以下方法:

1.创建视图模型:

public class AddressViewModel
{ 
    public string City { get; set; }
    public string Street { get; set; }
}

public class PersonViewModel()
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public AddressViewModel AddressViewModelTemplate {get; set;}
    public Collection<AddressViewModel> Addresses {get; set;}
}

然后在您的视图中,您可以为AddressViewModelTemplate使用隐藏的EditorTempalete,并在某个按钮点击时使用javascript显示它。当然,您必须调整生成的绑定集合的名称。

样本编辑器模板。你可以选择更好的结构。

    @model AddressViewModel
    <div>
        <div>@Html.LabelFor(x => x.City)</div>
        <div>@Html.TextBoxFor(x => x.City)</div>
    </div>
    <div>
        <div>@Html.LabelFor(x => x.Street)</div>
        <div>@Html.TextBoxFor(x => x.Street)</div>
    </div>

在强类型视图中:

@model PersonViewModel;
@using(Html.BeginForm())
{
    //Display textbox for Person properties here
    ....
    <div id="addressInfo" style:"dislpay:none">
        @Html.EditorFor(x => x.AddressViewModelTemplate)
    </div>
    ....
    <div id="AddressesWraper">
        <input id="btnAddAddress" type="button" value="Add new Address" />
    <div>
}
<script>
    $(document).ready(function(){
        $("#btnAddAddress").click(function(){
            $("#AddressesWraper").append("#addressInfo").html();
            refreshAddressNames();
        });
    });
    function refreshAddressNames(){
        /*Here you should name your addresses like this:
          name="AddressViewModel.Addresses[0].City"
          name="AddressViewModel.Addresses[0].Street"
          name="AddressViewModel.Addresses[1].City"
          name="AddressViewModel.Addresses[1].Street"
          ................................[2].City"
                                          [2].Street"

        If you want delete option, you have to mind that too and reorder the collection propely*/
    }
</script>