从页面获取一个2D数组或JSON字符串到ASP.NET Core MVC控制器。

huangapple
go评论102阅读模式
英文:

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

问题

以下是翻译好的部分：

页面部分：

  1. <p>指定可用时间：</p>
  2. <div>
  3.     <div>
  4.         <p>
  5.             <span style="color:red"><input type="radio" name="radioValue" value="0" onclick="changeRadioButtonColor(this)" />忙碌</span><br />
  6.             <span style="color:green"><input type="radio" name="radioValue" value="1" onclick="changeRadioButtonColor(this)" />个别课程的空闲时间</span><br />
  7.             <span style="color:orange"><input type="radio" name="radioValue" value="2" onclick="changeRadioButtonColor(this)" />群体课程的空闲时间</span><br />
  8.         </p>
  9.     </div>
  11.     <p>上课时间：</p>
  12.     <table border="1" style="padding:2px;">
  13.         <thead>
  14.             <tr>
  15.                 <th></th>
  16.                 <th>星期一</th>
  17.                 <th>星期二</th>
  18.                 <th>星期三</th>
  19.                 <th>星期四</th>
  20.                 <th>星期五</th>
  21.                 <th>星期六</th>
  22.                 <th>星期日</th>
  23.             </tr>
  24.         </thead>
  25.         <tbody>
  26.             @for (int i = 0; i < Model.Free_time.GetLength(1); i++)
  27.             {
  28.                 <tr>
  29.                     <th>@(Math.Floor(8 + (i * 0.5)).ToString("0")):@((i % 2 == 0) ? "00" : "30")</th>
  31.                     @for (int j = 0; j < Model.Free_time.GetLength(0); j++)
  32.                     {
  33.                         int value = Model.Free_time[j, i];
  34.                         string color = "";
  35.                         switch (value)
  36.                         {
  37.                             case 0:
  38.                                 color = "red";
  39.                                 break;
  40.                             case 1:
  41.                                 color = "green";
  42.                                 break;
  43.                             case 2:
  44.                                 color = "orange";
  45.                                 break;
  46.                         }
  48.                         <td>
  49.                             <input type="hidden" name="FreeTime[@j,@i]" value="@value" />
  50.                             <input type="button" name="buttonValue" onclick="changeColor(this, @j, @i, @value)" class="centered-button" style="background-color: @color" />
  51.                         </td>
  52.                     }
  53.                 </tr>
  54.             }
  55.         </tbody>
  56.     </table>
  57. </div>

JavaScript部分：

  1. function changeRadioButtonColor(radioButton) {
  2.     var selectedColor = radioButton.parentElement.style.color;
  3.     var selectedButton = document.querySelector('input[name="buttonValue"]:checked');
  4.     if (selectedButton) {
  5.         var row = selectedButton.getAttribute('data-row');
  6.         var col = selectedButton.getAttribute('data-col');
  7.         var value = radioButton.value;
  8.         selectedButton.style.backgroundColor = selectedColor;
  9.     }
  10. }
  12. function changeColor(button, row, col, value) {
  13.     var radioButton = document.querySelector('input[name="radioValue"]:checked');
  14.     if (radioButton) {
  15.         var selectedColor = radioButton.parentElement.style.color;
  16.         button.style.backgroundColor = selectedColor;
  17.         var input = document.getElementsByName("FreeTime[" + row + "," + col + "]")[0];
  18.         input.setAttribute("value", radioButton.value);
  19.     }
  20. }

请注意，这只是页面的一部分，仅包括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:

  1.     public const int ROW_Free_time = 30;
  2. public const int COL_Free_time = 7;
  3. [NotMapped]
  4. [JsonIgnore] 
  5. public int[,] Free_time { get; set; } = new int[COL_Free_time, ROW_Free_time];
  6. [JsonProperty(nameof(Free_time))] 
  7. public string Free_timeJson
  8. {
  9. get =&gt; JsonConvert.SerializeObject(Free_time);
  10. set =&gt; Free_time = JsonConvert.DeserializeObject&lt;int[,]&gt;(value);
  11. }

page:

  1. &lt;div&gt;
  2. &lt;p&gt;Indicate available hours:&lt;/p&gt;
  3. &lt;div&gt;
  4. &lt;div&gt;
  5. &lt;p&gt;
  6. &lt;span style=&quot;color:red&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;radioValue&quot; value=&quot;0&quot; onclick=&quot;changeRadioButtonColor(this)&quot; /&gt;Busy&lt;/span&gt;&lt;br /&gt;
  7. &lt;span style=&quot;color:green&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;radioValue&quot; value=&quot;1&quot; onclick=&quot;changeRadioButtonColor(this)&quot; /&gt;Free time for individual lessons&lt;/span&gt;&lt;br /&gt;
  8. &lt;span style=&quot;color: orange&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;radioValue&quot; value=&quot;2&quot; onclick=&quot;changeRadioButtonColor(this)&quot; /&gt;Free time for group classes&lt;/span&gt;&lt;br /&gt;
  9. &lt;/p&gt;
  10. &lt;/div&gt;
  11. &lt;p&gt;Class time:&lt;/p&gt;
  12. &lt;table border=&quot;1&quot; style=&quot;padding:2px;&quot;&gt;
  13. &lt;thead&gt;
  14. &lt;tr&gt;
  15. &lt;th&gt;&lt;/th&gt;
  16. &lt;th&gt;Monday&lt;/th&gt;
  17. &lt;th&gt;Tuesday&lt;/th&gt;
  18. &lt;th&gt;Wednesday&lt;/th&gt;
  19. &lt;th&gt;Thursday&lt;/th&gt;
  20. &lt;th&gt;Friday&lt;/th&gt;
  21. &lt;th&gt;Saturday&lt;/th&gt;
  22. &lt;th&gt;Sunday&lt;/th&gt;
  23. &lt;/tr&gt;
  24. &lt;/thead&gt;
  25. &lt;tbody&gt;
  26. @for (int i = 0; i &lt; Model.Free_time.GetLength(1); i++)
  27. {
  28. &lt;tr&gt;
  29. &lt;th&gt;@(Math.Floor(8 + (i * 0.5)).ToString(&quot;0&quot;)):@((i % 2 == 0) ? &quot;00&quot; : &quot;30&quot;)&lt;/th&gt;
  30. @for (int j = 0; j &lt; Model.Free_time.GetLength(0); j++)
  31. {
  32. int value = Model.Free_time[j, i];
  33. string color = &quot;&quot;;
  34. switch (value)
  35. {
  36. case 0:
  37. color = &quot;red&quot;;
  38. break
  39. case 1:
  40. color = &quot;green&quot;;
  41. break
  42. case 2:
  43. color = &quot;orange&quot;;
  44. break
  45. }
  46. &lt;td&gt;
  47. &lt;input type=&quot;hidden&quot; name=&quot;FreeTime[@j,@i]&quot; value=&quot;@value&quot; /&gt;
  48. &lt;input type=&quot;button&quot; name=&quot;buttonValue&quot; onclick=&quot;changeColor(this, @j, @i, @value)&quot; class=&quot;centered-button&quot; style=&quot;background-color: @color&quot; /&gt;
  49. &lt;/td&gt;
  50. }
  51. &lt;/tr&gt;
  52. }
  53. &lt;/tbody&gt;
  54. &lt;/table&gt;
  55. &lt;/div&gt;
  56. &lt;/div&gt;

javascript:

  1. function changeRadioButtonColor(radioButton) {
  2. var selectedColor = radioButton.parentElement.style.color;
  3. var selectedButton = document.querySelector(&#39;input[name=&quot;buttonValue&quot;]:checked&#39;);
  4. if (selectedButton) {
  5. var row = selectedButton.getAttribute(&#39;data-row&#39;);
  6. var col = selectedButton.getAttribute(&#39;data-col&#39;);
  7. var value = radioButton.value;
  8. selectedButton.style.backgroundColor = selectedColor;
  9. }
  10. }
  11. function changeColor(button, row, col, value) {
  12. var radioButton = document.querySelector(&#39;input[name=&quot;radioValue&quot;]:checked&#39;);
  13. if (radioButton) {
  14. var selectedColor = radioButton.parentElement.style.color;
  15. button.style.backgroundColor = selectedColor;
  16. var input = document.getElementsByName(&quot;FreeTime[&quot; + row + &quot;,&quot; + col + &quot;]&quot;)[0];
  17. input.setAttribute(&quot;value&quot;, radioButton.value);
  18. }

}

controller:
(I do not know)

  1.     public async Task&lt;IActionResult&gt; AccountEditTutor(Tutor Tutor)
  2. or
  3. public async Task&lt;IActionResult&gt; AccountEditTutor(Tutor Tutor, int[,] FreeTime)

答案1

得分: 1

以下是翻译好的代码部分：

  1. 这是它的工作原理：
  2. 在 HTML 中添加一个带有隐藏输入和提交按钮的表单。
  4. <form asp-controller="Home" asp-action="SaveDetails" method="post">
  5.     <input type="hidden" id="FreeTimeValues" name="FreeTime" value="" />
  6.     <input id="Submit1" type="submit" name="submit" value="提交" />
  7. </form>
  9. 然后在 JavaScript 中添加一个全局变量。
  11. var freeTimeObj = @Model.Free_timeJson;
  13. 接下来，在 changeColor 函数的末尾添加以下内容：
  15. function changeColor(button, row, col, value) {
  16.     var radioButton = document.querySelector('input[name="radioValue"]:checked');
  17.     if (radioButton) {
  18.         var selectedColor = radioButton.parentElement.style.color;
  19.         button.style.backgroundColor = selectedColor;
  21.         var input = document.getElementsByName("FreeTime[" + row + "," + col + "]")[0];
  22.         input.setAttribute("value", radioButton.value);
  24.         //----------------添加这部分-----------------
  25.         // 更改全局变量 freeTimeObj 的单元格值
  26.         freeTimeObj[row][col] = Number(radioButton.value);
  27.         // 然后将 freeTimeObj 反序列化并将其保存为字符串放入隐藏输入元素中
  28.         document.getElementById("FreeTimeValues").value = JSON.stringify(freeTimeObj);
  29.     }
  30. }
  31. 并在控制器中添加 SaveDetails 方法，我们在表单中使用了 asp-action（即 SaveDetails）。
  33. [HttpPost]
  34. public IActionResult SaveDetails(string FreeTime)
  35. {
  36.     // 反序列化字符串 FreeTime 以更改数组值
  37.     arrayObj.Free_timeJson = FreeTime;
  38.     // 在此执行数据库操作
  39.     return View(arrayObj);
  40. }
英文:

Here how it is work:
add Form in Html with a hidden input and submet button.

  1. &lt;form asp-controller=&quot;Home&quot; asp-action=&quot;SaveDetails&quot; method=&quot;post&quot;&gt;
  2. &lt;input type=&quot;hidden&quot; id=&quot;FreeTimeValues&quot; name=&quot;FreeTime&quot; value=&quot;&quot; /&gt;
  3. &lt;input id=&quot;Submit1&quot; type=&quot;submit&quot; name=&quot;submet&quot; value=&quot;submit&quot; /&gt;
  4. &lt;/form&gt;

Then in Javascript add a global variable.

  1. var freeTimeObj =  @Model.Free_timeJson;

Next in the end of changeColor function add this:

  1. function changeColor(button, row, col, value) {
  2. var radioButton = document.querySelector(&#39;input[name=&quot;radioValue&quot;]:checked&#39;);
  3. if (radioButton) {
  4. var selectedColor = radioButton.parentElement.style.color;
  5. button.style.backgroundColor = selectedColor;
  6. var input = document.getElementsByName(&quot;FreeTime[&quot; + row + &quot;,&quot; + col + &quot;]&quot;)[0];
  7. input.setAttribute(&quot;value&quot;, radioButton.value);
  8. //----------------Add this-----------------
  9. //Change the the cell value of the global variable freeTimeObj
  10. freeTimeObj[row][col] = Number(radioButton.value);
  11. //Then Deserialize the freeTimeObj and save it as string in the hidden input element 
  12. document.getElementById(&quot;FreeTimeValues&quot;).value = JSON.stringify(freeTimeObj);
  13. }
  14. }

And in controller Add SaveDetails method we used it in the form asp-action (Which is SaveDetails).

  1. [HttpPost]
  2. public IActionResult SaveDetails(string FreeTime)
  3. {
  4. //Deserialize the string FreeTime to change the array values
  5. arrayObj.Free_timeJson = FreeTime;
  6. //Do the database operation here
  7. return View(arrayObj);
  8. }

huangapple
  • 本文由 发表于 2023年5月29日 01:51:44
  • 转载请务必保留本文链接：https://go.coder-hub.com/76352833.html
  • asp.net
  • asp.net-core
  • asp.net-core-mvc
  • javascript
  • json
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定