Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Expand]Grid View
  [Collapse]Card View
    Overview - CardView
    Main Features - Card View
   [Expand]Concepts
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]HTML Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Navigation and Layout Extensions
  [Expand]File Management
  [Expand]Multi-Use Site Extensions
  [Expand]Charts
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Tree List
  [Expand]Data Editor Extensions
  [Expand]Report Extensions
  [Expand]SpellChecker
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Overview - CardView

The DevExpress ASP.NET MVC CardView is a data bound server extension with an advanced client-side API. CardView is designed to edit tabular information represented in cards.

Expanded Implementation Details

The CardView is realized by the CardViewExtension class. Its instance can be accessed using the ExtensionsFactory.CardView helper method, which is used to add a CardView extension to a view. This method's parameter provides access to the CardView's settings implemented by the CardViewSettings class, allowing you to fully customize the extension.

The CardView's client counterpart is represented by the MVCxClientCardView object.

Expanded Declaration

Note

Project requirements.

Before you start, make sure your project is prepared for DevExpress ASP.NET MVC Extensions. See this topic to learn how to prepare your project: Integration into an ASP.NET MVC Project.

  • Model

    The data model class is used to represent data records in a database. Each instance of a data model class will correspond to a row in a database table, and each property of the data model class will map to a column in a database table.

    The CardView extension can be bound to an IQueriable or IEnumerable collection of model class instances. To learn more about various approaches of binding the CardView to data, refer to the Binding to Data documentation section.

  • View

    The DevExpress CardView updates itself (when paging, sorting, grouping, etc.) via AJAX callbacks to the server without the updating and reloading the entire page. This mechanism requires declaring the CardView extension in the Partial View. So, in the View code, place a link to the PartialView that will contain the CardView declaration.

    View code - "Index" (Razor):

    Now, you should declare the CardView code in the PartialView. To do this, invoke the ExtensionsFactory.CardView helper method. This method returns the CardView extension that is implemented by the CardViewExtension class.

    To configure the CardView extension, pass the CardViewSettings object to the ExtensionsFactory.CardView helper method as a parameter. The CardViewSettings object contains all the CardView extension settings. It is necessary to define how the callbacks will be routed back to your controller using the GridSettingsBase.CallbackRouteValues property.

    PartialView code - "GridViewPartial" (Razor):

  • Controller

    In the controller code, define the action method that will handle the CardView's callbacks. The CardViewPartial action method below handles the extension's callbacks. This method should return the PartialView with the CardView extension, and pass a model to the View.

    Controller ("Home"):

    In this example, the GetOrders method returns a collection of items that will be displayed in a CardView. The controller passes this collection to the View as a Model. In the View code, the CardView is bound to the Model object using the CardViewExtension.Bind method.

The code result is demonstrated in the image below.

Expanded Client-Side API

In addition to the comprehensive server-side object model, the MVC CardView extension offers an advanced client-side API.

The CardView's client counterpart is represented by the MVCxClientCardView object. An extension client object can be accessed on the client using the extension name defined using the SettingsBase.Name property. The CardView's client events can be accessed using the CardViewSettings.ClientSideEvents property.

Individual CardView columns are exposed on the client side as JS objects of the ASPxClientCardViewColumn class.

Expanded See Also

How would you rate this topic?​​​​​​​