•  14-07-2023
  •  | 
  •  

Question

I got this textbox where i can put a hex-color to change the color in my application:

 @Html.TextBoxFor(m => m.Page.Color)

Is there a, not to complicated, way to change the textbox into a colorpicker?

For simplicity i try to add farbtastic to the layout, here is the full page:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <link rel="stylesheet" href="~/Content/farbtastic.css" type="text/css" />
    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="~/Scripts/farbtastic.js"></script>

    <script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $('#demo').hide();
        $('#picker').farbtastic('#color');
    });
    </script>
</head>
<body>
    <div id="demo" style="color: red; font-size: 1.4em">jQuery.js is not present. You must install jQuery in this folder for the demo to work.</div>

    <form action="" style="width: 400px;">
        <div class="form-item"><label for="color">Color:</label><input type="text" id="color" name="color" value="#123456" /></div><div id="picker"></div>
    </form>




    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

The <div id="demo" style="color: red; font-size: 1.4em">jQuery.js is not present. You must install jQuery in this folder for the demo to work.</div> Does not run so I suppose it works...However, no wheel is showing in my view, just the iputboxes. What could be wrong?

Was it helpful?

Solution

Download Farbtastic

Include farbtastic.js and farbtastic.css into your solution. Then have this html and jquery on page - 

<html>
<head>
 <title>Farbtastic</title>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="farbtastic.js"></script>
 <link rel="stylesheet" href="farbtastic.css" type="text/css" />

 <script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    $('#demo').hide();
    $('#picker').farbtastic('#color');
  });
 </script>

</head>
<body>
<h1>jQuery Color Picker: Farbtastic</h1>

<div id="demo" style="color: red; font-size: 1.4em">jQuery.js is not present. You must install jQuery in this folder for the demo to work.</div>

<form action="" style="width: 400px;">
  <div class="form-item"><label for="color">Color:</label><input type="text" id="color" name="color" value="#123456" /></div><div id="picker"></div>
</form>

</body>
</html>

Then when you run -

enter image description here

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top