Search code examples
javascriptasp.netjsonasp.net-coreasp.net-core-mvc

Getting a 2D array or Json strip from a page to a controller asp.net core mvc


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)

Solution

  • 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);
            }