MediaList
in namespace DotVVM.Framework.Controls.Bootstrap
Renders Bootstrap Media List. Works with MediaObject controls inside.
Usage & Scenarios
Renders Bootstrap Media List. Use the MediaObject controls inside.
Sample 1: MediaList
If you want to render a list of MediaObjects, use this control and 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: Media List with Data Source
Items inside the MediaList
control can be also generated from a collection binded to the DataSource
property.
You can specify which properties of objects in the collection will be used to configure the generated items with following properties:
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}" />
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; }
}
}
Properties
Name | Type | Description | Notes | Default Value | |
---|---|---|---|---|---|
AlternateTextBinding | IValueBinding |
attribute
bindable
|
null | ||
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
1 | |
DataContext | Object | Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. |
attribute
static value
bindable
|
null | |
DataSource | Object | Gets or sets the source collection or a GridViewDataSet that contains data in the control. |
attribute
bindable
|
null | |
DescriptionBinding | IValueBinding |
attribute
bindable
|
null | ||
HeaderTextBinding | IValueBinding |
attribute
bindable
|
null | ||
HeightBinding | IValueBinding |
attribute
bindable
|
null | ||
ID | String | Gets or sets the unique control ID. |
attribute
static value
|
null | |
ImageUrlBinding | IValueBinding |
attribute
bindable
|
null | ||
InnerText | String | Gets or sets the inner text of the HTML element. |
attribute
static value
bindable
|
null | |
Items | List<IListItem> |
inner element
static value
default
|
null | ||
NavigateUrlBinding | IValueBinding |
attribute
bindable
|
null | ||
Visible | Boolean | Gets or sets whether the control is visible. |
attribute
bindable
|
True | |
WidthBinding | IValueBinding |
attribute
bindable
|
null |