このトピックでは、igCombo コントロールを基本的な ASP.NET MVC のシナリオで使用する方法を紹介します。
ビューでコンボをインスタンス化するために Ignite UI for MVC Combo が使用されます。また、従業員のコレクションのリモート要求を処理し、リモート フィルタリング パラメーターを処理するために ComboDataSourceAction 属性が使用されます。最後に、フォームで モデルのフィールドを更新するために使用されるコンボを確認できます。
このトピックは、以下のセクションで構成されます。
以下のスクリーンショットは最終結果のプレビューです。
手順を完了するには、ASP.NET MVC プロジェクトの他に次が必要になります。
このトピックでは、モデル、ビュー、コントローラーの作成について順を追って説明します。
Order クラスの作成Order クラスの追加
Order クラスを Models フォルダーに追加します。
クラス メンバーの作成
Order.cs ファイルを開き、以下のメンバーをクラスに追加します。
C# の場合:
public class Order
{
public int OrderID { get; set; }
public string CustomerID { get; set; }
public Nullable<int> EmployeeID { get; set; }
public Nullable<System.DateTime> OrderDate { get; set; }
public Nullable<System.DateTime> RequiredDate { get; set; }
public Nullable<System.DateTime> ShippedDate { get; set; }
public Nullable<int> ShipVia { get; set; }
public Nullable<decimal> Freight { get; set; }
public string ShipName { get; set; }
public string ShipAddress { get; set; }
public string ShipCity { get; set; }
public string ShipRegion { get; set; }
public string ShipPostalCode { get; set; }
public string ShipCountry { get; set; }
public string ContactName { get; set; }
public string EmployeeName { get; set; }
public int ShipperID { get; set; }
public string ShipperName { get; set; }
public decimal TotalPrice { get; set; }
public int TotalItems { get; set; }
}
ComboController の作成
ASP.NET MVC アプリケーションの Controllers フォルダーに、ComboController.cs という名前で新しいコントローラーを作成します。
アクション メソッドの作成
Action メソッドをコントローラーに追加して Order を作成します。
C# の場合:
public class ComboController : Controller
{
//
// GET: /Combo/
[ComboDataSourceAction]
[ActionName("employee-combo-data")]
public ActionResult ComboData()
{
IEnumerable<Employee> employees = RepositoryFactory.GetEmployeeRepository().Get();
return View(employees);
}
[ActionName("aspnet-mvc-helper")]
public ActionResult UsingAspNetMvcHelper()
{
Order order = RepositoryFactory.GetOrderRepository().Get().First();
return View("aspnet-mvc-helper", order);
}
[HttpPost]
[ActionName("aspnet-mvc-helper")]
public ActionResult UsingAspNetMvcHelper(Order updatedOrder)
{
ItemRepository<Order> orderRepository = RepositoryFactory.GetOrderRepository();
ItemRepository<Employee> employeeRepository = RepositoryFactory.GetEmployeeRepository();
Order existingOrder = orderRepository.Get(o => o.OrderID == updatedOrder.OrderID);
Employee newEmployee = employeeRepository.Get(e => e.ID == updatedOrder.EmployeeID);
if (existingOrder != null && newEmployee != null)
{
existingOrder.EmployeeID = newEmployee.ID;
existingOrder.EmployeeName = newEmployee.Name;
orderRepository.Update(existingOrder, o => o.OrderID == existingOrder.OrderID);
orderRepository.Save();
}
return View("aspnet-mvc-helper", existingOrder);
}
}
ビューの作成
厳密に型指定されたビューを作成し、Order クラスをモデルとして使用します。
ASPX の場合:
@using Infragistics.Web.Mvc
@using IgniteUI.SamplesBrowser.Models
@model IgniteUI.SamplesBrowser.Models.Northwind.Order
JavaScript と CSS の参照の追加
この例では、ASP.NET MVC アプリケーションでローカルで参照される、結合された JavaScript および CSS ファイルを使用します。
ASPX の場合:
<link href="/Content/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/structure/infragistics.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="/Scripts/js/infragistics.core.js" type="text/javascript"></script>
<script src="/Scripts/js/infragistics.lob.js" type="text/javascript"></script>
...
<style>
.sample-ui div {
margin-bottom: 1em;
}
.sample-ui h4 {
margin-bottom: .5em;
}
.sample-ui #submitBtn {
width: 100px;
}
</style>
Order オブジェクト用のフォームを作成します。
ASPX の場合:
@using (Html.BeginForm())
{
<div class="sample-ui">
@Html.HiddenFor(item => item.OrderID)
<div>
<h4>Current Employee:</h4>
@Html.DisplayFor(item => item.EmployeeName)
</div>
<div>
<h4>Choose New Employee</h4>
@(Html.Infragistics().ComboFor(item => item.EmployeeID)
.Width("270px")
.DataSource(Url.Action("employee-combo-data"))
.ValueKey("ID")
.TextKey("Name")
.DataBind()
.Render()
)
</div>
<input id="submitBtn" type="submit" value="Update" />
</div>
}
サンプルを実行してドロップダウンから項目を選択します。次に更新ボタンをクリックして現在の従業員の値を更新します。
igCombo コントロールでの各種データ バインド方式について説明し、データ バインディングに関するその他の詳細情報を示します。オンラインで表示: GitHub