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)
Here how it is work: add Form in Html with a hidden input and submet button.
<form asp-controller="Home" asp-action="SaveDetails" method="post">
<input type="hidden" id="FreeTimeValues" name="FreeTime" value="" />
<input id="Submit1" type="submit" name="submet" value="submit" />
</form>
Then in Javascript add a global variable.
var freeTimeObj = @Model.Free_timeJson;
Next in the end of changeColor function add this:
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);
//----------------Add this-----------------
//Change the the cell value of the global variable freeTimeObj
freeTimeObj[row][col] = Number(radioButton.value);
//Then Deserialize the freeTimeObj and save it as string in the hidden input element
document.getElementById("FreeTimeValues").value = JSON.stringify(freeTimeObj);
}
}
And in controller Add SaveDetails method we used it in the form asp-action (Which is SaveDetails).
[HttpPost]
public IActionResult SaveDetails(string FreeTime)
{
//Deserialize the string FreeTime to change the array values
arrayObj.Free_timeJson = FreeTime;
//Do the database operation here
return View(arrayObj);
}