Alerts and Prompts

The Popup control can be used to implement static methods for showing alert and prompt dialogs:

Show

Type
Header
Body
Default Value
Small
OK Text
Cancel Text

Dialog Class
Header Class
Body Class
Input Class
Body Class
OK Class
Cancel Class

// This file locates: "Scripts/Lesson/C1Input/AlertsPrompts.js".
c1.documentReady(function () {
    var popup = wijmo.Control.getControl('#popup');
 
    // alert popup
    function alertPopup(options, callback) {
        updateDialog(options);
        popup.show(true, function (sender) {
            if (callback) {
                callback(sender.dialogResult)
            }
        });
    }
 
    // prompt popup
    function propmtPopup(options, callback) {
        updateDialog(options, true);
        popup.show(true, function (sender) {
            if (callback) {
                var result = sender.dialogResult.indexOf('ok') > -1
                    ? popup.hostElement.querySelector('input').value
                  : null;
                callback(result);
            }
        });
    }
 
    // update dialog to use as an alert or prompt
    function updateDialog(options, input) {
 
        // fill out default options
        options.ok = options.ok || 'OK';
        options.cancel = options.cancel || 'Cancel';
        options.clsDialog = options.clsDialog || 'wj-dialog';
        options.clsHeader = options.clsHeader || 'wj-dialog-header';
        options.clsBody = options.clsBody || 'wj-dialog-body';
        options.clsInput = options.clsInput || 'wj-control';
        options.clsFooter = options.clsFooter || 'wj-dialog-footer';
        options.clsOK = options.clsOK || 'wj-btn';
        options.clsCancel = options.clsCancel || 'wj-btn';
 
        // create dialog
        var template = '<div class="{clsDialog}" style="width:100%;" role="dialog">' +
          '<div class="{clsHeader}">' +
          '<h4>{header}</h4>' +
          '</div>' +
          '<div class="{clsBody}">' +
          '<p>{body}</p>' +
          (input ? '<input class="{clsInput}" value="{defVal}">' : '') +
          '</div>' +
          '<div class="{clsFooter}">' +
          '<button class="{clsOK} wj-hide-ok">{ok}</button>' +
          (options.cancel ? '<button class="{clsCancel} wj-hide">{cancel}</button>' : '') +
          '</div>' +
          '</div>';
        var dialog = wijmo.createElement(wijmo.format(template, options));
        popup.content = dialog;
 
        // honor 'small' option
       popup.hostElement.style.width = options.small ? '20%' : '40%'
    }
 
    // show the Alert/Prompt
    document.getElementById('btnShow').addEventListener('click', function () {
        var options = getOptions();
        if (cmbType.text == 'Alert') {
            alertPopup(options, function (result) {
                alert('you entered: ' + result);
            });
        } else {
            propmtPopup(options, function (result) {
                alert('you entered: ' + result);
            });
        }
    });
 
    var cmbType = wijmo.Control.getControl('#type');
    cmbType.textChanged.addHandler(function (s, e) {
        document.getElementById('btnShow').textContent = 'Show ' + s.text;
    });
     
    var header = wijmo.Control.getControl('#header');
    var body = wijmo.Control.getControl('#body');
    var defVal = wijmo.Control.getControl('#defVal');
    var ok = wijmo.Control.getControl('#ok');
    var cancel = wijmo.Control.getControl('#cancel');
    var clsDialog = wijmo.Control.getControl('#clsDialog');
    var clsHeader = wijmo.Control.getControl('#clsHeader');
    var clsBody = wijmo.Control.getControl('#clsBody');
    var clsInput = wijmo.Control.getControl('#clsInput');
    var clsFooter = wijmo.Control.getControl('#clsFooter');
    var clsOK = wijmo.Control.getControl('#clsOK');
    var clsCancel = wijmo.Control.getControl('#clsCancel');
 
    function getChecked(id) {
        return document.getElementById(id).checked;
    }
 
    // load options into an object
    function getOptions() {
        return {
            header: header.text,
            body: body.text,
            defVal: defVal.text,
            small: getChecked('small'),
            ok: ok.text,
            cancel: cancel.text,
            clsDialog: clsDialog.text,
            clsHeader: clsHeader.text,
            clsBody: clsBody.text,
            clsInput: clsInput.text,
            clsFooter: clsFooter.text,
            clsOK: clsOK.text,
            clsCancel: clsCancel.text,
        }
    }
});

// This file locates: "Content/css/Lesson/C1Input/AlertsPrompts.css".
label {
  width: 90px;
  text-align: right;
  margin-right: 6px;
}
 
.wj-combobox {
  width: 140px;
  margin-bottom: 6px;
}
 
#popup .btn{
    margin-bottom:0px;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1InputController : Controller
    {
        // GET: AlertsPrompts
        public ActionResult AlertsPrompts()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Input.AlertsPrompts_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Input.AlertsPrompts_Text1)
</p>
 
<div class="demo-settings">
    <label for="btnShow">@Html.Raw(Resources.C1Input.AlertsPrompts_Text2)</label>
    <button id="btnShow" class="btn btn-primary">@Resources.Resource.Btn_ShowPopup</button>
</div>
 
<div class="row demo-settings">
 
    <div class="col-xs-6">
 
        <!-- important options -->
        <label for="type">@Html.Raw(Resources.C1Input.AlertsPrompts_Text3)</label>
        @Html.C1().ComboBox().Id("type").Bind(new[] { "Alert", "Prompt" })
        <br />
        <label for="header">@Html.Raw(Resources.C1Input.AlertsPrompts_Text4)</label>
        @Html.C1().ComboBox().Id("header").Text("Header").ShowDropDownButton(false)
        <br />
        <label for="body">@Html.Raw(Resources.C1Input.AlertsPrompts_Text5)</label>
        @Html.C1().ComboBox().Id("body").Text("Dialog message.").ShowDropDownButton(false)
        <br />
        <label for="defVal">@Html.Raw(Resources.C1Input.AlertsPrompts_Text6)</label>
        @Html.C1().ComboBox().Id("defVal").Text("Default value").ShowDropDownButton(false)
        <br />
        <label for="small">@Html.Raw(Resources.C1Input.AlertsPrompts_Text7)</label>
        <input id="small" type="checkbox">
        <br />
        <label for="ok">@Html.Raw(Resources.C1Input.AlertsPrompts_Text8)</label>
        @Html.C1().ComboBox().Id("ok").Text("OK").ShowDropDownButton(false)
        <br />
        <label for="cancel">@Html.Raw(Resources.C1Input.AlertsPrompts_Text9)</label>
        @Html.C1().ComboBox().Id("cancel").Text("Cancel").ShowDropDownButton(false)
        <br />
    </div>
 
    <div class="col-xs-6">
 
        <!-- details -->
        <label for="clsDialog">@Html.Raw(Resources.C1Input.AlertsPrompts_Text10)</label>
        @Html.C1().ComboBox().Id("clsDialog").Text("modal-dialog").ShowDropDownButton(false)
        <br />
        <label for="clsHeader">@Html.Raw(Resources.C1Input.AlertsPrompts_Text11)</label>
        @Html.C1().ComboBox().Id("clsHeader").Text("modal-header").ShowDropDownButton(false)
        <br />
        <label for="clsBody">@Html.Raw(Resources.C1Input.AlertsPrompts_Text12)</label>
        @Html.C1().ComboBox().Id("clsBody").Text("modal-body").ShowDropDownButton(false)
        <br />
        <label for="clsInput">@Html.Raw(Resources.C1Input.AlertsPrompts_Text13)</label>
        @Html.C1().ComboBox().Id("clsInput").Text("form-control").ShowDropDownButton(false)
        <br />
        <label for="clsFooter">@Html.Raw(Resources.C1Input.AlertsPrompts_Text14)</label>
        @Html.C1().ComboBox().Id("clsFooter").Text("modal-footer").ShowDropDownButton(false)
        <br />
        <label for="clsOK">@Html.Raw(Resources.C1Input.AlertsPrompts_Text15)</label>
        @Html.C1().ComboBox().Id("clsOK").Text("btn btn-primary").ShowDropDownButton(false)
        <br />
        <label for="clsCancel">@Html.Raw(Resources.C1Input.AlertsPrompts_Text16)</label>
        @Html.C1().ComboBox().Id("clsCancel").Text("btn btn-default").ShowDropDownButton(false)
        <br />
    </div>
</div>
 
@Html.C1().Popup().Id("popup")