THEMES
THEME SETTINGS

Card View Overview

Ship Name:Vins et alcools Chevalier
Ship City:Reims
Ship Postal Code:51100
Ship Country:France
Ship Name:Toms Spezialitäten
Ship City:Münster
Ship Postal Code:44087
Ship Country:Germany
Ship Name:Hanari Carnes
Ship City:Rio de Janeiro
Ship Postal Code:05454-876
Ship Country:Brazil
Ship Name:Victuailles en stock
Ship City:Lyon
Ship Postal Code:69004
Ship Country:France
Page 1 of 208 (830 items)Prev1234207208Next
About the Card View

The DevExpress ASP.NET MVC Card View extension is a powerful editing and data shaping component that allows end-users to manage information and display it in a card view (set of cards).

Follow the three simple steps below to add a DevExpress CardView extension and bind it to your data.

1. Model (the “M” in MVC). First, you will need a Model object for the DevExpress ASP.NET MVC Card View to bind to. Create a new data model using the Entity Framework wizard or LinqToSQL ORM from Visual Studio. However, you can use any model that supports the IEnumerable or Iqueryable interface.

2. View (the “V” in MVC). Next, declare the ASP.NET MVC Card View extension inside of the View. Specifically, we’ll create a Partial View because the DevExpress CardView extension provides AJAX callbacks by default to give your end-users a better experience without updating the entire page. However, because ASP.NET MVC does not support callbacks, declare the CardView extension inside of the Partial View and define how the callbacks will be routed back to your controller using the CallbackRouteValues property:

Partial View code:

@Html.DevExpress().CardView(settings => {
    settings.Name = "CardView";
    settings.CallbackRouteValues = new { Controller = "Overview", Action = "OverviewPartial" };
    settings.Width = Unit.Pixel(600);
    settings.Columns.Add("ShipName");
    settings.Columns.Add("ShipCity");
    settings.Columns.Add("ShipPostalCode");
    settings.Columns.Add("ShipCountry");

    settings.SettingsPager.NumericButtonCount = 6;
    settings.SettingsPager.SettingsTableLayout.ColumnCount = 2;
    settings.SettingsPager.SettingsTableLayout.RowsPerPage = 2;
}).Bind(Model).GetHtml()


3. Controller (the “C” in MVC). Finally, the controller is where you will need to define the action methods that handle CardView’s callbacks. The “OverviewPartial” action method below handles the callbacks. While the GetOrders action method gets the data from the model to pass to the View. As you can see, the native DevExpress CardView extension follows the ASP.NET MVC pattern while providing powerful features for your end-users.

Controller code:

public class HomeController: Controller {
  public ActionResult Index() {
    return View("Overview", GetOrders());
  }
  public ActionResult OverviewPartial() {
    return PartialView("OverviewPartial", GetOrders());
  }
  public IEnumerable GetOrders() {
    NorthwindDataContext DB = new NorthwindDataContextExt();
    return from order in DB.Orders select order;
  }
}

Key Features
  • Data Sorting
    CardView makes it easy for end-users to sort data against an unlimited number of columns. When necessary, you can disable runtime sort options and handle all sort operations in code.
  • Data Editing Support
    CardView provides functionality that checks the data input by end-users to ensure that data is error-free. Data entered by an end-user can be validated on the client or server before it is posted to a data source.
  • Data Filtering
    CardView provides multiple data filtering options so you can address customer needs more effectively using the data search panel, header filter or filter editor control.
  • Endless Paging
    CardView supports endless paging mode, which allows control cards to load on demand.
Version: v2017 vol 1.5
Copyright © 2006-2017 Developer Express Inc
Your Next Great MVC App Starts Here

Get started today and download your 30-day trial of DevExpress MVC Extensions (includes 30 days of free technical support).

All demos ship with full source code and are included in the DevExpress MVC distribution. Refer to the Demos and Sample Applications topic to learn more.

DevExpress MVC Extensions ship as part of DevExpress Universal, DXperience and ASP.NET Subscriptions and are backed by a 60 day unconditional money-back guarantee.
To learn more and obtain pricing information, visit the Compare Features and Pricing webpage. For immediate assistance, contact us by Email at info@devexpress.com or by phone at +1 (818) 844-3383 between 7:30am and 4:30pm Pacific Time.