Card View

• Jun 21, 2024
• 3 minutes to read

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.

Run Demo: Card View

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.

Declaration

Note

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.

  Razor (Index)

  @Html.Partial("CardViewPartial", Model)
  

  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.

  Note

  Known Limitations The Partial View should contain only the extension’s code.

  Razor (GridViewPartial)

  @Html.DevExpress().CardView(settings => {
      settings.Name = "CardView";
      settings.CallbackRouteValues = new { Controller = "Home", Action = "CardViewPartial" };
      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()
  

• 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.

  C# (HomeController)

  public partial class HomeController : Controller {
  
      public ActionResult Index() {
          return View(GetOrders());
      }
  
      public ActionResult OverviewPartial() {
          return PartialView("CardViewPartial", GetOrders());
      }
  
      public static IEnumerable GetOrders() {
          NorthwindContext DB = new NorthwindContext();
          return DB.Orders.ToList();
      }
  
  }
  

  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.

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.