颜色选择器无法为属性设置值答案

【问题标题】：colorpicker can't set value to property颜色选择器无法为属性设置值
【发布时间】：2020-12-02 13:17:15
【问题描述】：

您好，我正在尝试为我的页面添加颜色选择器。我下载了这个，我可以显示颜色选择器。我们正在使用 .net 核心。

The code我选择“colorpicker-picker-longlist”

我的cshtml

<div class="form-group row">
<label asp-for="UsColor" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">

//这种方式对我不起作用，但是当我将“name”更改为“id”时它起作用了 #ac725e #d06b64 #f83a22 #fa573c #ff7537 #ffad46 #42d692 #16a765 #7bd148 #b3dc6c #fbe983 #时尚165 #92e1c0 #9fe1e7 #9fc6e7 #4986e7 #9a9cff #b99aff #c2c2c2 #cabdbf #cca6ac #f691b2 #cd74e6 #a47ae2 当我将颜色属性放入获取控制器时，它会显示颜色。没关系，但是当我更改颜色并提交更改的值时，后控制器不会出现。

在帖子中

usViewModel.UsColor; comes null

【问题讨论】：

这和.Net core有什么关系？
我必须将所选颜色设置为模型属性

标签： javascript jquery asp.net-core color-picker

【解决方案1】：

首先，在div中无法识别asp-for，无法直接在view中用selected值修改model。如果想改变input的值，可以这样：

查看：

<div class="form-group row">
    <label asp-for="UsColor" class="col-sm-2 col-form-label">Color</label>
    <div class="col-sm-10">
        <input asp-for="UsColor"/>
        <div class="picker" id="picker1" />
    </div>
</div>

js:

$("#picker1").colorPick({
            'initialColor': '#8e44ad',
            'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1"],
            'onColorSelected': function () {
                console.log("The user has selected the color: " + this.color)
                this.element.css({ 'backgroundColor': this.color, 'color': this.color });
                $("#UsColor").val(this.color);
                return this.color;
            }
        });

结果：

如果你想在没有表单的情况下将值传递给动作，你可以使用 ajax：

js:

$("#picker1").colorPick({
            'initialColor': '#8e44ad',
            'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1"],
            'onColorSelected': function () {
                console.log("The user has selected the color: " + this.color)
                this.element.css({ 'backgroundColor': this.color, 'color': this.color });
               $.ajax({
                type: "POST",
                   url: '@Url.Action("ChangeColor", "Test")',
                   data: { "color": this.color }
                 }).done(function (data) {

                });
                return this.color;
            }
        });

测试控制器：

public IActionResult ChangeColor(string color) {
            return Ok();
        }

结果：

【讨论】：

感谢您的回答，它会有所帮助，但我必须发布所有表单数据
你能分享更多关于你的视图模型吗？你的意思是你想发布所有的模型数据来行动？
感谢您的 GIF 和您的支持。它帮助了我。我终于用新的颜色选择器做到了。我将 name 更改为 id 并且它可以工作。
不客气。你能把它标记为答案吗？

【解决方案2】：

请务必导入 js 和 css 文件，使用 jquery 1.12.4（在演示文件中提供），但它是旧版本。当然你必须使用更新的版本。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="/src/colorPick.js"></script>
    <link rel="stylesheet" href="../src/colorPick.css">
    <title>Document</title>
    <style>
        .picker {
            border-radius: 5px;
            width: 36px;
            height: 36px;
            cursor: pointer;
            -webkit-transition: all linear .2s;
            -moz-transition: all linear .2s;
            -ms-transition: all linear .2s;
            -o-transition: all linear .2s;
            transition: all linear .2s;
            border: thin solid #eee;
        }
        .picker:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<body>
<div class="picker" id="picker1"></div>
<div class="picker" id="picker2"></div>
<script>
    $("#picker1").colorPick({
        'initialColor' : '#8e44ad',
        'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1"],
        'onColorSelected': function() {
            console.log("The user has selected the color: " + this.color)
            this.element.css({'backgroundColor': this.color, 'color': this.color});
        }
    });

    $("#picker2").colorPick({
        'initialColor' : '#34495e',
        'palette': ["#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1"],
        'onColorSelected': function() {
            console.log("The user has selected the color: " + this.color)
            this.element.css({'backgroundColor': this.color, 'color': this.color});
        }
    });
</script>
  
</body>

文件可以从您提供的链接下载

【讨论】：

jquery 1.12是2016年制作的....最新版本是3.5
我包括了，但这段代码没有回答，它是一样的。我只需要将选定的颜色设置为模型 propeyer ，“UsColor”
jquery 用于下载的文件jqueryscript.net/other/… 但在演示中使用的是 3.1.1
我理解你，但我只需要将选定的颜色设置为属性，而这样做没有好处
可以获取picker的父级（form-group）： let pickerpare = $("#picker1").parent(".form-group");然后在 oncolorfunction 里面改变它的颜色 pickerpare.css({'backgroundColor': this.color, 'color': this.color});