製品版のみの機能
スパークライン - コレクションのバインド
このサンプルでは、ASP.NET MVC ヘルパーを使用して igSparkline を描画する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
ヘルパーはサーバーのオブジェクトのコレクションにバインドし、コレクションを JSON オブジェクトにシリアル化し、必要な igSparkline HTML および JavaScript を描画します。
コード ビュー
クリップボードへコピー
@using Infragistics.Web.Mvc
@model IQueryable<IgniteUI.SamplesBrowser.Models.Northwind.Invoice>
<!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.dv.js"></script>
</head>
<body>
@(Html.Infragistics().Sparkline<IgniteUI.SamplesBrowser.Models.Northwind.Invoice>(Model)
.ID("sparkline")
.Height("100px")
.Width("100%")
.ValueMemberPath("ExtendedPrice")
.DataBind()
.Render()
)
</body>
</html>
using IgniteUI.SamplesBrowser.Models.Repositories;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace IgniteUI.SamplesBrowser.Controllers
{
public class SparklineController : Controller
{
//
// GET: /Sparkline/
[ActionName("bind-collection")]
public ActionResult BindCollection()
{
var invoices = RepositoryFactory.GetInvoiceRepository().Get().OrderBy(i => i.OrderDate).Take(80);
return View("bind-collection", invoices.AsQueryable());
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace IgniteUI.SamplesBrowser.Models.Northwind
{
public class Invoice
{
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 CustomerID { get; set; }
public string CustomerName { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string Region { get; set; }
public string PostalCode { get; set; }
public string Country { get; set; }
public string Salesperson { get; set; }
public int OrderID { get; set; }
public Nullable<System.DateTime> OrderDate { get; set; }
public Nullable<System.DateTime> RequiredDate { get; set; }
public Nullable<System.DateTime> ShippedDate { get; set; }
public string ShipperName { get; set; }
public int ProductID { get; set; }
public string ProductName { get; set; }
public decimal UnitPrice { get; set; }
public short Quantity { get; set; }
public float Discount { get; set; }
public Nullable<decimal> ExtendedPrice { get; set; }
public Nullable<decimal> Freight { get; set; }
}
}