В этой статье объясняется, как начать использовать ASPxCardListEditor для отображения коллекции объектов в List View. Сперва потребуется определить бизнес-класс для демонстрации, добавить к проекту шаблон карточки и стилевой файл. После этого можно будет воспользоваться ASPxCardListEditor для отображения даных. Следуйте описанным ниже шагам.

 

   [DomainComponent, DefaultClassOptions]

  public class CardListEditorObject : BaseObject

   {

 

      public CardListEditorObject(Session session) : base(session) { }

 

      public String Title

       {

          get { return GetPropertyValue<String>("Title"); }

          set { SetPropertyValue("Title", value); }

       }

 

      public String Description

       {

          get { return GetPropertyValue<String>("Director"); }

          set { SetPropertyValue("Director", value); }

       }

 

       [Size(SizeAttribute.Unlimited), ValueConverter(typeof(ImageValueConverter))]

      public Image Cover

       {

          get { return GetPropertyValue<Image>("Cover"); }

          set { SetPropertyValue("Cover", value); }

       }

   }

 

Запустите приложение. На изображении ниже представлено CardListEditorObject_ListView, отображающее объекты с использованием  стандартного GridListEditor.

 

public partial class CardListEditorTemplateBase : UserControl, ICardTemplate

    {

        internal ASPxCardListEditorControl Control { get; set; }

        internal Object CurrentObject { get; set; }

        internal IModelCardListEditor Model { get; set; }

        internal XafCallbackManager CallbackManager { get { return Page != null ? ((ICallbackManagerHolder)Page).CallbackManager : null; } }

        protected int CustomImageWidth { get; set; }

        protected int CustomImageHeight { get; set; }

        protected int Count { get; set; }

        protected int CurrentObjectID { get; set; }

        protected Position PositionOnPage { get; set; }

        protected IMemberInfo KeyMember;

 

        public void SetupCurrentObject(object control, object currentObject, int currentObjectID, int count, Position positionOnPage, IMemberInfo keyMember)

        {

            Control = (ASPxCardListEditorControl)control;

            CurrentObject = currentObject;

            CurrentObjectID = currentObjectID;

            Count = count;

            PositionOnPage = positionOnPage;

            Model = Control.CardListViewModel;

            KeyMember = keyMember;

        }

 

        protected string GetImageUrl(Image image) { return image == null ? string.Empty : ImageResourceHttpHandler.GetWebResourceUrl("IC_" + WebImageHelper.GetImageHash(image)); }

 

        protected string GetOnclickScript() { return CallbackManager != null ? CallbackManager.GetScript(Control.UniqueID, string.Format("'{0}'", KeyMember.GetValue(CurrentObject))) : String.Empty; }

 

        protected byte[] GetImageByteArray(Image image)

        {

            var ms = new MemoryStream();

            if (image != null)

            {

                image.Save(ms, System.Drawing.Imaging.ImageFormat.Png);

            }

            return ms.ToArray();

        }

 

        protected T GetCurrentObject<T>() { return (T)CurrentObject; }

    }

 

    enum LeadingProperty

    {

        Width,

        Height,

        Unassigned

    }

} 

 

 

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="Simple_XAF_Application.Web.WebUserControl1" %>

<%@ Register TagPrefix="dx" Namespace="DevExpress.ExpressApp.Web.Layout" Assembly="DevExpress.ExpressApp.Web.v13.2, Version=13.2.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" %>

<%@ Register TagPrefix="asp" Namespace="DevExpress.Web.ASPxEditors" Assembly="DevExpress.Web.v13.2, Version=13.2.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" %>

 

<dx:CustomPanel ID="panel" runat="server">

  <asp:ASPxBinaryImage ID="imageControl" runat="server" Width="150"></asp:ASPxBinaryImage>

  <br/>

  <asp:Label ID="lblTitle" runat="server" Font-Size="17px" />

  <br/>

  <asp:Label ID="lblDirector" runat="server" Font-Size="13px" />

  <br/>

  <br/>

</dx:CustomPanel>

 

Замечание: обратите внимание на версии библиотек DevExpress.ExpressApp.Web и DevExpress.Web. Вам следует указать библиотеки, соответствующие вашей версии DevExpress.

 

  public partial class CardTemplate : CardListEditorTemplateBase

   {

       ...

      protected void Page_Load(object sender, EventArgs e)

       {

           lblTitle.Text = (GetCurrentObject<CardListEditorObject>()).Title;

           lblDirector.Text = (GetCurrentObject<CardListEditorObject>()).Director;

           imageControl.Value = GetImageByteArray((GetCurrentObject<CardListEditorObject>()).Cover);

 

           panel.Attributes.Add("onclick", GetOnclickScript());

       }

       ...

 

Замечание: для элемента panel добавлена возможность открывать карточку для просмотра/редактирования/удаления по клику. Эту функциональность можно настроить для любого элемента карточки отдельно.

 

.rowPanel:before,

.rowPanel:after  {

display: table;

content: "";

}

.rowPanel:after {

clear: both;

}

.cardPanel {

  float:left;

}

.rowPanel {

  text-align:left;

}

 

 

<head runat="server">

  ...

  <link href="CardStyles.css" type="text/css" rel="stylesheet"/>

  ...

</head>

 

В настоящем документе был рассмотрен простейший вариант использования ASPxCardListEditor. Вы можете также ознакомится с использованием ASPxCardListEditor в демо-приложении  Feature Center, установленном вместе с Xafari. Дополнительные возможности редактора описаны в статье Руководство разработчика.