@model ASPNET5Input101.Models.InputModel

@{
    ViewBag.Title = "ASP.NET 5 MVC C1 Input Introduction";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="header">
    <div class="container">
        <img src="@Url.Content("~/images/c1logo.png")" alt="Component One ASP.NET MVC" />
        <h1>
            ASP.NET 5 C1 Input 101
        </h1>
        <p>
            This page shows how to get started with ASP.NET 5 MVC's C1 Input controls.
        </p>
    </div>
</div>

<div class="container">
    <div class="sample-page download-link">
        <a href="http://www.componentone.com/Download/">Download Free Trial</a>
    </div>
    <!-- Getting Started -->
    <div>
        <h2>Getting Started</h2>
        <p>
            Steps for getting started with the Input control in MVC applications:
        </p>
        <ol>
            <li>Create a new ASP.NET 5 MVC project using the "C1 ASP.NET MVC 6 Web Application" template.</li>
            <li>Add controller and corresponding view to the project.</li>
            <li>Initialize the C1 Input control in view using various tags &lt;c1-input-number&gt;&lt;/c1-input-number&gt;, &lt;c1-auto-complete&gt;&lt;/c1-auto-complete&gt;, &lt;c1-input-date&gt;&lt;/c1-input-date&gt;, &lt;c1-input-time&gt;&lt;/c1-input-time&gt;, &lt;c1-combo-box&gt;&lt;/c1-combo-box&gt; etc. </li>
            <li>(Optional) Add some CSS to customize the input control's appearance.</li>
        </ol>
        
        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#gsHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#gsCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="gsHtml">

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- this is the input number --&gt;
    &lt;c1-input-number value="3.5"
        step=".5"
        format="n"&gt;
    &lt;/c1-input-number&gt;
&lt;/body&gt;
&lt;/html&gt;

                        </div>
                        
                        <div class="tab-pane pane-content" id="gsCS">

using Microsoft.AspNet.Mvc;
using ASPNET5Input101.Models;

namespace ASPNET5Input101.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View(new InputModel());
        }
    }
}
                            

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>                
                <c1-input-number 
                                 value="3.5" 
                                 step=".5" 
                                 format="n">
                </c1-input-number>
            </div>
        </div>
    </div>

    <!-- AutoComplete -->
    <div>
        <h2>AutoComplete</h2>
        <p>
            The AutoComplete control is an auto-complete control that allows you to filter its
            item list as you type, as well as select a value directly from its drop-down list.
        </p>
        <p>
            To use the AutoComplete control, you must minimally set the <b>source-collection</b> property to any array of data by using <b>&lt;c1-items-source&gt;&lt;/c1-items-source&gt;</b>
            tag in order to populate its item list. The AutoComplete
            control also offers several other properties to alter its behavior, such as the
            <b>css-match</b> property. The <b>css-match</b> property allows you to specify the CSS
            class that is used to highlight parts of the content that match your search terms.
        </p>
        <p>
            The example below uses List of strings to populate the AutoComplete control's
            item list using the <b>c1-item-source</b> tag. To see a list of suggestions, type
            <b>"ab"</b> or <b>"za"</b> in the AutoComplete controls below.
        </p>
        <div class="row">
            <div class="col-md-7">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#acHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#acCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                        <li><a href="#acCss" role="tab" data-toggle="tab">CSS</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="acHtml">

&lt;div&gt;
&lt;label&gt;Bind Only&lt;/label&gt;
&lt;c1-auto-complete>
    &lt;c1-items-source source-collection="Model.CountryList"&gt;&lt;/c1-items-source&gt;
&lt;/c1-auto-complete&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;label&gt;Bind &amp;amp; CssMatch&lt;/label&gt;
&lt;c1-auto-complete css-match="highlight"&gt;
    &lt;c1-items-source source-collection="Model.CountryList"&gt;&lt;/c1-items-source&gt;
&lt;/c1-auto-complete&gt;
&lt;/div&gt;
                        
                        </div>
<div class="tab-pane pane-content" id="acCS">

using Microsoft.AspNet.Mvc;
using ASPNET5Input101.Models;

namespace ASPNET5Input101.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View(new InputModel());
        }
    }
}

</div>
                        <div class="tab-pane pane-content" id="acCss">
.highlight {
    background-color: #ff0;
    color: #000;
}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-5">
                <h4>Result (live):</h4>
                <div class="app-input-group">
                    <label>Bind Only</label>                    
                    <c1-auto-complete>
                        <c1-items-source source-collection="Model.CountryList"></c1-items-source>
                    </c1-auto-complete>
                </div>
                <div class="app-input-group">
                    <label>Bind &amp; cssMatch</label>                    
                    <c1-auto-complete css-match="highlight">
                        <c1-items-source source-collection="Model.CountryList"></c1-items-source>
                    </c1-auto-complete>
                </div>
            </div>
        </div>
    </div>

    
    <!-- ComboBox -->
    <div>
        <h2>ComboBox</h2>
        <p>
            The ComboBox control is very similar to the AutoComplete control, but rather than
            providing a list of suggestions as you type, the ComboBox will automatically complete
            and select the entry as you type.
        </p>
        <p>
            Like the AutoComplete control, you must minimally set the <b>source-collection</b> property to any array of data by using <b>&lt;c1-items-source&gt;&lt;/c1-items-source&gt;</b>
            tag in order to populate its item list. You may also want to
            specify whether the ComboBox is editable via the <b>is-editable</b> property. The
            <b>is-editable</b> property determines whether or not a user can enter values that do
            not appear in the ComboBox's item list.
        </p>
        <p>
            The example below uses two ComboBoxes bound to the same data source as the AutoComplete
            control above. The first ComboBox's <b>is-editable</b> property is set to false, while the
            second ComboBox's <b>is-editable</b> property is set to true.
        </p>
        <div class="row">
            <div class="col-md-7">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#cbHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#cbCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="cbHtml">
                            
&lt;div&gt;
&lt;label&gt;Non-Editable&lt;/label&gt;
&lt;c1-combo-box is-editable="false"&gt;
    &lt;c1-items-source source-collection="Model.CountryList"&gt;&lt;/c1-items-source&gt;
&lt;/c1-combo-box&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;label&gt;Editable&lt;/label&gt;
&lt;c1-combo-box is-editable="true"&gt;
    &lt;c1-items-source source-collection="Model.CountryList"&gt;&lt;/c1-items-source&gt;
&lt;/c1-combo-box&gt;
&lt;/div&gt;
                        </div>
                        <div class="tab-pane pane-content" id="cbCS">

using Microsoft.AspNet.Mvc;
using ASPNET5Input101.Models;

namespace ASPNET5Input101.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View(new InputModel());
        }
    }
}

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-5">
                <h4>Result (live):</h4>
                <div class="app-input-group">
                    <label>Non-Editable</label>                    
                    <c1-combo-box is-editable="false">
                        <c1-items-source source-collection="Model.CountryList"></c1-items-source>
                    </c1-combo-box>
                </div>
                <div class="app-input-group">
                    <label>Editable</label>                    
                    <c1-combo-box is-editable="true">
                        <c1-items-source source-collection="Model.CountryList"></c1-items-source>
                    </c1-combo-box>
                </div>
            </div>
        </div>
    </div>



    <!-- InputDate and Calendar -->
    <div>
        <h2>InputDate &amp; Calendar</h2>
        <p>
            The InputDate control allows you to edit and select dates via a drop-down calendar,
            preventing you from entering an incorrect value. The InputDate's drop-down calendar
            was developed as a separate control and can be used independently
            from the InputDate control.
        </p>
        <p>
            Both InputDate and Calendar, specify several properties to alter the controls' behavior.
            The most commonly used properties include:
        </p>
        <ul>
            <li>
                <b>value</b>: Specifies the date value for the control.
            </li>
            <li>
                <b>min</b>: Specifies the minimum date value that can be entered in the control.
            </li>
            <li>
                <b>max</b>: Specifies the maximum date value that can be entered in the control.
            </li>
        </ul>
        <p>
            The example below demonstrates how to use each of these properties.
        </p>
        <div class="row">
            <div class="col-md-7">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#idcHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#idcCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="idcHtml">

@@{
    var today = DateTime.Today.Date;
    var minDate = new DateTime(today.Year, 1, 1);
    var maxDate = new DateTime(today.Year, 12, 31);
}
&lt;div&gt;
&lt;label&gt;Bound InputDate with min &amp;amp; max&lt;/label&gt;
    &lt;c1-input-date id="idcInputDate" value="today" min="minDate" max="maxDate"&gt;
    &lt;/c1-input-date&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;label&gt;Bound Calendar with min &amp;amp; max&lt;/label&gt;
    &lt;c1-calendar id="idcCalendar" value="today" min="minDate" max="maxDate" width="300"&gt;
    &lt;/c1-calendar&gt;
&lt;/div&gt;
&lt;p&gt;
&lt;b&gt;Valid Range: &lt;span id="idcMinDate"&gt;@@minDate&lt;/span&gt; to &lt;span id="idcMaxDate"&gt;&lt;/span&gt;@@maxDate&lt;/b&gt;
&lt;/p&gt;

                        </div>
                        <div class="tab-pane pane-content" id="idcCS">

using Microsoft.AspNet.Mvc;
using ASPNET5Input101.Models;

namespace ASPNET5Input101.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}                            
                            
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-5">
                @{
                    var today = DateTime.Today.Date;
                    var minDate = new DateTime(today.Year, 1, 1);
                    var maxDate = new DateTime(today.Year, 12, 31);
                    var minTime = new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day, 7, 0, 0);
                    var maxTime = new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day, 19, 0, 0);                    
                }
                <h4>Result (live):</h4>
                <div class="app-input-group">
                    <label>Bound InputDate with Min &amp; Max</label>
                    <c1-input-date id="idcInputDate" value="today" min="minDate" max="maxDate">
                    </c1-input-date>
                </div>
                <div class="app-input-group">
                    <label>Bound Calendar with Min &amp; Max</label>
                    <c1-calendar id="idcCalendar" value="today" min="minDate" max="maxDate" width="300">
                    </c1-calendar>
                </div>
                <p>
                    <b>Valid Range: <span id="idcMinDate">@minDate</span> to <span id="idcMaxDate">@maxDate</span></b>
                </p>
            </div>
        </div>
    </div>


    <!-- InputDate and InputTime -->
    <div>
        <h2>InputDate &amp; InputTime</h2>
        <p>
            Similar to the InputDate control, the InputTime control allows you to modify the time portion of
            a JavaScript date. The InputTime control shares many of the same properties as the InputDate control,
            including <b>format</b>, <b>min</b>, <b>max</b>, and <b>value</b>. The InputTime control also offers a
            <b>step</b> property that allows you to specify the number of minutes between entries in its drop-down
            list.
        </p>
        <p>
            The example below illustrates how to use the InputTime control in conjunction with the InputDate
            control. Notice that these controls work together to edit the same DateTime JavaScript Object
            and only update the part of the DateTime that they are responsible for.
        </p>
        <div class="row">
            <div class="col-md-7">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#iditHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#iditJs" role="tab" data-toggle="tab">JS</a></li>
                        <li><a href="#iditCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="iditHtml">
@@{
    var today = DateTime.Today.Date;
    var minDate = new DateTime(today.Year, 1, 1);
    var maxDate = new DateTime(today.Year, 12, 31);
    var minTime = new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day, 7, 0, 0);
    var maxTime = new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day, 19, 0, 0);
}
&lt;div&gt;
&lt;label&gt;Bound InputDate with min, max, &amp;amp; format&lt;/label&gt;
    &lt;c1-input-date id="iditInputDate" 
                   value="minDate" 
                   max="maxDate" 
                   format="MMM dd, yyyy" 
                   value-changed="valueChanged"&gt;
    &lt;/c1-input-date&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;label&gt;Bound InputTime with min, max, &amp;amp; step&lt;/label&gt;
    &lt;c1-input-time 
                   id="iditInputTime"
                   value="minTime"
                   min="minTime"
                   max="maxTime"
                   step="15"
                   value-changed="valueChanged"&gt;
    &lt;/c1-input-time&gt;
&lt;/div&gt;
&lt;p&gt;
&lt;b&gt;Selected Date &amp; Time: &lt;span id="iditSelectedValue"&gt;&lt;/span&gt;&lt;/b&gt;
&lt;/p&gt;
                        </div>
                        <div class="tab-pane pane-content" id="iditJs">
$(document).ready(function () {
    valueChanged();
});

// valueChanged event handler
function valueChanged(sender) {
    if (document.getElementById("iditInputDate")
        && document.getElementById("iditInputTime")
        && document.getElementById("iditSelectedValue")) {
        var inputDate = wijmo.Control.getControl("#iditInputDate");
        var inputTime = wijmo.Control.getControl("#iditInputTime");
        // get new date from the two controls using Wijmo utility functions
        var val = wijmo.DateTime.fromDateTime(inputDate.value, inputTime.value);
        // format and display the new date
        document.getElementById('iditSelectedValue').innerHTML = wijmo.Globalize.format(val, 'MMM dd, yyyy h:mm:ss tt');
    }
};
                        </div>
                        <div class="tab-pane pane-content" id="iditCS">
using Microsoft.AspNet.Mvc;
using ASPNET5Input101.Models;

namespace ASPNET5Input101.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-5">
                <h4>Result (live):</h4>
                <div class="app-input-group">
                    <label>Bound InputDate with Min, Max, &amp; Format</label>
                    <c1-input-date id="iditInputDate" value="minDate" max="maxDate" format="MMM dd, yyyy" value-changed="valueChanged">
                    </c1-input-date>
                </div>
                <div class="app-input-group">
                    <label>Bound InputTime with Min, Max, &amp; Step</label>
                    <c1-input-time id="iditInputTime"
                                   value="minTime"
                                   min="minTime"
                                   max="maxTime"
                                   step="15"
                                   value-changed="valueChanged">
                    </c1-input-time>
                </div>
                <p>
                    <b>Selected Date &amp; Time: <span id="iditSelectedValue"></span></b>
                </p>
            </div>
        </div>
    </div>




    <!-- ListBox -->
    <div>
        <h2>ListBox</h2>
        <p>
            The ListBox control displays a list of items and allows you to select items using your
            mouse and keyboard. Like the AutoComplete and ComboBox controls, you must add the
            <b>&lt;c1-items-source&gt;&lt;/c1-items-source&gt;</b> tag to bind the <b>source-collection</b> property in order to use the control.
</p>
        <p>
            The example below allows you to select an item within the ListBox control, and also displays
            the control's <b>selected-index</b> and <b>selected-value</b> properties.
        </p>
        <div class="row">
            <div class="col-md-7">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#lbHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#lbJs" role="tab" data-toggle="tab">JS</a></li>
                        <li><a href="#lbCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="lbHtml">
&lt;div&gt;
&lt;c1-list-box id="lbListBox"
    style="width:250px;height:150px"
    selected-index-changed="selectedIndexChanged"&gt;
    &lt;c1-items-source source-collection="Model.CitiesList"&gt;&lt;/c1-items-source&gt;
&lt;/c1-list-box&gt;
&lt;/div&gt;
&lt;p&gt;
&lt;b&gt;selectedIndex: &lt;span id="lbSelIdx"&gt;&lt;/span&gt;&lt;/b&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;b&gt;selectedValue: &lt;span id="lbSelVal"&gt;&lt;/span&gt;&lt;/b&gt;
&lt;/p&gt;
                        </div>
                        <div class="tab-pane pane-content" id="lbJs">
$(document).ready(function () {
    var ListBox = wijmo.Control.getControl("#lbListBox");
    selectedIndexChanged(ListBox);
});

//selectedIndexChanged event handler
function selectedIndexChanged(sender) {
    //set selectedIndex and selectedValue text
    if (document.getElementById("lbListBox") && document.getElementById("lbSelIdx")
        && document.getElementById("lbSelVal")) {
        document.getElementById('lbSelIdx').innerHTML = sender.selectedIndex;
        document.getElementById('lbSelVal').innerHTML = sender.selectedValue;
    }
};
                        </div>
                        <div class="tab-pane pane-content" id="lbCS">

using Microsoft.AspNet.Mvc;
using ASPNET5Input101.Models;

namespace ASPNET5Input101.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View(new InputModel());
        }
    }
}

                        </div>

                    </div>
                </div>
            </div>
            <div class="col-md-5">
                <h4>Result (live):</h4>
                <div class="app-input-group">
                    <c1-list-box id="lbListBox"
                                 style="width:250px;height:150px"
                                 selected-index-changed="selectedIndexChanged">
                        <c1-items-source source-collection="Model.CitiesList"></c1-items-source>
                    </c1-list-box>
                </div>
                <p>
                    <b>selectedIndex: <span id="lbSelIdx"></span></b>
                </p>
                <p>
                    <b>selectedValue: <span id="lbSelVal"></span></b>
                </p>                
            </div>
        </div>
    </div>




    <!-- InputNumber -->
    <div>
        <h2>InputNumber</h2>
        <p>
            The InputNumber control allows you to edit numbers, preventing you from entering invalid
            data and optionally formatting the numeric value as it is edited. The InputNumber can be
            used without specifying any of its properties; however, you'll typically want to bind it
            to some data using the <b>value</b> property.
        </p>
        <p>
            In addition to the <b>value</b> property, the InputNumber control offers several other
            properties that can be used to alter its behavior, such as:
        </p>
        <ul>
            <li>
                <b>min</b>: Specifies the minimum numeric value that can be entered.
            </li>
            <li>
                <b>max</b>: Specifies the maximum numeric value that can be entered.
            </li>
            <li>
                <b>step</b>: Specifies the amount to add or subtract from the current
                value when the spinner buttons are clicked.
            </li>
            <li>
                <b>format</b>: Specifies the numeric format used to display the number being
                edited. The format property uses a .NET-style
                <a href="http://msdn.microsoft.com/en-us/library/dwhawy9k(v=vs.110).aspx" target="_blank">numeric format string</a>.
            </li>
        </ul>
        <p>
            The example below demonstrates how to use all of these properties.
        </p>
        <div class="row">
            <div class="col-md-7">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#inHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#inCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="inHtml">

&lt;div class="app-input-group"&gt;
    &lt;label&gt;Unbound with "n0" format&lt;/label&gt;
    &lt;c1-input-number 
                        id="inInputNumber1"
                        value="0"
                        format="n0"&gt;
    &lt;/c1-input-number&gt;
&lt;/div&gt;
&lt;div class="app-input-group"&gt;
    &lt;label&gt;Bound with "n" format&lt;/label&gt;
    &lt;c1-input-number id="inInputNumber2"
                        value="Math.PI"
                        format="n"&gt;
    &lt;/c1-input-number&gt;
&lt;/div&gt;
&lt;div class="app-input-group"&gt;
    &lt;label&gt;Bound with min (0), max (10), step, and "c2" format&lt;/label&gt;
    &lt;c1-input-number id="inInputNumber3"
                        value="3.5"
                        format="c2"
                        step=".5"
                        min="0"
                        max="10"&gt;
    &lt;/c1-input-number&gt;
&lt;/div&gt;
&lt;div class="app-input-group"&gt;
    &lt;label&gt;Unbound with placeholder and required="false"&lt;/label&gt;
    &lt;c1-input-number id="inInputNumber4"
                        placeholder="Enter a number..."
                        required="false"
                        value="null"&gt;
    &lt;/c1-input-number&gt;
&lt;/div&gt;
                        </div>
                        <div class="tab-pane pane-content" id="inCS">
using Microsoft.AspNet.Mvc;
using ASPNET5Input101.Models;

namespace ASPNET5Input101.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-5">
                <h4>Result (live):</h4>
                <div class="app-input-group">
                    <label>Unbound with "n0" format</label>
                    <c1-input-number id="inInputNumber1"
                                     value="0"
                                     format="n0">
                    </c1-input-number>
                </div>
                <div class="app-input-group">
                    <label>Bound with "n" format</label>
                    <c1-input-number id="inInputNumber2"
                                     value="Math.PI"
                                     format="n">
                    </c1-input-number>
                </div>
                <div class="app-input-group">
                    <label>Bound with min (0), max (10), step, and "c2" format</label>
                    <c1-input-number id="inInputNumber3"
                                     value="3.5"
                                     format="c2"
                                     step=".5"
                                     min="0"
                                     max="10">
                    </c1-input-number>
                </div>
                <div class="app-input-group">
                    <label>Unbound with placeholder and required="false"</label>
                    <c1-input-number id="inInputNumber4"
                                     placeholder="Enter a number..."
                                     required="false"
                                     value="null">
                    </c1-input-number>
                </div>
            </div>
        </div>
    </div>





    <!-- InputMask -->
    <div>
        <h2>InputMask</h2>
        <p>
            The InputMask control allows you to validate and format user input as it is entered, preventing
            invalid data.  The InputMask control can be used without specifying any of its properties; however,
            you will typically set its <b>value</b> and <b>mask</b> properties.  Like the other MVC input
            controls, the <b>value</b> property specifies the value for the InputMask control.  The <b>mask</b> property
            specifies the control's mask and supports a combination of the following characters:
        </p>
        <dl class="dl-horizontal">
            <dt>0</dt>
            <dd>Digit.</dd>
            <dt>9</dt>
            <dd>Digit or space.</dd>
            <dt>#</dt>
            <dd>Digit, sign, or space.</dd>
            <dt>L</dt>
            <dd>Letter.</dd>
            <dt>l</dt>
            <dd>Letter or space.</dd>
            <dt>A</dt>
            <dd>Alphanumeric.</dd>
            <dt>a</dt>
            <dd>Alphanumeric or space.</dd>
            <dt>.</dt>
            <dd>Localized decimal point.</dd>
            <dt>,</dt>
            <dd>Localized thousand separator.</dd>
            <dt>:</dt>
            <dd>Localized time separator.</dd>
            <dt>/</dt>
            <dd>Localized date separator.</dd>
            <dt>$</dt>
            <dd>Localized currency symbol.</dd>
            <dt>&lt;</dt>
            <dd>Converts characters that follow to lowercase.</dd>
            <dt>&gt;</dt>
            <dd>Converts characters that follow to uppercase.</dd>
            <dt>|</dt>
            <dd>Disables case conversion.</dd>
            <dt>\</dt>
            <dd>Escapes any character, turning it into a literal.</dd>
            <dt>All others</dt>
            <dd>Literals.</dd>
        </dl>
        <p>
            The examples below demonstrates how to use the <b>value</b> and <b>mask</b> properties with the
            InputMask, InputDate, and InputTime controls.
        </p>
        <div class="row">
            <div class="col-md-7">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#imHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#imJs" role="tab" data-toggle="tab">JS</a></li>
                        <li><a href="#imCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="imHtml">
&lt;div class="app-input-group"&gt;
    &lt;label&gt;Social Security Number&lt;/label&gt;
    &lt;c1-input-mask
                id="imSocial"
                mask="000-00-0000"&gt;
    &lt;/c1-input-mask&gt;
&lt;/div&gt;
&lt;div class="app-input-group"&gt;
&lt;label&gt;Phone Number&lt;/label&gt;
&lt;c1-input-mask id="imPhone"
                mask="(999) 000-0000"&gt;
&lt;/c1-input-mask&gt;
&lt;/div&gt;
&lt;div class="app-input-group"&gt;
&lt;label&gt;Try your own&lt;/label&gt;
&lt;c1-input-mask id="imCustomInput"
                placeholder="Enter an input mask..."
                value-changed="MaskvalueChanged"&gt;
&lt;/c1-input-mask&gt;
&lt;c1-input-mask id="imCustomTrial"
                placeholder="Try your input mask..."&gt;
&lt;/c1-input-mask&gt;
&lt;/div&gt;
&lt;div class="app-input-group"&gt;
&lt;label&gt;InputDate with Mask&lt;/label&gt;
&lt;c1-input-date
                value="DateTime.Now"
                format="d"
                mask="99/99/9999"&gt;
&lt;/c1-input-date&gt;
&lt;/div&gt;
&lt;div class="app-input-group"&gt;
&lt;label&gt;InputTime with Mask&lt;/label&gt;
&lt;c1-input-time value="DateTime.Now"
                format="t"
                mask="00:00 &gt;LL"
                step="15"&gt;
&lt;/c1-input-time&gt;
&lt;/div&gt;
                        </div>
                        <div class="tab-pane pane-content" id="imJs">
// InputMask valueChanged event handler
function MaskvalueChanged(sender) {
    var customMaskTrial = wijmo.Control.getControl("#imCustomTrial");
    customMaskTrial.mask = sender.value;
    customMaskTrial.hostElement.title = 'Mask: ' + (sender.value || 'N/A');
};
                        </div>
                        <div class="tab-pane pane-content" id="imCS">
using Microsoft.AspNet.Mvc;
using ASPNET5Input101.Models;

namespace ASPNET5Input101.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-5">
                <h4>Result (live):</h4>
                <div class="app-input-group">
                    <label>Social Security Number</label>
                    <c1-input-mask id="imSocial"
                                   mask="000-00-0000">
                    </c1-input-mask>
                </div>
                <div class="app-input-group">
                    <label>Phone Number</label>
                    <c1-input-mask id="imPhone"
                                   mask="(999) 000-0000">
                    </c1-input-mask>
                </div>
                <div class="app-input-group">
                    <label>Try your own</label>
                    <c1-input-mask id="imCustomInput"
                                   placeholder="Enter an input mask..."
                                   value-changed="MaskvalueChanged">
                    </c1-input-mask>
                    <c1-input-mask id="imCustomTrial"
                                   placeholder="Try your input mask...">
                    </c1-input-mask>
                </div>
                <div class="app-input-group">
                    <label>InputDate with Mask</label>
                    <c1-input-date value="DateTime.Now"
                                   format="d"
                                   mask="99/99/9999">
                    </c1-input-date>
                </div>
                <div class="app-input-group">
                    <label>InputTime with Mask</label>
                    <c1-input-time value="DateTime.Now"
                                   format="t"
                                   mask="00:00 >LL"
                                   step="15">
                    </c1-input-time>
                </div>
            </div>
        </div>
    </div>


    <!-- Menu -->
    <div>
        <h2>Menu</h2>
        <p>
            The Menu control allows you to create a simple drop-down list with clickable items. The Menu's
            items can be defined directly or by using the <b>&lt;c1-items-source&gt;&lt;/c1-items-source&gt;</b> tag similar to the ComboBox.
            To specify the text displayed on the Menu, you can set the <b>header</b> property.
        </p>
        <p>
            The Menu control offers two ways to handle user selections, specifying a command on each menu item
            and the <b>item-clicked</b> event. Unlike the <b>item-clicked</b> event, commands are objects that
            implement two methods:
        </p>
        <ul>
            <li>
                <b>executeCommand(param)</b>: A method that executes the command.
            </li>
            <li>
                <b>canExecuteCommand(param)</b>: A method that returns a Boolean value specifying whether or
                not the command can be executed. If the return value is false, the menu item is disabled automatically.
            </li>
        </ul>
        <p>
            The example below demonstrates how to use both approaches.
        </p>
        <div class="row">
            <div class="col-md-7">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#mHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#mJs" role="tab" data-toggle="tab">JS</a></li>
                        <li><a href="#mCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="mHtml">
&lt;div class="app-input-group"&gt;
    &lt;label&gt;itemClicked Event&lt;/label&gt;
    &lt;c1-menu id="mFileMenu"
                header="File"
                item-clicked="itemClicked"&gt;
        &lt;c1-menu-item header="New: create a new document"&gt;&lt;/c1-menu-item&gt;
        &lt;c1-menu-item header="Open: load an existing document from a file"&gt;&lt;/c1-menu-item&gt;
        &lt;c1-menu-item header="Save: save the current document to a file"&gt;&lt;/c1-menu-item&gt;
        &lt;c1-menu-item is-separator="true"&gt;&lt;/c1-menu-item&gt;
        &lt;c1-menu-item header="Exit: save changes and exit the application"&gt;&lt;/c1-menu-item&gt;
    &lt;/c1-menu&gt;
    &lt;c1-menu id="mEditMenu"
                header="Edit"
                item-clicked="itemClicked"&gt;
        &lt;c1-menu-item header="Cut: move the current selection to the clipboard"&gt;&lt;/c1-menu-item&gt;
        &lt;c1-menu-item header="Copy: copy the current selection to the clipboard"&gt;&lt;/c1-menu-item&gt;
        &lt;c1-menu-item header="Paste: insert the clipboard content at the cursor position"&gt;&lt;/c1-menu-item&gt;
        &lt;c1-menu-item is-separator="true"&gt;&lt;/c1-menu-item&gt;
        &lt;c1-menu-item header="Find: search the current document for some text"&gt;&lt;/c1-menu-item&gt;
        &lt;c1-menu-item header="Exit: save changes and exit the application"&gt;&lt;/c1-menu-item&gt;
    &lt;/c1-menu&gt;
&lt;/div&gt;
&lt;div class="app-input-group"&gt;
    &lt;label&gt;Commands&lt;/label&gt;
    &lt;c1-menu id="mCmdMenu"
                header="Change Tax"
                can-execute-command="canExecute"
                execute-command="execute"&gt;
        &lt;c1-menu-item header="+ 25%" command-parameter="0.25"&gt;&lt;/c1-menu-item&gt;
        &lt;c1-menu-item header="+ 10%" command-parameter="0.10"&gt;&lt;/c1-menu-item&gt;
        &lt;c1-menu-item header="+ 5%" command-parameter="0.05"&gt;&lt;/c1-menu-item&gt;
        &lt;c1-menu-item header="+ 1%" command-parameter="0.01"&gt;&lt;/c1-menu-item&gt;
        &lt;c1-menu-item is-separator="true"&gt;&lt;/c1-menu-item&gt;
        &lt;c1-menu-item header="- 1%" command-parameter="-0.01"&gt;&lt;/c1-menu-item&gt;
        &lt;c1-menu-item header="- 5%" command-parameter="-0.05"&gt;&lt;/c1-menu-item&gt;
        &lt;c1-menu-item header="- 10%" command-parameter="-0.10"&gt;&lt;/c1-menu-item&gt;
        &lt;c1-menu-item header="- 25%" command-parameter="-0.25"&gt;&lt;/c1-menu-item&gt;
    &lt;/c1-menu&gt;
    &lt;c1-input-number id="mInputNumber"
                        value="0.07"
                        step="0.05"
                        format="p0"
                        min="0"
                        max="1"&gt;
    &lt;/c1-input-number&gt;
&lt;/div&gt;
                        </div>
                        <div class="tab-pane pane-content" id="mJs">
function itemClicked(sender) {
    alert('You\'ve selected option ' + sender.selectedIndex + ' from the ' + sender.header + ' menu!');
};

function execute(arg) {
    var inputNumber = wijmo.Control.getControl("#mInputNumber");

    // convert argument to Number
    arg = wijmo.changeType(arg, wijmo.DataType.Number);

    // check if the conversion was successful
    if (wijmo.isNumber(arg)) {

        // update the value
        inputNumber.value += arg;
    }
};

function canExecute(arg) {
    var inputNumber = wijmo.Control.getControl("#mInputNumber");

    // convert argument to Number
    arg = wijmo.changeType(arg, wijmo.DataType.Number);

    // check if the conversion was successful
    if (wijmo.isNumber(arg)) {
        var val = inputNumber.value + arg;

    // check if the value is valid
    return val &gt;= 0 && val &lt;= 1;
};

return false;
};
                        </div>
                        <div class="tab-pane pane-content" id="mCS">
using Microsoft.AspNet.Mvc;
using ASPNET5Input101.Models;

namespace ASPNET5Input101.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-5">
                <h4>Result (live):</h4>
                <div class="app-input-group">
                    <label>itemClicked Event</label>
                    <c1-menu id="mFileMenu"
                             header="File"
                             item-clicked="itemClicked">
                        <c1-menu-item header="New: create a new document"></c1-menu-item>
                        <c1-menu-item header="Open: load an existing document from a file"></c1-menu-item>
                        <c1-menu-item header="Save: save the current document to a file"></c1-menu-item>
                        <c1-menu-item is-separator="true"></c1-menu-item>
                        <c1-menu-item header="Exit: save changes and exit the application"></c1-menu-item>
                    </c1-menu>
                    <c1-menu id="mEditMenu"
                             header="Edit"
                             item-clicked="itemClicked">
                        <c1-menu-item header="Cut: move the current selection to the clipboard"></c1-menu-item>
                        <c1-menu-item header="Copy: copy the current selection to the clipboard"></c1-menu-item>
                        <c1-menu-item header="Paste: insert the clipboard content at the cursor position"></c1-menu-item>
                        <c1-menu-item is-separator="true"></c1-menu-item>
                        <c1-menu-item header="Find: search the current document for some text"></c1-menu-item>
                        <c1-menu-item header="Exit: save changes and exit the application"></c1-menu-item>
                    </c1-menu>
                </div>
                <div class="app-input-group">
                    <label>Commands</label>
                    <c1-menu id="mCmdMenu"
                             header="Change Tax"
                             can-execute-command="canExecute"
                             execute-command="execute">
                        <c1-menu-item header="+ 25%" command-parameter="0.25"></c1-menu-item>
                        <c1-menu-item header="+ 10%" command-parameter="0.10"></c1-menu-item>
                        <c1-menu-item header="+ 5%" command-parameter="0.05"></c1-menu-item>
                        <c1-menu-item header="+ 1%" command-parameter="0.01"></c1-menu-item>
                        <c1-menu-item is-separator="true"></c1-menu-item>
                        <c1-menu-item header="- 1%" command-parameter="-0.01"></c1-menu-item>
                        <c1-menu-item header="- 5%" command-parameter="-0.05"></c1-menu-item>
                        <c1-menu-item header="- 10%" command-parameter="-0.10"></c1-menu-item>
                        <c1-menu-item header="- 25%" command-parameter="-0.25"></c1-menu-item>
                    </c1-menu>
                    <c1-input-number id="mInputNumber"
                                     value="0.07"
                                     step="0.05"
                                     format="p0"
                                     min="0"
                                     max="1">
                    </c1-input-number>
                </div>
            </div>
        </div>
    </div>



</div>