This section briefly explains about how to include a default ColorPicker in your ASP.NET MVC application. You can refer ASP.NET MVC Getting Started documentation page for introduction part of the system requirements and configure the common specifications.
We are going to render ColorPicker
component in Index.cshtml page.
// To render ColorPicker.
@Html.EJS().ColorPicker("element").Render()
public ActionResult Index()
{
return View();
}
Output be like the below.
After successful compilation of your application, simply press F5
to run the application.
The following example shows a default rendering of ColorPicker.
<div class='wrap'>
<h4>Choose color</h4>
@Html.EJS().ColorPicker("element").Render()
</div>
<style>
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
</style>
public ActionResult Default()
{
return View();
}
By default, the ColorPicker will be rendered using SplitButton and open the pop-up to access the ColorPicker. To
render the ColorPicker container alone and to access it directly, render it as inline. It can be achieved by setting the inline
property to true
.
The following sample shows the inline type rendering of ColorPicker.
<div class='wrap'>
<h4>Choose color</h4>
@Html.EJS().ColorPicker("element").Inline(true).Render()
</div>
<style>
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
</style>
public ActionResult Inline()
{
return View();
}
The
showButtons
property is disabled in this sample because the control buttons are not needed for inline type. To know about the control buttons functionality, refer to theshowButtons
sample.