ASP.NET MVC在一个视图中创建与相关对象的对象 [英] ASP.NET MVC Creating an object with related object in one view

问题描述

我新的ASP.NET MVC和我想创建一个视图，我可以与相关对象一起创建新的对象。

I'm new to ASP.NET MVC and I want to create a view where I can create a new object along with the related objects.

作为例子：我有以下的类人：

As example: I have the following class 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; }
}

欲实现的是具有图，其中用户可以对人以及该用户的任何数量的地址输入数据是什么。

What I want to achieve is having a view where the user can type in the data for the person and any number of addresses for this user.

我的第一个（简单）试图简单地提供它被映射到控制器方法的操作链接。此方法需要一个Person对象作为参数，增加了一个地址对象来收集地址，并返回一个新创建的视图（也许不是很好，但这个工作）。但是，当我尝试添加第二个地址，我注意到，地址的人的集合再次空的。

My first (simple) attempt was simply providing an action link which is mapped to a controller method. This method takes a Person object as a parameter, adds a Address object to the collection Addresses and returns a new create view (maybe not nice, but this worked). But when I tried to add a second address I noticed that the Person's collection of addresses was empty again.

任何sugesstions /对于这类问题的最佳做法？

Any sugesstions/best practices for this kind of problem?

谢谢！

推荐答案

我建议你采取下列措施：

I would suggest you the following approach:

1，创建一个视图模型：

1.Create a view models:

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;}
}

然后在您的视图中您可以使用隐藏EditorTempalete为 AddressViewModelTemplate ，并与一些按一下按钮的JavaScript表现出来。当然，你将不得不调整所产生的集合的名字绑定。

Then in your view you can use hidden EditorTempalete for the AddressViewModelTemplate , and show it with javascript on some button click. Of course, you will have to adjust the names of the generated collection for the binding.

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

Sample Editor Template. You can choose better structure.

    @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>

这篇关于ASP.NET MVC在一个视图中创建与相关对象的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！