AngularJS + Asp.net Web API を使用して、サンプルのシングル ページ Web アプリケーションを開発しています。私は自分自身を助けることができないある時点で立ち往生しており、グーグルを試してみましたが成功しませんでした。
私のシナリオは次のとおりです。
私は2つのエンティティ1)車と2)ディーラーを持っています。リンク テーブル Car_Dealer が 1 つあります。サンプル シナリオによると、特定の車を複数のディーラーで販売できます。したがって、サーバー側の私のモデルは次のようになります。
車のモデル
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
ファイル内のコードは次のとおりです。
App.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
AddCar.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>
テンプレート ファイルでわかるように、編集目的でも同じテンプレートを使用しているため、ドロップ ダウン リストにディーラーのリストを双方向バインディングでレンダリングしようとしています。
うまくいけば、あなたはシナリオを手に入れました。
以下は、私が解決策を探している質問です
{{item.DealerName}}
そのデータをサーバーに戻すことができるように、別のものに置き換える必要があります。何を交換する必要がありますか?削除機能も追加機能も機能していません。どうすれば機能させることができますか?
レコードの編集中にデータをロードするにはどうすればよいですか? ディーラーをドロップダウンに記入し、ディーラーを処理するためにそれに応じてドロップダウンの数を作成することを意味しますか?
ここでは、複数のディーラーを追加できるため、テンプレートでも処理する必要があることに注意してください。
編集
私のフォームは以下のようになります。
スクリーン ショットでわかるように、ユーザーは特定の車に複数のディーラーを追加でき、追加したアイテムを削除することもできます。
<Collection>
車のディーラーのようにディーラーのドロップダウンリストをバインドする方法は?[さらに追加]ボタンをクリックしてドロップダウンリストを動的にレンダリングし、サーバー側でこの値を取得するにはどうすればよいですか?
よろしくお願いします。