Soy principiante. Necesito cambiar el color de gris a rojo y el valor a true(rojo)/false(gris) de un glyphicon glyphicon-flag cuando hago click en el.

tengo la vista en c# (uso MVC ASP.NET). he probado varias cosas pero no consigo hacerlo bien.

uno de los fallos que tengo es que en $(this).data('content'); no coje los datos

cualquier ayuda estaria muy agradecida. Este es mi codigo.

c#

(nose cual es la simtaxis para en data-url llamar a la funcion del controlador)

   var isMarkedFlag = list.Type
              ?
              $@"<span href=""#"" class=""glyphicon glyphicon-flag"" id=""idMarkedFlag""  data-content=""{list.IsMarked}""
                 style=""font-size: 20px; float: left; color: grey; margin-left: 10px;"" 
                  data-html= ""{list.ReceivingId}""></span>"
              : "";

jqery

$(document).click('#markedFlag', function () {
var idMarkedFlag = $(this).data('content');
var receivingId = this.id;
if (idMarkedFlag == true) {
    $(this).css('background-color', 'red');
    idMarkedFlag = false;
} else {
    $(this).css('background-color', 'grey');
    idMarkedFlag = true;
}
var url = addCtoUrl('/MessageCenter/SaveReceivingAsync' + '?ReceivingId=' + receivingId + '&IsMarked=' + idMarkedFlag + '&CustomerMasterId=' + id);
$.ajax({
    type: 'POST',
    url: url,
    success: function () {
        $.noty.closeAll();
        noty({ text: 'Message updated!', layout: 'topCenter', type: 'warning' });
    }
});