Input Control Arquitecture

C1 MVC's input controls are composed of standard HTML elements. Many have an inner input element where the user can type, buttons used to show drop-down editors, or clickable/seletable areas.

All C1 MVC input controls were designed to make data-entry easy and effective by providing early validation whenever possible. Users cannot, for example, clear the content of any controls if the isRequired property is set to true, or type alphabetical characters in numeric input controls.

Most of C1 MVC's input controls have a set of common properties that reflect basic HTML attributes:

isRequired "required" attribute
isDisabled "disabled" attribute

The "is" prefix prevents conflicts in markup between the names of control properties and HTML attributes.

Input controls based on HTML input elements have more properties in common:

inputElement reference to the inner input element
isReadOnly "readonly" attribute
text formatted value
value parsed text
format format used to convert between text and value

And controls used to input numbers, dates, and times have the folowing properties in common:

min minimum value
max maximum value
step increment applied with mouse wheel or spinner buttons

// This file locates: "Content/css/Lesson/C1Input/Architecture.css".
ul {
  padding-left: 15px;
}
.demo-control li {
  list-style-type: square;
}
.detail {
  opacity: .5;
  font-style: italic;
}
  .detail:before {
    content: "("
  }
  .detail:after {
    content: ")"
  }

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

<h1>
    @Html.Raw(Resources.C1Input.Architecture_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.Architecture_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.Architecture_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Input.Architecture_Text3)
</p>
<ul>
    <li>@Html.Raw(Resources.C1Input.Architecture_Text4)</li>
    <li>@Html.Raw(Resources.C1Input.Architecture_Text5)</li>
</ul>
<p>
    @Html.Raw(Resources.C1Input.Architecture_Text6)
</p>
 
<p>
    @Html.Raw(Resources.C1Input.Architecture_Text7)
</p>
<ul>
    <li>@Html.Raw(Resources.C1Input.Architecture_Text8)</li>
    <li>@Html.Raw(Resources.C1Input.Architecture_Text9)</li>
    <li>@Html.Raw(Resources.C1Input.Architecture_Text10)</li>
    <li>@Html.Raw(Resources.C1Input.Architecture_Text11)</li>
    <li>@Html.Raw(Resources.C1Input.Architecture_Text12)</li>
</ul>
 
<p>
    @Html.Raw(Resources.C1Input.Architecture_Text13)
</p>
<ul>
    <li>@Html.Raw(Resources.C1Input.Architecture_Text14)</li>
    <li>@Html.Raw(Resources.C1Input.Architecture_Text15)</li>
    <li>@Html.Raw(Resources.C1Input.Architecture_Text16)</li>
</ul>