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.3/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="http://i3.ytimg.com/vi/m0gjBDswmsA/maxresdefault.jpg"
                    AlternateText="TEST" 
                    HeaderText="DotVVM Minutes #1: Using Bootstrap 4 in a DotVVM app" 
                    Description="Simple Description" 
                    Width="240px" />

    <bs:MediaObject ImageUrl="http://i3.ytimg.com/vi/anXu-v6-roE/maxresdefault.jpg"
                    AlternateText="TEST" 
                    HeaderText="DotVVM Minutes #2: Calling Azure Functions from DotVVM" 
                    Description="Simple Description" 
                    Width="240px" />

</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}" 
              NavigateUrlBinding="{value: NavigateUrl}"
              HeaderTextBinding="{value: Header}" 
              DescriptionBinding="{value: Description}"
              WidthBinding="{value: Width}" 
              HeightBinding="{value: Height}" />
public class ViewModel : DotvvmViewModelBase
{
    public List<MediaItem> Medias { get; set; } = new List<MediaItem>()
    {
        new MediaItem()
        {
            ImageUrl = "../../Images/1.png",
            AltText = "google alt",
            NavigateUrl = "https://www.google.cz/",
            Header = "Google",
            Description = "This is description for Google",
            Width = "100",
            Height = "200"
        },
        new MediaItem()
        {
            ImageUrl = "../../Images/2.png",
            AltText = "w3schools alt",
            NavigateUrl = "http://www.w3schools.com/",
            Header = "W3Schools",
            Description = "This is description for W3Schools",
            Width = "300",
            Height = "200"
        },
        new MediaItem()
        {
            ImageUrl = "../../Images/3.png",
            AltText = "bootstrap alt",
            NavigateUrl = "http://getbootstrap.com/",
            Header = "Bootstrap",
            Description = "This is description for Bootstrap",
            Width = "200",
            Height = "100"
        }
    };
}

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