I need to complete the following task: There is a table with buttons on the page. Each button is an element of a two-dimensional array. The user selects a radio button and then clicks on the buttons from the table. The button changes its color and gets the corresponding value (0 - red, 1 - green, 2 - orange). I need to transfer these values later to the controller and save them to the database. But I can't get those values.
model:
public const int ROW_Free_time = 30;
public const int COL_Free_time = 7;
[NotMapped]
[JsonIgnore]
public int[,] Free_time { get; set; } = new int[COL_Free_time, ROW_Free_time];
[JsonProperty(nameof(Free_time))]
public string Free_timeJson
{
get => JsonConvert.SerializeObject(Free_time);
set => Free_time = JsonConvert.DeserializeObject<int[,]>(value);
}
page:
<div>
<p>Indicate available hours:</p>
<div>
<div>
<p>
<span style="color:red"><input type="radio" name="radioValue" value="0" onclick="changeRadioButtonColor(this)" />Busy</span><br />
<span style="color:green"><input type="radio" name="radioValue" value="1" onclick="changeRadioButtonColor(this)" />Free time for individual lessons</span><br />
<span style="color: orange"><input type="radio" name="radioValue" value="2" onclick="changeRadioButtonColor(this)" />Free time for group classes</span><br />
</p>
</div>
<p>Class time:</p>
<table border="1" style="padding:2px;">
<thead>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody>
@for (int i = 0; i < Model.Free_time.GetLength(1); i++)
{
<tr>
<th>@(Math.Floor(8 + (i * 0.5)).ToString("0")):@((i % 2 == 0) ? "00" : "30")</th>
@for (int j = 0; j < Model.Free_time.GetLength(0); j++)
{
int value = Model.Free_time[j, i];
string color = "";
switch (value)
{
case 0:
color = "red";
break
case 1:
color = "green";
break
case 2:
color = "orange";
break
}
<td>
<input type="hidden" name="FreeTime[@j,@i]" value="@value" />
<input type="button" name="buttonValue" onclick="changeColor(this, @j, @i, @value)" class="centered-button" style="background-color: @color" />
</td>
}
</tr>
}
</tbody>
</table>
</div>
</div>
javascript:
function changeRadioButtonColor(radioButton) {
var selectedColor = radioButton.parentElement.style.color;
var selectedButton = document.querySelector('input[name="buttonValue"]:checked');
if (selectedButton) {
var row = selectedButton.getAttribute('data-row');
var col = selectedButton.getAttribute('data-col');
var value = radioButton.value;
selectedButton.style.backgroundColor = selectedColor;
}
}
function changeColor(button, row, col, value) {
var radioButton = document.querySelector('input[name="radioValue"]:checked');
if (radioButton) {
var selectedColor = radioButton.parentElement.style.color;
button.style.backgroundColor = selectedColor;
var input = document.getElementsByName("FreeTime[" + row + "," + col + "]")[0];
input.setAttribute("value", radioButton.value);
}
}
controller: (I do not know)
public async Task<IActionResult> AccountEditTutor(Tutor Tutor)
or
public async Task<IActionResult> AccountEditTutor(Tutor Tutor, int[,] FreeTime)