【初心者ガイド】ASP.NET MVC 5でGridViewを作成

10856 ワード

GridView AS.NET MVC5 コントロールテクノロジ

紹介する

この文章では、ASPでどのように勉強するかを学びます.NET MVCではASPのようにgridviewを作成します.NET Webフォームのgridviewと同じです.サーバ側とクライアントには、Webテーブルの検索、ソート、ページングなど、必要なすべての機能を提供するサードパーティ製のライブラリがたくさんあります.これらの機能が含まれているかどうかは、クライアント側やサーバ側で検索や他の機能を提供する必要など、アプリケーションの特別なニーズに依存します.

使用可能なライブラリ

以下に、使用可能なライブラリとプラグインを示します.

Grid.Mvc

MVCGrid.NET

PagedList.MVC

JQuery.Grid

JQuery Grid for ASP.NET MVC

JQuery DataTables

jQueryデータテーブルの使用

以上のライブラリとプラグインにはメリットとデメリットがありますが、jQueryデータテーブルは良い選択です.高度な柔軟性を持ち、ページング、インスタント検索、マルチカラムソートをサポートします.バインド可能なほとんどのデータソースもサポートされています.
例:

DOM

JavaScriptの

Ajax

Server-side processing

私が一番好きなオプションの一つは、jQueryデータテーブルがクライアント検索、ページング、ソートなどをサポートするだけでなく、サーバ側で処理できるオプションも提供していることです.たとえば、データベースにデータが多すぎるため、クライアントでのページングは良い選択ではありません.テーブルには百万行のデータがあり、クライアントのページング機能でバインドすると、ページは大量のデータ行処理とHTMLレンダリングで反応が鈍くなります.
次に、クライアント処理を利用した例を見てみましょう.次の図に示すように、検索、ソート、ページング機能を備えたワークシートを実現します.
まず、使用するデータベースとテーブルを作成し、SQL Management Studioを開き、次のスクリプトを実行します.

CREATE DATABASE [GridExampleMVC] 
 GO 
 CREATE TABLE [dbo].[Assets] ( 
     [AssetID]                   UNIQUEIDENTIFIER NOT NULL, 
     [Barcode]                   NVARCHAR (MAX)   NULL, 
     [SerialNumber]              NVARCHAR (MAX)   NULL, 
     [FacilitySite]              NVARCHAR (MAX)   NULL, 
     [PMGuide]                   NVARCHAR (MAX)   NULL, 
     [AstID]                     NVARCHAR (MAX)   NOT NULL, 
     [ChildAsset]                NVARCHAR (MAX)   NULL, 
     [GeneralAssetDescription]   NVARCHAR (MAX)   NULL, 
     [SecondaryAssetDescription] NVARCHAR (MAX)   NULL, 
     [Quantity]                  INT              NOT NULL, 
     [Manufacturer]              NVARCHAR (MAX)   NULL, 
     [ModelNumber]               NVARCHAR (MAX)   NULL, 
     [Building]                  NVARCHAR (MAX)   NULL, 
     [Floor]                     NVARCHAR (MAX)   NULL, 
     [Corridor]                  NVARCHAR (MAX)   NULL, 
     [RoomNo]                    NVARCHAR (MAX)   NULL, 
     [MERNo]                     NVARCHAR (MAX)   NULL, 
     [EquipSystem]               NVARCHAR (MAX)   NULL, 
     [Comments]                  NVARCHAR (MAX)   NULL, 
     [Issued]                    BIT              NOT NULL, 
     CONSTRAINT [PK_dbo.Assets] PRIMARY KEY CLUSTERED ([AssetID] ASC) 
 ) 
 GO

ソースコードにはSQLスクリプトが完全に添付されており、サンプルのデータを使用してデータベースとフォームを作成できます.
新しいASPを作成します.NET MVC 5 Webアプリケーション.Visual Studio 2015を開き、ファイル>>新規>>プロジェクトをクリックします.
ダイアログボックスからWebにジャンプする、ASPを選択する.NET Webアプリケーションプロジェクト、「OK」をクリックします.
テンプレートでMVCを選択し、アプリケーションのユニットテストを作成したら、まずチェックしてOKをクリックしてください.
私たちのプロジェクトは基本的な機能で作成されています.データベースコンテキストクラスの作成を開始します.このクラスはData Accessエンティティフレームワークで使用されます.
まず、Assetテーブルのモデルを作成する必要があります.このモデルを使用してORMでデータを復元します.
モデルフォルダで、Assetという新しいクラスを作成します.

using System.ComponentModel.DataAnnotations;namespace GridExampleMVC.Models
{    public class Asset
    {        public System.Guid AssetID { get; set; }
        [Display(Name = "Barcode")]        public string Barcode { get; set; }
        [Display(Name = "Serial-Number")]        public string SerialNumber { get; set; }
        [Display(Name = "Facility-Site")]        public string FacilitySite { get; set; }
        [Display(Name = "PM-Guide-ID")]        public string PMGuide { get; set; }
        [Required]
        [Display(Name = "Asset-ID")]        public string AstID { get; set; }
        [Display(Name = "Child-Asset")]        public string ChildAsset { get; set; }
        [Display(Name = "General-Asset-Description")]        public string GeneralAssetDescription { get; set; }
        [Display(Name = "Secondary-Asset-Description")]        public string SecondaryAssetDescription { get; set; }        public int Quantity { get; set; }
        [Display(Name = "Manufacturer")]        public string Manufacturer { get; set; }
        [Display(Name = "Model-Number")]        public string ModelNumber { get; set; }
        [Display(Name = "Main-Location (Building)")]        public string Building { get; set; }
        [Display(Name = "Sub-Location 1 (Floor)")]        public string Floor { get; set; }
        [Display(Name = "Sub-Location 2 (Corridor)")]        public string Corridor { get; set; }
        [Display(Name = "Sub-Location 3 (Room No)")]        public string RoomNo { get; set; }
        [Display(Name = "Sub-Location 4 (MER#)")]        public string MERNo { get; set; }
        [Display(Name = "Sub-Location 5 (Equip/System)")]        public string EquipSystem { get; set; }        public string Comments { get; set; }        public bool Issued { get; set; }
    }
}

ソリューションエクスプローラからモデルフォルダに移動し、IdentityModelsを開きます.csファイル.データベースコンテキストでAssetテーブルに属性を追加します.この属性はAssetテーブルのエンティティフレームワーク表現となり、スクリプトを作成します.ApplicationDbContextクラスに新しい属性を追加するには、次の手順に従います.

public class ApplicationDbContext : IdentityDbContext{    public ApplicationDbContext()
        : base("DefaultConnection", throwIfV1Schema: false)
    {

    }    public DbSet Assets { get; set; }    public static ApplicationDbContext Create()
    {        return new ApplicationDbContext();
    }
}

以上、ASP.NET identity 2.0のデフォルトのエンティティフレームワーク設定は、Assetテーブルに新しいDbSetを追加することで拡張します.
これで、すべてのAsset関連作業に使用される、コントローラフォルダにAssetControllerという空のコントローラが追加されます.

public class AssetController : Controller
    {        // GET: Asset
        public ActionResult Index()
        {            return View();
        }
    }

テーブルを作成するためのJQuery Data Tableをインストールし、Tools>>NuGet Package Manager>>Manage Nuget Packages for Solutionに入り、クリックします.
インストールパッケージマネージャはデフォルトで開き、ソリューションにインストール済みnuggetパッケージとして表示されます.ブラウズボタンをクリックしてJQuery DataTableパッケージを検索し、JQuery DataTableパッケージがインストールされているプロジェクトソリューションを選択して確認します.私たちのケースでは、GridExampleMVCのWebに必要な方法でインストールし、インストールボタンをクリックします.
Visual Studioでは、ソリューションを変更するかどうかを示すメッセージが表示されます.OkをクリックしてJQuery Data Tableパッケージのインストールを続行する必要があります.
nuggetパッケージのインストールに成功した後、jQuery DataTableの必要なJSとCSSをビューに導入する必要があります.そのため、jQuery DataTableを登録する必要があります.Appを開いてください.StartフォルダのBundleConfig.csファイルは、CSSファイルとJSファイルの最後に次のコードを追加します.

bundles.Add(new ScriptBundle("~/bundles/datatables").Include(                        "~/Scripts/DataTables/jquery.dataTables.min.js",                        "~/Scripts/DataTables/dataTables.bootstrap.js"));

bundles.Add(new StyleBundle("~/Content/datatables").Include(          "~/Content/DataTables/css/dataTables.bootstrap.css"));

データテーブルにスクリプトとCSSを追加した後、全体的なレイアウトに追加する必要があります.デフォルトでは、_Layout.cshtmlはViews>>Sharedにあり、ViewStart.cshtmlもデフォルトではここにあります.
コントローラコードを書く前に、データベースを操作するときにデータベースに接続するために、エンティティフレームワークに接続文字列を構成する必要があります.したがって、接続文字列は、実行時に適用が中断されないように有効なデータソースに指定する必要があります.
そのためにwebを開いてください.configは、データベースに接続文字列を提供します.プロファイルでは、次の構成ノードの接続文字列が表示されます.ノードでシステムに基づいて接続文字列を変更する必要があります.

これで、コントローラにデータベースコンテキストのプロパティを追加して、データベースでリクエストを実行できるようにします.

private ApplicationDbContext _dbContext;public ApplicationDbContext DbContext
{    get
    {        return _dbContext ?? HttpContext.GetOwinContext().Get();
    }    private set
    {
        _dbContext = value;
    }
}

このプロパティを使用して、必要なコントローラの動作でデータベースをクエリーします.
検索動作では、テーブル内のすべてのローを簡単に取得し、viewに渡します.

public ActionResult Index()
{    return View(DbContext.Assets.ToList());
}

私たちの完全なcontrollerクラスコードは、このようにしています.

using GridExampleMVC.Models;using System.Linq;using System.Web;using System.Web.Mvc;using Microsoft.AspNet.Identity.Owin;namespace GridExampleMVC.Controllers
{    public class AssetController : Controller
    {        private ApplicationDbContext _dbContext;        public ApplicationDbContext DbContext
        {            get
            {                return _dbContext ?? HttpContext.GetOwinContext().Get();
            }            private set
            {
                _dbContext = value;
            }
        }        public AssetController()
        { 

        }        public AssetController(ApplicationDbContext dbContext)
        {
            _dbContext = dbContext;
        }        // GET: Asset
        public ActionResult Index()
        {            return View(DbContext.Assets.ToList());
        }
    }
}

ここで、ビューセクションに来ます.ビューセクションでは、HTMLでレンダリングするコードを記述します.取得動作の空のテンプレート(モデルなし)のビューを作成し、次のコードを追加します.

@model IEnumerable

    
        
            
                Assets
            
            
                
                    
                        
                            
                            
                            
                            
                            
                            
                        
                    
                    
                        @foreach (var asset in Model)
                        {                            
                                
                                
                                
                                
                                
                                
                            
                        }                    
                Bar Code Manufacturer Model Number Building Room No Quantity
@asset.Barcode @asset.Manufacturer @asset.ModelNumber @asset.Building @asset.RoomNo @asset.Quantity
            
        
    
@section Scripts
{   
 
     $(document).ready(function () {
         $('#assets-data-table').DataTable();
     });    
 }

Bar Code	Manufacturer	Model Number	Building	Room No	Quantity
@asset.Barcode	@asset.Manufacturer	@asset.ModelNumber	@asset.Building	@asset.RoomNo	@asset.Quantity

このアプリケーションを実行すると、使用可能なソート、検索、フィルタ機能を持つテーブルが表示されます.しかし、クライアントで処理され、動作が呼び出されると、すべてのデータがビューでレンダリングされ、大量のデータが表示されると、ページのパフォーマンスが遅くなり、ページのロード時間が長くなるという問題があります.
次の記事では、サーバ側のページング、ソート、フィルタリングを使用してページをよりよく表示する方法について学習します.これは、大量のデータを持つ場合により良い方法です.

出典:by Ehsan Sajjad
テキストリンク:http://www.codeproject.com/Articles/1114208/Beginners-Guide-for-Creating-GridView-in-ASP-NET-M

点線効果水平CSSメニュー

asp.Netcoreはルーティング接続を生成し、パラメータの取得とモデルバインドを要求する方法