Shulou(Shulou.com)06/01 Report--

Introduction

In this article, we will learn how to create a gridview in ASP.NET MVC, just like gridview in an ASP.NET Web form. There are many third-party libraries available on both the server side and the client side, which provide all the necessary functions, such as searching, sorting, and paging in Web tables. Whether these functions are included depends on the special needs of the application, such as the need to provide search or other functions on the client and server side.

Available libraries

Here are some available libraries and plug-ins:

Grid.Mvc

MVCGrid.NET

PagedList.MVC

JQuery.Grid

JQuery Grid for ASP.NET MVC

JQuery DataTables

Use the jQuery data sheet

Both libraries and plug-ins have their own advantages and disadvantages, among which the jQuery data table is a good choice. It has a high degree of flexibility, supporting paging, instant search, and multi-column sorting; it also supports almost all data sources that can be bound.

For example:

DOM

JavaScript's

Ajax

Server-side processing

One of my favorite options is that jQuery datasheets not only support client-side search, paging, sorting, and so on, but also provide an option that can be processed on the server side. For example, one scenario is that paging on the client is not a good choice because there is too much data in the database. There are millions of rows of data in the table, and if you bind it with client-side paging, the page will be slow to respond due to a large amount of data row processing and HTML rendering.

Next, let's take a look at an example of using client processing. We will implement a worksheet with search, sorting, and paging capabilities, as we can see in the following figure:

First, we create the database and tables that will be used, open SQL Management Studio, and run the following script:

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

The complete SQL script is included with the source code, which you can use to create databases and forms using the data in the sample.

Now, create a new ASP.NET MVC 5 Web application. Open Visual Studio 2015 and click File > New > Project.

Jump to Web from the dialog box, select the ASP.NET Web application project, and click OK.

Select MVC in the template. If you have written a unit test for the application, please check it first and click OK.

Our projects are all created with basic functions. Now let's start creating a database context class that will be used by the Data Access entity framework.

First, we need to create a model for the Asset table, which we will use to recover the data through ORM.

In the model folder, create a new class named Asset:

Using System.ComponentModel.DataAnnotations;namespace GridExampleMVC.Models {public class Asset {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 (RoomNo)")] 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;}

Now jump from solution Explorer to the model folder and open the IdentityModels.cs file. We will add an attribute to the Asset table in the database context, which will become the entity framework representation of the Asset table and use it to create the script. Add a new property to the ApplicationDbContext class:

Public class ApplicationDbContext: IdentityDbContext {public ApplicationDbContext (): base ("DefaultConnection", throwIfV1Schema: false) {} public DbSet Assets {get; set;} public static ApplicationDbContext Create () {return new ApplicationDbContext ();}}

These are the default entity framework settings for ASP.NET identity 2.0, which we extend by adding a new DbSet to the Asset table.

Now, add an empty controller named AssetController in the controllers folder, which will be used for all Asset-related work.

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

Now we need to install the JQuery DataTables used to create the table, go to Tools > > NuGet Package Manager > > Manage Nuget Packages for Solution, and click on it.

The installation package manager is open by default, and it will appear as an installed nugget package in your solution, click the browse button, then search for the JQuery DataTables package, select it, and check the project solution with JQuery DataTables installed. In our case, we will install it in GridExampleMVC web for each requirement, and then click the install button.

Visual Studio will prompt you if you want to modify the solution. You need to click Ok to continue installing the JQuery DataTables package.

After the nugget package is installed successfully, we need to introduce the necessary JS and CSS for jQuery DataTables in the view. To do this, we need to register jQuery DataTables. Open the BundleConfig.cs file located in the App_Start folder and add the following code at the end of the CSS and JS files:

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"))

After adding scripts and CSS to the datasheet, we need to add them to the overall layout. By default, _ Layout.cshtml is in Views > > Shared, and _ ViewStart.cshtml is here by default.

Before writing the controller code, we need to configure the connection string for the entity framework to connect to the database when manipulating the database. Therefore, our connection string should be assigned to a valid data source so that our application will not be interrupted at run time.

To do this, open web.config and provide the connection string for the database. In the configuration file, you will find the connection string in the configuration node below. You need to modify the connection string in the node according to your system.

Now, add the properties of the database context to the controller so that we can execute the request in the database.

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

We will use this property to query the database in any desired controller behavior.

In the retrieval behavior, we will simply take all the rows in the table and pass them to view:

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

Our complete controller class code looks like this:

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 ());}

Now come to the view section, where we will write code on how to render in HTML. Create a view with an empty template (no model) for the retrieval behavior, and then add the following code to it:

@ model IEnumerable

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

Now run the application and you will look at the tables with available sorting, searching, and filtering functions. But now there is another problem, that is, this is handled on the client side, when the behavior is called, all the data will be rendered by the view, which will cause the page performance to slow down or the page load time to increase when a large amount of data appears.

In the next article, we will learn how to make pages render better by using server-side paging, sorting, and filtering. This is a better approach when there is a large amount of data.

Through the introduction of this article, I hope you can master the method of creating GridView in ASP.NET MVC 5. Table control is a control often used in project development, among which the FlexGrid table control is famous for its performance, which is a lightweight high-performance table control that loads and scrolls more than 10 times faster than its competitors and can provide a rich feature set without expanding the core controls.

Article source: by Ehsan Sajjad

Original link: http://www.codeproject.com/Articles/1114208/Beginners-Guide-for-Creating-GridView-in-ASP-NET-M

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.