Всем привет друзья. Как Мне передать код цвета в контроллер? Хочу хранить цвет в базе данных, дальше уже как нибудь использовать беря из базы данных указаный цвет. Возможно не совсем правильное решение хранить в строке, если кто подскажет более оптимальное решение буду благодарен
(function( $ ) {
$.fn.colorPick = function(config) {
return this.each(function() {
new $.colorPick(this, config || {});
});
};
$.colorPick = function (element, options) {
options = options || {};
this.options = $.extend({}, $.fn.colorPick.defaults, options);
if(options.str) {
this.options.str = $.extend({}, $.fn.colorPick.defaults.str, options.str);
}
$.fn.colorPick.defaults = this.options;
this.color = this.options.initialColor.toUpperCase();
this.element = $(element);
var dataInitialColor = this.element.data('initialcolor');
if (dataInitialColor) {
this.color = dataInitialColor;
this.appendToStorage(this.color);
}
var uniquePalette = [];
$.each($.fn.colorPick.defaults.palette.map(function(x){ return x.toUpperCase() }), function(i, el){
if($.inArray(el, uniquePalette) === -1) uniquePalette.push(el);
});
this.palette = uniquePalette;
return this.element.hasClass(this.options.pickrclass) ? this : this.init();
};
$.fn.colorPick.defaults = {
'initialColor': '#3498db',
'paletteLabel': 'Цвета:',
'allowRecent': true,
'recentMax': 5,
'allowCustomColor': false,
'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1", "#bdc3c7", "#95a5a6", "#7f8c8d"],
'onColorSelected': function() {
this.element.css({'backgroundColor': this.color, 'color': this.color});
}
};
$.colorPick.prototype = {
init : function(){
var self = this;
var o = this.options;
$.proxy($.fn.colorPick.defaults.onColorSelected, this)();
this.element.click(function(event) {
if (event.target != event.currentTarget){
return;
}
var offset = $(self.element).offset();
event.preventDefault();
self.show(self.element, event.pageX - offset.left, event.pageY - offset.top);
$('.customColorHash').val(self.color);
$('.colorPickButton').click(function(event) {
self.color = $(event.target).attr('hexValue');
self.appendToStorage($(event.target).attr('hexValue'));
self.hide();
$.proxy(self.options.onColorSelected, self)();
return false;
});
$('.customColorHash').click(function(event) {
return false;
}).keyup(function (event) {
var hash = $(this).val();
if (hash.indexOf('#') !== 0) {
hash = "#"+hash;
}
if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hash)) {
self.color = hash;
self.appendToStorage(hash);
$.proxy(self.options.onColorSelected, self)();
$(this).removeClass('error');
} else {
$(this).addClass('error');
}
});
return false;
}).blur(function() {
self.element.val(self.color);
$.proxy(self.options.onColorSelected, self)();
self.hide();
return false;
});
$(document).on('click', function(event) {
if ($.contains(self.element[0], event.target)){
return;
}
self.hide();
return true;
});
return this;
},
appendToStorage: function(color) {
if ($.fn.colorPick.defaults.allowRecent === true) {
var storedColors = JSON.parse(localStorage.getItem("colorPickRecentItems"));
if (storedColors == null) {
storedColors = [];
}
if ($.inArray(color, storedColors) == -1) {
storedColors.unshift(color);
storedColors = storedColors.slice(0, $.fn.colorPick.defaults.recentMax)
localStorage.setItem("colorPickRecentItems", JSON.stringify(storedColors));
}
}
},
show: function(element, left, top) {
$(".colorPickWrapper").remove();
$(element).prepend('<div class="colorPickWrapper"><div id="colorPick" style="display:none;top:' + top + 'px;left:' + left + 'px"><span>'+$.fn.colorPick.defaults.paletteLabel+'</span></div></div>');
jQuery.each(this.palette, function (index, item) {
$("#colorPick").append('<div class="colorPickButton" hexValue="' + item + '" style="background:' + item + '"></div>');
});
if ($.fn.colorPick.defaults.allowCustomColor === true) {
$("#colorPick").append('<input type="text" style="margin-top:5px" class="customColorHash" />');
}
if ($.fn.colorPick.defaults.allowRecent === true) {
$("#colorPick").append('<span style="margin-top:5px">Recent:</span>');
if (JSON.parse(localStorage.getItem("colorPickRecentItems")) == null || JSON.parse(localStorage.getItem("colorPickRecentItems")) == []) {
$("#colorPick").append('<div class="colorPickButton colorPickDummy"></div>');
} else {
jQuery.each(JSON.parse(localStorage.getItem("colorPickRecentItems")), function (index, item) {
$("#colorPick").append('<div class="colorPickButton" hexValue="' + item + '" style="background:' + item + '"></div>');
if (index == $.fn.colorPick.defaults.recentMax-1) {
return false;
}
});
}
}
$("#colorPick").fadeIn(200);
},
hide: function() {
$( ".colorPickWrapper" ).fadeOut(200, function() {
$(".colorPickWrapper").remove();
return this;
});
},
};
}( jQuery ));
create View
@using (Html.BeginForm("SaveUploadedFiles", "TrainingType", FormMethod.Post, new
{ enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
<div class="container">
<div class="row">
<div class="col-sm-6">
@*ColorPic*@
@Html.DisplayNameFor(model => model.Picker1)
<input type="hidden" class="form-control" value="@Model.Id" name="Picker1">
<div class="picker" id="picker1"></div>
@*ColorPic*@
</div>
</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 });
}
});
</script>
<br />
<div class="row">
<div class="col-12">
<button type="submit" class="btn btn-primary">Сохранить</button>
@Html.ActionLink("Назад", "Index", "", new { @class = "btn btn-primary" })
</div>
</div>
</div>
}
model
public class TrainingTypeViewModel : IEntityBase
{
[Display(Name = "Цвет")]
public string Collor { get; set; }
}
Controller
[HttpPost]
[ValidateAntiForgeryToken]
public override ActionResult Create(TraningViewModel traningModel)
{
traningModel.UserId = User.Identity.GetUserId<int>();
TraningViewModel model = _traningService.getUrl(traningModel);
if (ModelState.IsValid)
{
return base.Create(model);
}
return base.Create(traningModel);
}
#xxxxxx
или 3-4 значения типаbyte
чтобы получить rgba, в C# есть возможность из строки hex получить цветColorTranslator.FromHtml("#xxxxxx");