C# ASP.net核心web应用程序中的单选按钮

我正在尝试学习ASP.net核心（非常新），我正在尝试下面的场景

具有多项选择选项（想要有单选按钮，为每个部分选择一个选项） 只有一个正确的选择。 当我们在每次选择一个单选按钮后单击提交时，我需要以绿色突出显示正确的选择，以红色突出显示不正确的选择

我希望有一个OnClick，它将通过单击并执行此操作时正确的名称或值来确定。我已经检查了几个选项，但它们没有所有这些组合都正常工作

---

请建议使用ASP.net核心web应用程序执行此功能的最佳选项。

请给我一个示例，或者您可以尝试参考我的代码

显示单选按钮
请选择您的性别：

男性

女性

其他


请选择您的年龄：

0-30

31-60

61-100


$（“表格”）。提交（函数（）{
//警报（“已提交”）；
$（“body div[id^=question]input[type=radio]”）。每个（函数（即，e）{
如果（$（e）.is（“：checked”））
{
//将$（e）.attr（'value'）与您的结果进行比较
if（true）//正确答案
$（e）.parent（）.css（“背景色”、“绿色”）；
否则就错了
$（e）.parent（）.css（“背景色”、“红色”）；
}
})
返回false；
});

正如其他人所说，您可以使用

jquery

来完成

既然您提到了如何在核心中实现，我想您的数据来自代码背后的模型，对吗

因此，在我的示例中，我使用该模型传递问题索引、选项和正确答案的序列号

这是我的密码：

public class Question
    {
        public int QuestionNumber { set; get; }
        public IEnumerable<QuestionOption> Options { set; get; }
        public int RightAnswer { set; get; }
    }

    public class QuestionOption
    {
        public int Index { set; get; }
        public string Option { set; get; }

    }

公开课问题
{
公共整数问题编号{set；get；}
公共IEnumerable选项{set；get；}
public int RightAnswer{set；get；}
}
公共类问题选项
{
公共整数索引{set；get；}
公共字符串选项{set；get；}
}

控制器：

  public IActionResult Index()
        {
            List<Question> questions = new List<Question>()
            {
                 new  Question(){
                  QuestionNumber=1, Options= new List<QuestionOption> {
                   new QuestionOption(){  Index=1, Option="A"},
                   new QuestionOption(){  Index=2, Option="B"},
                   new QuestionOption(){  Index=3, Option="C"},
                  },
                   RightAnswer = 2
                 },
                 new  Question(){
                  QuestionNumber=2, Options= new List<QuestionOption> {
                   new QuestionOption(){  Index=1, Option="Kity"},
                   new QuestionOption(){  Index=2, Option="Lily"},
                   new QuestionOption(){  Index=3, Option="Jack"},
                  },
                   RightAnswer = 1
                 },
                  new  Question(){
                  QuestionNumber=3, Options= new List<QuestionOption> {
                   new QuestionOption(){  Index=1, Option="FF"},
                   new QuestionOption(){  Index=2, Option="LL"},
                   new QuestionOption(){  Index=3, Option="OO"},
                  },
                   RightAnswer = 3
                 },
            };
            return View(questions);
        }

public IActionResult Index（）
{
列表问题=新列表（）
{
新问题（{
问题编号=1，选项=新列表{
new QuestionOption（）{Index=1，Option=“A”}，
new QuestionOption（）{Index=2，Option=“B”}，
new QuestionOption（）{Index=3，Option=“C”}，
},
正确答案=2
},
新问题（{
问题编号=2，选项=新列表{
new QuestionOption（）{Index=1，Option=“Kity”}，
new QuestionOption（）{Index=2，Option=“Lily”}，
new QuestionOption（）{Index=3，Option=“Jack”}，
},
RightAnswer=1
},
新问题（{
问题编号=3，选项=新列表{
new QuestionOption（）{Index=1，Option=“FF”}，
new QuestionOption（）{Index=2，Option=“LL”}，
new QuestionOption（）{Index=3，Option=“OO”}，
},
正确答案=3
},
};
返回视图（问题）；
}

索引：

@model IEnumerable<WebApplication_core_mvc.Models.Question>
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section Scripts{

    <script>

        function CheckAnswer() {
    var myArray = [];
    @foreach (var d in Model)
    {
        @:myArray.push("@d.QuestionNumber");
    }
            for (var i = 0; i < myArray.length; i++) {
                var right = $("input[type='hidden'][name=" + myArray[i] + "]").val();
                $("input[type='radio'][name=" + myArray[i] + "]").parent().removeClass("right");
                $("input[type='radio'][name=" + myArray[i] + "]").parent().removeClass("wrong");
                $("input[type='radio'][name=" + myArray[i] + "]").each(function () {
                    if ($(this).is(":checked")) {
                        if ($(this).val() == right) {
                            $(this).parent().addClass("right")
                        } else {
                            $(this).parent().addClass("wrong");
                        }
                    }
                });
            }

    }
    </script>

}

<style>
    .right {
        background-color: green;
    }

    .wrong {
        background-color: red;
    }
</style>


<p>Select an answer: </p>

@foreach (var item in Model)
{
    <div class="row">
        <label>Question @item.QuestionNumber :</label>
        <div class="col-md-10">
            @foreach (var option in item.Options)
            {
                <input type="radio" value="@option.Index" name="@item.QuestionNumber" /> @option.Option
            }
            <input type="hidden" value="@item.RightAnswer" name="@item.QuestionNumber" />
        </div>
    </div>
}

<input type="button" value="Check" onclick="CheckAnswer()" />

@model IEnumerable
@{
ViewData[“标题”]=“索引”；
Layout=“~/Views/Shared/_Layout.cshtml”；
}
@节脚本{
函数CheckAnswer（）{
var myArray=[]；
@foreach（模型中的var d）
{
@：myArray.push（“@d.QuestionNumber”）；
}
对于（var i=0；i
@foreach（模型中的var项目）
{
问题@item.QuestionNumber：
@foreach（item.Options中的var选项）
{
@选择，选择
}
}

以下是测试结果：

---

使用jquery很容易做到，为什么您要求使用asp.net核心，而它可以在客户端处理side@saas你想通过Blazor做吗？谢谢你的建议。我将尝试其他选项谢谢您分享示例代码。我会试试的。这正是我想要的。感谢您提供的示例代码。