Edit on Github

ModalDialog

in namespace DotVVM.Framework.Controls.Bootstrap

Renders the Bootstrap modal dialog widget.

Usage & Scenarios

Renders a modal dialog popup displayed on top of the current page using Bootstrap Modal widget.

https://getbootstrap.com/docs/3.3/javascript/#modals

Sample 1: Basic Usage

The ModalDialog control has the HeaderText property which sets the title of the popup.

By default, the dialog title is rendered as <h4> header, but you can adjust it using the HeaderTagName property. If you need to customize the header using your own HTML content, use the HeaderTemplate property instead.

The contents of the dialog are specified using the ContentTemplate property. This is the only required property.

The button row can be customized using the FooterTemplate property.

The ModalDialog can be displayed or hidden using the IsDisplayed property. Just bind it to a bool property in the viewmodel and set it to true or false.

<bs:Button Text="Open Dialog" Type="Primary" Click="{command: OpenDialog()}" />

<bs:ModalDialog IsDisplayed="{value: Displayed}">
  <HeaderTemplate>
    My Dialog
    <bs:CloseButton/>
  </HeaderTemplate>
  <ContentTemplate>
    This is the contents of the dialog.
  </ContentTemplate>
</bs:ModalDialog>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.ModalDialog.sample2
{
    public class ViewModel
    {
        public bool Displayed { get; set; } = false;

        public void OpenDialog() 
        {
            Displayed = true;
        }
    }
}

Sample 2: ModalDialog Sizing and Static Commands

You can use the static commands to control the IsDisplayed property.

No communication with the server is required in this mode because you only work with the viewmodel property.

<bs:Button Text="Open Dialog" Click="{staticCommand: Displayed = true}" />

<bs:ModalDialog HeaderText="My Dialog" 
    IsDisplayed="{value: Displayed}" 
	Size="Small">
	<ContentTemplate>
		This is the dialog.
	</ContentTemplate>
	<FooterTemplate>
		<bs:Button Text="Close Dialog" Click="{staticCommand: Displayed = false}" />
	</FooterTemplate>
</bs:ModalDialog>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.ModalDialog.sample2
{
    public class ViewModel
    {
        public bool Displayed { get; set; } = false;
    }
}

Properties

Name Type Description Notes Default Value
property icon Attributes Dictionary<String,Object>
attribute
inner element
static value
bindable
default
 null
property icon ClientIDMode ClientIDMode Gets or sets the client ID generation algorithm.
attribute
inner element
static value
bindable
default
 Static
property icon ContentTemplate ITemplate Gets or sets the dialog content.
attribute
inner element
static value
bindable
default
 null
property icon 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
inner element
static value
bindable
default
 null
property icon FooterTemplate ITemplate Gets or sets the contents of the dialog footer.
attribute
inner element
static value
bindable
default
 null
property icon HeaderTagName String Gets or sets tag which wraps the value of the HeaderText property. This property cannot be used together with the HeaderTemplate property.
attribute
inner element
static value
bindable
default
 null
property icon HeaderTemplate ITemplate Gets or sets the content of the dialog header. This property cannot be used together with the HeaderText property.
attribute
inner element
static value
bindable
default
 null
property icon HeaderText String Gets or sets the text in the dialog header. If you need to customize the dialog header, use the HeaderTemplate property.
attribute
inner element
static value
bindable
default
property icon ID String Gets or sets the unique control ID.
attribute
inner element
static value
bindable
default
 null
property icon InnerText String Gets or sets the inner text of the HTML element.
attribute
inner element
static value
bindable
default
 null
property icon IsDisplayed Boolean Gets or sets whether the dialog is currently displayed or not. Use data-binding on this property to show and hide the dialog.
attribute
inner element
static value
bindable
default
 False
property icon Size ModalSize Gets or sets the size of the dialog.
attribute
inner element
static value
bindable
default
 Normal
property icon Visible Boolean Gets or sets whether the control is visible.
attribute
inner element
static value
bindable
default
 True
property icon ZIndex Int32 Gets or sets z-index value of the ModalDialog control.
attribute
inner element
static value
bindable
default
 2000

HTML produced by the control