4

我一直在使用 AngularJS + Asp.net Web API 开发一个示例单页 Web 应用程序。我一直被困在无法帮助自己的地方，我尝试过谷歌搜索但没有任何成功。

我的情况如下。

我有两个实体 1）汽车和 2）经销商。我有一个链接表 Car_Dealer。根据我的示例场景，可以在多个经销商处出售特定的汽车。所以我在服务器端的模型如下所示。

汽车模型

namespace HelloWebAPI.Models
{
    using System;
    using System.Collections.Generic;

    public partial class Car
    {
        public Car()
        {
            this.Car_Dealer = new HashSet<Car_Dealer>();
        }

        public int CarId { get; set; }
        public string CarName { get; set; }
        public string CarDetails { get; set; }

        public virtual ICollection<Car_Dealer> Car_Dealer { get; set; }
    }
}

经销商模式

namespace HelloWebAPI.Models
{
    using System;
    using System.Collections.Generic;

    public partial class Dealer
    {
        public Dealer()
        {
            this.Car_Dealer = new HashSet<Car_Dealer>();
        }

        public int DealerId { get; set; }
        public string DealerName { get; set; }
        public string DealerLocation { get; set; }

        public virtual ICollection<Car_Dealer> Car_Dealer { get; set; }
    }
}

汽车经销商模型

namespace HelloWebAPI.Models
{
    using System;
    using System.Collections.Generic;

    public partial class Car_Dealer
    {
        public int Car_DealerId { get; set; }
        public int CarId { get; set; }
        public int DealerId { get; set; }

        public virtual Car Car { get; set; }
        public virtual Dealer Dealer { get; set; }
    }
}

我的服务器端控制器POST方法如下。

汽车控制器.CS

public void Post(Car NewCar)
{
    //to save the car data in the database.
    Car NewCarObj = new Car();
    NewCarObj.CarName = NewCar.CarName;
    NewCarObj.CarDetails = NewCar.CarDetails;
    objEntities.Cars.Add(NewCarObj);

    foreach (Car_Dealer dealer in NewCar.Car_Dealer)
    {
        dealer.CarId = NewCarObj.CarId;
        dealer.DealerId = NewCarObj.DealerId;
        objEntities.Car_Dealers.Add(dealer);
        objEntities.SaveChanges();
    }
}

文件中的代码App.js如下。

应用程序.JS

var CreateCarCtrl = function ($scope, $location, Car, Dealer) {
    $scope.items = Dealer.query({ q: $scope.query });
    $scope.save = function () {
        Car.save($scope.item);
        $location.path('/CarListingScreen');
    };
};

这是我的模板文件中的一大段代码AddCar.HTML

添加汽车.HTML

<tr>
    <td>
        <label class="control-label" for="DealerName">Add Dealer</label>
    </td>
    <td>
        <ul>
            <li>
                <select ng-model="item.DealerName">
                    <option ng-repeat="item in items">{{item.DealerName}}</option>
                </select>
                [<a href ng-click="items.splice($index, 1)">Remove</a>]
            </li>
            <li>[<a href ng-click="items.push({})">Add More</a>]
            </li>
        </ul>
    </td>
</tr>

正如我们在模板文件中看到的那样，我正在尝试通过两种方式绑定在下拉列表中呈现经销商列表，因为我也使用相同的模板进行编辑。

希望你有这个场景。

现在以下是我正在寻找解决方案的问题

  1. 我应该{{item.DealerName}}用其他东西替换，这样我就可以在服务器上取回这些数据。应该更换什么？

  2. 删除或添加更多功能都不起作用。我怎样才能让它发挥作用？

  3. 如何在编辑记录时加载数据？我的意思是让经销商填写下拉列表并创建相应的下拉列表数量来处理经销商？

请注意，我可以添加多个经销商，因此也应在模板中处理。

编辑

我的表格如下所示。

邮编：18359975

正如我们在屏幕截图中看到的，用户可以为特定汽车添加多个经销商，也可以删除添加的项目。

  • 如何绑定经销商的下拉列表，因为它<Collection>是汽车经销商？

  • 如何在单击添加更多按钮并在服务器端获取此值时动态呈现下拉列表？

提前非常感谢。

4

1 回答 1

2

您的代码中仍然缺少基本部分，因此我无法回答所有问题。但是让我试一试

我应该用其他东西替换 {{item.DealerName}}，这样我就可以在服务器上取回该数据。应该更换什么？

用于此的 ng-model 应该是item.DealerId. 当您发布完整的汽车模型时，它不需要完整的经销商对象，​​只需 Id 就足够了。在服务器上，您应该在保存汽车之前根据您的关联获取经销商数据。

删除或添加更多功能都不起作用。我怎样才能让它发挥作用？

我可以告诉删除不起作用，因为删除按钮在外部ng-repeat并且$index在外部不可用，假设您通过将删除按钮放在每个经销商上来尝试删除经销商。尝试

<select ng-model="item.DealerName">
                    <option ng-repeat="item in items">{{item.DealerName}}</option>
                    [<a href ng-click="items.splice($index, 1)">Remove</a>]
                </select>

对于第三点

如何在编辑记录时加载数据？我的意思是让经销商填写下拉列表并创建相应的下拉列表数量来处理经销商？

客户端应该有一个模型用于经销商列表，您可以预先定义或从服务器获取它。如果汽车有多个经销商Car.dealers，请执行 ng-repeat 来渲染它们

<div ng-repeat='dealer in Car.dealers'>
    <select ng-model='dealer.id'ng-options='d.name for d in allDealers'> 
</div>
于 2013-08-21T14:35:30.907 回答