Alerts and Prompts
The Popup control can be used to implement static methods for showing alert and prompt dialogs:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | // 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, } } }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // 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; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1InputController : Controller { // GET: AlertsPrompts public ActionResult AlertsPrompts() { return View(); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | < 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" ) |