製品版のみの機能
コンボ ボックス - ASP.NET MVC ヘルパー
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、ASP.NET MVC の基本的なシナリオでコンボを使用する方法を紹介します。ビューでコンボをインスタンス化するために ASP.NET MVC ヘルパーが使用されます。
また、従業員のコレクションのリモート要求を処理し、リモート フィルタリング パラメーターを処理するために ComboDataSourceAction 属性が使用されます。
モデルのフィールドを更新するためにコンボの使用方法を紹介します。
コード ビュー
クリップボードへコピー
@using Infragistics.Web.Mvc
@using IgniteUI.SamplesBrowser.Models
@model IgniteUI.SamplesBrowser.Models.Northwind.Order
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
<style>
.sample-ui div {
margin-bottom: 1em;
}
.sample-ui h4 {
margin-bottom: .5em;
}
.sample-ui #submitBtn {
width: 100px;
}
</style>
@using (Html.BeginForm())
{
<div class="sample-ui">
@Html.HiddenFor(item => item.OrderID)
<div>
<h4>現在の従業員:</h4>
@Html.DisplayFor(item => item.EmployeeName)
</div>
<div>
<h4>新しい従業員の選択</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="更新" />
</div>
}
</body>
</html>
using IgniteUI.SamplesBrowser.Models.Repositories;
using Infragistics.Web.Mvc;
using System.Web.Mvc;
using System.Linq;
using IgniteUI.SamplesBrowser.Models.Northwind;
using System.Collections.Generic;
namespace IgniteUI.SamplesBrowser.Controllers
{
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);
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace IgniteUI.SamplesBrowser.Models.Northwind
{
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; }
}
}