THEMES
THEME SETTINGS

Image and Data Navigation - Data View Overview

FirstPrevPage 1 of 10NextLast
FirstPrevPage 1 of 10NextLast
About the Data View

The DevExpress ASP.NET MVC DataView extension displays data using a highly customizable card or list-based UI metaphor.

Follow the three simple steps below to add a DevExpress DataView extension and bind it to your data. It's easy as “M”, “V”, and “C”.

1. Model (the "M" in MVC). First, you will need a Model object for the DevExpress DataView to bind to. Create a new data model using the Entity Framework wizard or LinqToSQL ORM from Visual Studio. You can also use any model that supports the IEnumerable interface.

2. View (the "V" in MVC). Next, you will declare the DataView extension inside of the View. Specifically, you will create a Partial View because the DevExpress DataView 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 DataView extension inside of a Partial View and define how the callbacks will be routed back to your controller using the CallbackRouteValues property:

Partial View code:

@Html.DevExpress().DataView(settings => {
    settings.Name = "dataView";
    settings.CallbackRouteValues = new {
      Controller = "DataView", Action = "OverviewPartial" };
    settings.SettingsTableLayout.RowsPerPage = 1;
    settings.SetItemTemplateContent(c => {
        ViewContext.Writer.Write(
            "<img src=\"" + Url.Content(DataBinder.Eval(c.DataItem, "PhotoUrl").ToString()) + "\" alt=\"\" />"
        );
    });
}).BindToXML(HttpContext.Current.Server.MapPath("~/App_Data/Contacts.xml"), "//Contact").GetHtml()


3. Controller (the "C" in MVC). Finally, the controller is where you will need to define the action methods that will handle the DataView callbacks. The "OverviewPartial" action method below handles the callbacks. As you can see, the native DevExpress DataView extension follows the ASP.NET MVC pattern while providing powerful features for your end-users.

Controller code:

public class HomeController: Controller {
  public ActionResult Overview() {
    return View("Overview");
  }
  public ActionResult OverviewPartial() {
    return PartialView("OverviewPartial");
  }
}

Key Features
  • Binding to Data
    You can bind a DataView to a data source so that your data items are retrieved from an XML file, a SiteMap or an IEnumerable object.
  • Endless Paging
    The DataView extension supports an endless paging mode that allows the loading of items on demand.
  • SEO Friendly Paging
    DataView's pager can represent links to other pages as hyperlinks, thus enabling a web-crawler to index the entire DataView content.
  • Custom Callbacks
    DataView provides the ability to initiate a custom callback on demand, and then performs the required server-side processing, thus allowing you to implement sorting or filtering operations.
  • Built-in Pager
    DataView automatically splits content across multiple pages, and provides a built-in pager that enables end-users to navigate through data.
  • Template Technology
    Templates are fully supported. For each element within DataView, you can customize the appearance or layout using any HTML content.
  • Rich Client-Side Functionality
    A comprehensive client-side API is available for DataView. This functionality, coupled with the ability to handle events on the client side, gives you full control over the extension's behavior on the client side.
Version: v2016 vol 2.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.