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

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

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 =&gt; JsonConvert.SerializeObject(Free_time);
set =&gt; Free_time = JsonConvert.DeserializeObject&lt;int[,]&gt;(value);
}

page:

&lt;div&gt;
&lt;p&gt;Indicate available hours:&lt;/p&gt;
&lt;div&gt;
&lt;div&gt;
&lt;p&gt;
&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;
&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;
&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;
&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;Class time:&lt;/p&gt;
&lt;table border=&quot;1&quot; style=&quot;padding:2px;&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th&gt;Monday&lt;/th&gt;
&lt;th&gt;Tuesday&lt;/th&gt;
&lt;th&gt;Wednesday&lt;/th&gt;
&lt;th&gt;Thursday&lt;/th&gt;
&lt;th&gt;Friday&lt;/th&gt;
&lt;th&gt;Saturday&lt;/th&gt;
&lt;th&gt;Sunday&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
@for (int i = 0; i &lt; Model.Free_time.GetLength(1); i++)
{
&lt;tr&gt;
&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;
@for (int j = 0; j &lt; Model.Free_time.GetLength(0); j++)
{
int value = Model.Free_time[j, i];
string color = &quot;&quot;;
switch (value)
{
case 0:
color = &quot;red&quot;;
break
case 1:
color = &quot;green&quot;;
break
case 2:
color = &quot;orange&quot;;
break
}
&lt;td&gt;
&lt;input type=&quot;hidden&quot; name=&quot;FreeTime[@j,@i]&quot; value=&quot;@value&quot; /&gt;
&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;
&lt;/td&gt;
}
&lt;/tr&gt;
}
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;

javascript:

function changeRadioButtonColor(radioButton) {
var selectedColor = radioButton.parentElement.style.color;
var selectedButton = document.querySelector(&#39;input[name=&quot;buttonValue&quot;]:checked&#39;);
if (selectedButton) {
var row = selectedButton.getAttribute(&#39;data-row&#39;);
var col = selectedButton.getAttribute(&#39;data-col&#39;);
var value = radioButton.value;
selectedButton.style.backgroundColor = selectedColor;
}
}
function changeColor(button, row, col, value) {
var radioButton = document.querySelector(&#39;input[name=&quot;radioValue&quot;]:checked&#39;);
if (radioButton) {
var selectedColor = radioButton.parentElement.style.color;
button.style.backgroundColor = selectedColor;
var input = document.getElementsByName(&quot;FreeTime[&quot; + row + &quot;,&quot; + col + &quot;]&quot;)[0];
input.setAttribute(&quot;value&quot;, radioButton.value);
}

}

controller:
(I do not know)

    public async Task&lt;IActionResult&gt; AccountEditTutor(Tutor Tutor)
or
public async Task&lt;IActionResult&gt; 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.

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

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(&#39;input[name=&quot;radioValue&quot;]:checked&#39;);
if (radioButton) {
var selectedColor = radioButton.parentElement.style.color;
button.style.backgroundColor = selectedColor;
var input = document.getElementsByName(&quot;FreeTime[&quot; + row + &quot;,&quot; + col + &quot;]&quot;)[0];
input.setAttribute(&quot;value&quot;, 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(&quot;FreeTimeValues&quot;).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);
}

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

发表评论

匿名网友

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

确定