InputColor

InputColor

Overview

This sample shows the basic usage of the InputColor control.

Features

Overview

Unobtrusive Validation

Sample SourceDocumentation

Select a color

Settings

Description

This sample shows the basic usage of the InputColor control.

IndexController.cs Index.cshtml

using Microsoft.AspNetCore.Mvc; 
using Microsoft.AspNetCore.Http; 
using MvcExplorer.Models; 
using System.Collections.Generic; 
  
namespace MvcExplorer.Controllers 
{ 
    public partial class InputColorController : Controller 
    { 
        private readonly ControlOptions _optionModel = new ControlOptions 
        { 
            Options = new OptionDictionary 
            { 
                {"Show Color String",new OptionItem{ Values = new List<string> { "True", "False"}, CurrentValue = "False"}} 
            } 
        }; 
  
        public ActionResult Index(IFormCollection collection) 
        { 
            _optionModel.LoadPostData(collection); 
            ViewBag.DemoOptions = _optionModel; 
            return View(); 
        } 
    } 
} 

@{ 
    ControlOptions optionsModel = ViewBag.DemoOptions; 
    ViewBag.DemoSettings = true; 
} 
  
@section Scripts{ 
    <style> 
        .invalid-tooltip { 
            background-color: red; 
            color: yellow; 
            opacity: 0.9; 
            border-color: lightcoral; 
        } 
    </style> 
  
    <script>
        var _invalidTooltip; 
        c1.documentReady(function () { 
            _invalidTooltip = new wijmo.Tooltip(); 
            _invalidTooltip.cssClass = 'invalid-tooltip'; 
            _invalidTooltip.position = 11; 
            window.addEventListener('resize', function () { 
                if (_invalidTooltip.isVisible) { 
                    _invalidTooltip.hide(); 
                    onInvalidInput(); 
                } 
            }); 
        }) 
  
        function onInvalidInput(input, e) { 
            e && (e.cancel = true); 
            _invalidTooltip.show("#invalidInput", "@Html.Raw(InputColorRes.Index_Text2)"); 
        } 
  
        function onValueChanged(input, e) { 
            _invalidTooltip && _invalidTooltip.hide(); 
            changeColor(input, e); 
        } 
  
        function changeColor(sender, e) { 
            document.getElementById("image1").style.backgroundColor = sender.value; 
        } 
    </script>
} 
  
<p> 
  <img id="image1" src="@Href("~/Content/images/room.png")" /> 
</p> 
  
<div> 
    <label>@Html.Raw(InputColorRes.Index_Text0)</label> 
    <c1-input-color id="invalidInput" value="White" click-action="Toggle" invalid-input="onInvalidInput" value-changed="onValueChanged"
        show-color-string="@Convert.ToBoolean(optionsModel.Options["Show Color String"].CurrentValue)"></c1-input-color> 
</div> 
  
@section Settings{ 
    @await Html.PartialAsync("_OptionsMenu", optionsModel) 
} 
  
@section Description{ 
    @Html.Raw(InputColorRes.Index_Text1) 
} 

New Controls >

Popular Controls >

Data Management >

Data Visualization >

Navigation and Layout >

Document >

Scheduling >

Input and Editing >

Tutorials >

New Features >

Getting Started Guides >

Sample Applications >

Data Management

Data Visualization

Navigation and Layout

Document

Scheduling

Input and Editing

Tutorials

New Features

Getting Started Guides

Sample Applications

Overview

Features

Settings

Description