ASP.NET MVC Controls - InputColor - Overview- C1 ASP.NET MVC

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 System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcExplorer.Models;
 
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(FormCollection collection)
        {
            IValueProvider data = collection;
            _optionModel.LoadPostData(data);
            ViewBag.DemoOptions = _optionModel;
            return View();
        }
    }
}

@using System.Drawing
 
@{
    ControlOptions optionsModel = ViewBag.DemoOptions;
    ViewBag.DemoSettings = true;
}
 
<p>
    <img id="image1" src="@Href("~/Content/images/room.png")" />
</p>
 
@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(Resources.InputColor.Index_Text2)");
        }
 
        function onValueChanged(input, e) {
            _invalidTooltip && _invalidTooltip.hide();
            changeColor(input, e);
        }
 
        function changeColor(sender, e) {
            document.getElementById("image1").style.backgroundColor = sender.value;
        }
    </script>
}
 
<div>
    <label>@Html.Raw(Resources.InputColor.Index_Text0)</label>
    @(Html.C1().InputColor()
        .Id("invalidInput")
        .Value(Color.White)
        .ShowColorString(Convert.ToBoolean(optionsModel.Options["Show Color String"].CurrentValue))
        .ClickAction(ClickAction.Toggle)
        .OnClientInvalidInput("onInvalidInput")
        .OnClientValueChanged("onValueChanged")
    )
</div>
 
@section Settings{
    @Html.Partial("_OptionsMenu", optionsModel)
}
 
@section Description{
    @Html.Raw(Resources.InputColor.Index_Text1)
}

New Controls >

Popular Controls >

Data Management >

Data Visualization >

Navigation and Layout >

Scheduling >

Documents >

Input and Editing >

Tutorials >

New Features >

Getting Started Guides >

Sample Applications >

Data Management

Data Visualization

Navigation and Layout

Scheduling

Documents

Input and Editing

Tutorials

New Features

Getting Started Guides

Sample Applications

InputColor

Overview

Features

Settings

Description