ASP.NET Core C1 Input 101

This page shows how to get started with ASP.NET Core MVC's C1 Input controls.

Download Free Trial

Getting Started

Steps for getting started with the Input control in MVC applications:

  1. Create a new ASP.NET Core MVC project using the "C1 ASP.NET Core MVC Web Application" template.
  2. Add controller and corresponding view to the project.
  3. Initialize the C1 Input control in view using various tags <c1-input-number></c1-input-number>, <c1-auto-complete></c1-auto-complete>, <c1-input-date></c1-input-date>, <c1-input-time></c1-input-time>, <c1-combo-box></c1-combo-box> etc.
  4. (Optional) Add some CSS to customize the input control's appearance.
<!DOCTYPE html> <html> <head> </head> <body> <!-- this is the input number --> <c1-input-number value="3.5" step=".5" format="n"> </c1-input-number> </body> </html>
using Microsoft.AspNetCore.Mvc; using Input101.Models; namespace Input101.Controllers { public class HomeController : Controller { public IActionResult Index() { return View(new InputModel()); } } }

Result (live):

AutoComplete

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.

To use the AutoComplete control, you must minimally set the source-collection property to any array of data by using <c1-items-source></c1-items-source> tag in order to populate its item list. The AutoComplete control also offers several other properties to alter its behavior, such as the css-match property. The css-match property allows you to specify the CSS class that is used to highlight parts of the content that match your search terms.

The example below uses List of strings to populate the AutoComplete control's item list using the c1-item-source tag. To see a list of suggestions, type "ab" or "za" in the AutoComplete controls below.

<div> <label>Bind Only</label> <c1-auto-complete> <c1-items-source source-collection="@Model.CountryList"></c1-items-source> </c1-auto-complete> </div> <div> <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>
using Microsoft.AspNetCore.Mvc; using Input101.Models; namespace Input101.Controllers { public class HomeController : Controller { public IActionResult Index() { return View(new InputModel()); } } }
.highlight { background-color: #ff0; color: #000; }

Result (live):

ComboBox

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.

Like the AutoComplete control, you must minimally set the source-collection property to any array of data by using <c1-items-source></c1-items-source> tag in order to populate its item list. You may also want to specify whether the ComboBox is editable via the is-editable property. The is-editable property determines whether or not a user can enter values that do not appear in the ComboBox's item list.

The example below uses two ComboBoxes bound to the same data source as the AutoComplete control above. The first ComboBox's is-editable property is set to false, while the second ComboBox's is-editable property is set to true.

<div> <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> <label>Editable</label> <c1-combo-box is-editable="true"> <c1-items-source source-collection="@Model.CountryList"></c1-items-source> </c1-combo-box> </div>
using Microsoft.AspNetCore.Mvc; using Input101.Models; namespace Input101.Controllers { public class HomeController : Controller { public IActionResult Index() { return View(new InputModel()); } } }

Result (live):

InputDate & Calendar

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.

Both InputDate and Calendar, specify several properties to alter the controls' behavior. The most commonly used properties include:

The example below demonstrates how to use each of these properties.

@{ var today = DateTime.Today.Date; var minDate = new DateTime(today.Year, 1, 1); var maxDate = new DateTime(today.Year, 12, 31); } <div> <label>Bound InputDate with min &amp; max</label> <c1-input-date id="idcInputDate" value="@today" min="@minDate" max="@maxDate"> </c1-input-date> </div> <div> <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"></span>@maxDate</b> </p>
using Microsoft.AspNetCore.Mvc; using Input101.Models; namespace Input101.Controllers { public class HomeController : Controller { public IActionResult Index() { return View(); } } }

Result (live):

Valid Range: 1/1/2024 12:00:00 AM to 12/31/2024 12:00:00 AM

InputDate, InputTime & InputDateTime

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 format, min, max, and value. The InputTime control also offers a step property that allows you to specify the number of minutes between entries in its drop-down list.

The InputDateTime control combines the InputDate and InputTime controls, allowing you to set the date and time portions. The InputDateTime control has two drop-downs: a Calendar for picking dates, and a list for picking times.

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.

The example also shows an InputDateTime that updates both the date and time parts.

@{ 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); } <div> <label>Bound InputDate with min, max, &amp; format</label> <c1-input-date id="iditInputDate" value="@today" min="@minTime" max="@maxDate" format="MMM dd, yyyy" value-changed="inputDate_ValueChanged"> </c1-input-date> </div> <div> <label>Bound InputTime with min, max, &amp; step</label> <c1-input-time id="iditInputTime" value="@minTime" min="@minTime" max="@maxTime" step="15" value-changed="inputTime_ValueChanged"> </c1-input-time> </div> <div> <label>Bound InputDateTime with min, max, time-min, time-max, format, &amp; time-step</label> <c1-input-date-time id="iditInputDateTime" value="today" min="minDate" max="maxDate" time-step="15" format="MMM dd, yyyy hh:mm tt" time-min="minTime" time-max="maxTime" value-changed="inputDateTime_ValueChanged"> </c1-input-date-time> </div> <p> <b>Selected Date & Time: <span id="iditSelectedValue"></span></b> </p>
function inputTime_ValueChanged(sender) { var inputDateTime = wijmo.Control.getControl("#iditInputDateTime"); inputDateTime.value = wijmo.DateTime.fromDateTime(inputDateTime.value, sender.value); }; function inputDate_ValueChanged(sender) { var inputDateTime = wijmo.Control.getControl("#iditInputDateTime"); inputDateTime.value = wijmo.DateTime.fromDateTime(sender.value, inputDateTime.value); }; function inputDateTime_ValueChanged(sender) { var inputDate = wijmo.Control.getControl("#iditInputDate"); var inputTime = wijmo.Control.getControl("#iditInputTime"); inputDate.value = wijmo.DateTime.fromDateTime(sender.value, inputDate.value); inputTime.value = wijmo.DateTime.fromDateTime(inputTime.value, sender.value); document.getElementById('iditSelectedValue').innerHTML = wijmo.Globalize.format(sender.value, 'MMM dd, yyyy h:mm:ss tt'); };
using Microsoft.AspNetCore.Mvc; using Input101.Models; namespace Input101.Controllers { public class HomeController : Controller { public IActionResult Index() { return View(); } } }

Result (live):

Selected Date & Time:

ListBox

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 <c1-items-source></c1-items-source> tag to bind the source-collection property in order to use the control.

The example below allows you to select an item within the ListBox control, and also displays the control's selected-index and selected-value properties.

<div> <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>
$(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; } };
using Microsoft.AspNetCore.Mvc; using Input101.Models; namespace Input101.Controllers { public class HomeController : Controller { public IActionResult Index() { return View(new InputModel()); } } }

Result (live):

selectedIndex:

selectedValue:

InputNumber

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 value property.

In addition to the value property, the InputNumber control offers several other properties that can be used to alter its behavior, such as:

The example below demonstrates how to use all of these properties.

<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 is-required="false"</label> <c1-input-number id="inInputNumber4" placeholder="Enter a number..." is-required="false" value="null"> </c1-input-number> </div>
using Microsoft.AspNetCore.Mvc; using Input101.Models; namespace Input101.Controllers { public class HomeController : Controller { public IActionResult Index() { return View(); } } }

Result (live):

InputMask

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 value and mask properties. Like the other MVC input controls, the value property specifies the value for the InputMask control. The mask property specifies the control's mask and supports a combination of the following characters:

0
Digit.
9
Digit or space.
#
Digit, sign, or space.
L
Letter.
l
Letter or space.
A
Alphanumeric.
a
Alphanumeric or space.
.
Localized decimal point.
,
Localized thousand separator.
:
Localized time separator.
/
Localized date separator.
$
Localized currency symbol.
<
Converts characters that follow to lowercase.
>
Converts characters that follow to uppercase.
|
Disables case conversion.
\
Escapes any character, turning it into a literal.
All others
Literals.

The examples below demonstrates how to use the value and mask properties with the InputMask, InputDate, and InputTime controls.

<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="MM/dd/yyyy" 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="hh:mm tt" mask="00:00 >LL" step="15"> </c1-input-time> </div>
// 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'); };
using Microsoft.AspNetCore.Mvc; using Input101.Models; namespace Input101.Controllers { public class HomeController : Controller { public IActionResult Index() { return View(); } } }

Result (live):

Menu

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 <c1-items-source></c1-items-source> tag similar to the ComboBox. To specify the text displayed on the Menu, you can set the header property.

The Menu control offers two ways to handle user selections, specifying a command on each menu item and the item-clicked event. Unlike the item-clicked event, commands are objects that implement two methods:

The example below demonstrates how to use both approaches.

<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>
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 >= 0 && val <= 1; }; return false; };
using Microsoft.AspNetCore.Mvc; using Input101.Models; namespace Input101.Controllers { public class HomeController : Controller { public IActionResult Index() { return View(); } } }

Result (live):