英文:
Getting a 2D array or Json strip from a page to a controller asp.net core mvc
问题
以下是翻译好的部分:
页面部分:
<p>指定可用时间:</p>
<div>
<div>
<p>
<span style="color:red"><input type="radio" name="radioValue" value="0" onclick="changeRadioButtonColor(this)" />忙碌</span><br />
<span style="color:green"><input type="radio" name="radioValue" value="1" onclick="changeRadioButtonColor(this)" />个别课程的空闲时间</span><br />
<span style="color:orange"><input type="radio" name="radioValue" value="2" onclick="changeRadioButtonColor(this)" />群体课程的空闲时间</span><br />
</p>
</div>
<p>上课时间:</p>
<table border="1" style="padding:2px;">
<thead>
<tr>
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</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>
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);
}
}
请注意,这只是页面的一部分,仅包括HTML和JavaScript部分的翻译。有关控制器部分的翻译,请提供更多上下文或详细信息。
英文:
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
得分: 1
以下是翻译好的代码部分:
这是它的工作原理:
在 HTML 中添加一个带有隐藏输入和提交按钮的表单。
<form asp-controller="Home" asp-action="SaveDetails" method="post">
<input type="hidden" id="FreeTimeValues" name="FreeTime" value="" />
<input id="Submit1" type="submit" name="submit" value="提交" />
</form>
然后在 JavaScript 中添加一个全局变量。
var freeTimeObj = @Model.Free_timeJson;
接下来,在 changeColor 函数的末尾添加以下内容:
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);
//----------------添加这部分-----------------
// 更改全局变量 freeTimeObj 的单元格值
freeTimeObj[row][col] = Number(radioButton.value);
// 然后将 freeTimeObj 反序列化并将其保存为字符串放入隐藏输入元素中
document.getElementById("FreeTimeValues").value = JSON.stringify(freeTimeObj);
}
}
并在控制器中添加 SaveDetails 方法,我们在表单中使用了 asp-action(即 SaveDetails)。
[HttpPost]
public IActionResult SaveDetails(string FreeTime)
{
// 反序列化字符串 FreeTime 以更改数组值
arrayObj.Free_timeJson = FreeTime;
// 在此执行数据库操作
return View(arrayObj);
}
英文:
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);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论