1

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)

1 Answer 1

1

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);
        }
1
  • 1
    I thank you very much!!! It works! The only thing left to do is to remove the lines: var input = document.getElementsByName("FreeTime[" + row + "," + col + "]")[0]; input.setAttribute("value", radioButton.value); Because I had a mistake because of them
    – Artem
    Commented May 29, 2023 at 8:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.