Version: 2.0 |

MediaList

in namespace DotVVM.Framework.Controls.Bootstrap4

Represents Bootstrap Media List. Use MediaObject controls inside.

Properties

Name Type Description Notes Default Value
AlternateTextBinding IValueBinding Gets or sets the value binding that points to a property which will be used as alternate text to image of the item.
attribute
inner element
static value
bindable
default
ClickBinding ICommandBinding Gets or sets a binding which defines a click action for button items.
attribute
inner element
static value
bindable
default
DataSource Object Gets or sets the source collection or a GridViewDataSet that contains data in the control.
attribute
inner element
static value
bindable
default
DescriptionBinding IValueBinding Gets or sets the value binding that points to a property which will be used as description text of the item.
attribute
inner element
static value
bindable
default
HeaderTextBinding IValueBinding Gets or sets the value binding that points to a property which will be used as header text of the item.
attribute
inner element
static value
bindable
default
HeightBinding IValueBinding Gets or sets the value binding that points to a property which will be used as image height of the item.
attribute
inner element
static value
bindable
default
ImageUrlBinding IValueBinding Gets or sets the value binding that points to a property which will be used as the url to image of the item.
attribute
inner element
static value
bindable
default
IsEnabledBinding IValueBinding Gets or sets a value binding that points to a property indicating whether the item is disabled or not.
attribute
inner element
static value
bindable
default
Items List<IMediaObject> Gets or sets a collection of items that is used when no DataSource is set.
attribute
inner element
static value
bindable
default
NavigateUrlBinding IValueBinding Gets or sets the value binding that points to a property which will be navigated to when the item is clicked.
attribute
inner element
static value
bindable
default
WidthBinding IValueBinding Gets or sets the value binding that points to a property which will be used as image width of the item.
attribute
inner element
static value
bindable
default

Events

Name Type Description

Usage & Scenarios

Renders Bootstrap Media List. Use the MediaObject controls inside.

https://getbootstrap.com/docs/4.1/layout/media-object/

HTML Rendered by the Control

Sample 1: Basic MediaList

If you want to render a list of MediaObject controls, use this control and simply place the media objects inside.

<bs:MediaList>

  <bs:MediaObject ImageUrl="~/Images/person.png"
                  AlternateText="TEST" Header="Basic Image" Description="Simple Description" />

  <bs:MediaObject ImageUrl="~/Images/person.png"
                  AlternateText="TEST" Header="Basic Image" Description="Simple Description" />

</bs:MediaList>

Sample 2: Binding MediaList

Items inside the MediaList control can be also generated from a collection in the DataSource property.

You can specify, which properties of collection items will be used to set properties of generated media objects:

  • ImageUrlBinding
  • AlternateTextBinding
  • NavigateUrlBinding
  • WidthBinding
  • HeightBinding
  • HeaderTextBinding
  • DescriptionBinding
<bs:MediaList DataSource="{value: Medias}" 
              ImageUrlBinding="{value: ImageUrl}"
              AlternateTextBinding="{value: AltText}"
              HeaderTextBinding="{value: Header}"
              DescriptionBinding="{value: Description}"
              NavigateUrlBinding="{value: NavigateUrl}"              
              WidthBinding="{value: Width}"
              HeightBinding="{value: Height}" />
using DotVVM.Framework.ViewModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.MediaList.sample2
{
    public class ViewModel : DotvvmViewModelBase
    {
        public List<MediaItem> Medias { get; set; } = new List<MediaItem>()
        {
            new MediaItem() { ImageUrl = "/Content/Images/img12.jpg", AltText = "google alt", NavigateUrl = "https://www.google.cz/",
                Header = "Google", Description = "This is description for Google", Width = "100", Height = "200" },
            new MediaItem() { ImageUrl = "/Content/Images/img12.jpg", AltText = "w3schools alt", NavigateUrl = "http://www.w3schools.com/",
                Header = "W3Schools", Description = "This is description for W3Schools", Width = "300", Height = "200" },
            new MediaItem() { ImageUrl = "/Content/Images/img12.jpg", AltText = "bootstrap alt", NavigateUrl = "http://getbootstrap.com/",
                Header = "Bootstrap", Description = "This is description for Bootstrap", Width = "200", Height = "100" },
            new MediaItem() { ImageUrl = "/Content/Images/img12.jpg", AltText = "dotvvm alt", NavigateUrl = "https://www.dotvvm.com/",
                Header = "DotVVM", Description = "This is description for DotVVM", Width = "50", Height = "50" }
        };
    }

    public class MediaItem
    {
        public string ImageUrl { get; set; }
        public string AltText { get; set; }
        public string NavigateUrl { get; set; }
        public string Header { get; set; }
        public string Description { get; set; }
        public string Width { get; set; }
        public string Height { get; set; }
    }
}

Suggestions


Help & Contribute

The documentation is maintained on GitHub.
We'll be happy if you edit the page and create a pull request.

Send message