通过选中 razor 页面中的框来分配值

Question

我正在制作一个用于在线考试的网络应用程序，在我写完问题和答案后，我想 select 通过选中复选框来获得正确答案。 [正确答案][1] 将与选中的答案具有相同的值，但我不知道如何使其出现在[问题列表][2] 或[数据库][3] 中。

模型变量：

public string question{get;set;}
public string asnwer1{get;set;}
public string answer2{get;set;}
public string answer3{get;set;}
public string answer4{get;set;}
public string rightanswer{get;set;}

创建问题页面 cshtml：

Intrebare = Question | Optiune = Answer | Raspuns = Right Answer.

<div class="form-group">
            <label asp-for="AplicatieIntrebare.Intrebare" class="control-label"></label>
            <input asp-for="AplicatieIntrebare.Intrebare" class="form-control" />
            <span asp-validation-for="AplicatieIntrebare.Intrebare" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="AplicatieIntrebare.Optiune1" class="control-label"></label>
            <input asp-for="AplicatieIntrebare.Optiune1" class="form-control" />
            <span asp-validation-for="AplicatieIntrebare.Optiune1" class="text-danger"></span>
            <input id="Checkbox1"  type="checkbox" />
        </div>
        <div class="form-group">
            <label asp-for="AplicatieIntrebare.Optiune2" class="control-label"></label>
            <input asp-for="AplicatieIntrebare.Optiune2" class="form-control" />
            <span asp-validation-for="AplicatieIntrebare.Optiune2" class="text-danger"></span>
            <input id="Checkbox2" type="checkbox" />
        </div>
        <div class="form-group">
            <label asp-for="AplicatieIntrebare.Optiune3" class="control-label"></label>
            <input asp-for="AplicatieIntrebare.Optiune3" class="form-control" />
            <span asp-validation-for="AplicatieIntrebare.Optiune3" class="text-danger"></span>
            <input id="Checkbox3" type="checkbox" />
        </div>
        <div class="form-group">
            <label asp-for="AplicatieIntrebare.Optiune4" class="control-label"></label>
            <input asp-for="AplicatieIntrebare.Optiune4" class="form-control" />
            <span asp-validation-for="AplicatieIntrebare.Optiune4" class="text-danger"></span>
            <input id="Checkbox4" type="checkbox" />
        </div>

谢谢！ [1]:https://i.stack.imgur.com/MRUqr.png [2]:https://i.stack.imgur.com/sgnst.png [3]:https://i.stack.imgur.com/ztIIc.png

Answer 1

如果你想在复选框被选中时绑定Raspuns，你可以用asp-for="AplicatieIntrebare.Raspuns"添加一个隐藏的输入，并且在发布表单之前，用class="form-group"迭代div，然后检查如果 div 中的复选框是 checked.If 那么，将隐藏输入值设置为 div.Here 中的输入值是一个演示：

cshtml:

<form method="post" id="myform">

    <div class="form-group">
        <label asp-for="AplicatieIntrebare.Intrebare" class="control-label"></label>
        <input asp-for="AplicatieIntrebare.Intrebare" class="form-control" />
        <span asp-validation-for="AplicatieIntrebare.Intrebare" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="AplicatieIntrebare.Optiune1" class="control-label"></label>
        <input asp-for="AplicatieIntrebare.Optiune1" class="form-control" />
        <span asp-validation-for="AplicatieIntrebare.Optiune1" class="text-danger"></span>
        <input id="Checkbox1" type="checkbox" />
    </div>
    <div class="form-group">
        <label asp-for="AplicatieIntrebare.Optiune2" class="control-label"></label>
        <input asp-for="AplicatieIntrebare.Optiune2" class="form-control" />
        <span asp-validation-for="AplicatieIntrebare.Optiune2" class="text-danger"></span>
        <input id="Checkbox2" type="checkbox" />
    </div>
    <div class="form-group">
        <label asp-for="AplicatieIntrebare.Optiune3" class="control-label"></label>
        <input asp-for="AplicatieIntrebare.Optiune3" class="form-control" />
        <span asp-validation-for="AplicatieIntrebare.Optiune3" class="text-danger"></span>
        <input id="Checkbox3" type="checkbox" />
    </div>
    <div class="form-group">
        <label asp-for="AplicatieIntrebare.Optiune4" class="control-label"></label>
        <input asp-for="AplicatieIntrebare.Optiune4" class="form-control" />
        <span asp-validation-for="AplicatieIntrebare.Optiune4" class="text-danger"></span>
        <input id="Checkbox4" type="checkbox" />
    </div>
    <input type="submit" value="submit" />
    <input asp-for="AplicatieIntrebare.Raspuns" hidden />
</form>
@section scripts {
    <script>
        $("#myform").submit(function () {
            $(".form-group").each(function (index, element) {
                if ($(element).children("input[type='checkbox']").prop("checked")) {
                    $("#AplicatieIntrebare_Raspuns").attr("value", $(element).children("input[type='text']").val());
                }
                
            })
        })
    </script> 
}

cshtml.cs:

[BindProperty]
        public AplicatieIntrebare AplicatieIntrebare { get; set; }
        public void OnGet()
        {
            AplicatieIntrebare = new AplicatieIntrebare { Intrebare = "What's my dog's name?", Optiune1 = "Jerry", Optiune2 = "Spot", Optiune3 = "Rex", Optiune4 = "Max" };
        }
        public void OnPost()
        {
            
        }

结果：

通过选中 razor 页面中的框来分配值

Assigning a value by checking a box in razor pages

checkbox

web-applications

asp.net-core

razor-pages