使用razor绑定ASP.NET MVC页面中的单选按钮

我有一个有4个单选按钮的页面（试题和4个选项供选择）。使用下面的代码，我可以在用户单击按钮后读取选项值

我有两个问题：

• 为什么在第一次加载页面时选择了所有单选按钮
• 如何找出发布后选择的单选按钮

谢谢

StudentQuestions.cshtml

@page "{examId:int?}"
@model VerityLearn.WebUI.Pages.Questions.StudentQuestionsModel
@{
    ViewData["Title"] = "StudentQuestions";
}
    <div>
        <form method="post">
            @Html.LabelFor(model => model.QuestionViewModel.QuestionText);

                <p>Select the correct option.</p>

                int optionIndex = -1;

                @foreach (OptionViewModel opt in Model.QuestionViewModel.Options)
                {
                    optionIndex++;

                    @Html.RadioButtonFor(model => model.QuestionViewModel.Options[optionIndex], Model.QuestionViewModel.Options[optionIndex]);
                    @opt.OptionText<br />
                }

            <button type="submit" asp-route-questionIndex="@(Model.QuestionNdx + 1)" class="btn btn-primary @nextDisabled">Next</button>

        </form>
    </div>

@page "{examId:int?}"
@model StudentQuestions.Pages.StudentQuestionsModel  

<div>
    <form method="post">
        @Html.LabelFor(model => model.QuestionViewModel.QuestionText);

        <p>Select the correct option.</p>    

        @for (var i = 0; i < Model.QuestionViewModel.Options.Count(); i++)
        {
            <input type="radio" asp-for="AnswerSelectedId" 
                   value="@Model.QuestionViewModel.Options[i].Id" /> 
                  @Model.QuestionViewModel.Options[i].OptionText
                  <br>
        }

        <button type="submit" class="btn btn-primary">Next</button>
    </form>
</div>

@page{examId:int？}
@模型VerityLearn.WebUI.Pages.Questions.StudentQuestionsModel
@{
ViewData[“标题”]=“学生问题”；
}
@LabelFor（model=>model.QuestionViewModel.QuestionText）；
选择正确的选项

int optionIndex=-1；
@foreach（选项ViewModel选项加入模型。问题ViewModel.Options）
{
optionIndex++；
@（model=>model.QuestionViewModel.Options[optionIndex]，model.QuestionViewModel.Options[optionIndex]）；
@opt.OptionText

}
下一个

StudentQuestions.cshtml.cs

   public class StudentQuestionsModel : PageModel
    {
        //private readonly VerityContext _context;
        private readonly SignInManager<VerityUser> _signInManager;
        private readonly UserManager<VerityUser> _userManager;
        private readonly IStudentQuesionsUOW _studentQuesionsUOW;
        private readonly VerityLearn.DataAccess.VerityContext _context;

        public StudentQuestionsModel(
            VerityContext context,
            SignInManager<VerityUser> signInManager,
            UserManager<VerityUser> userMrg,
            IStudentQuesionsUOW studentQuesionsUOW
        )
        {
            _context = context;
            _signInManager = signInManager;
            _userManager = userMrg;
            _studentQuesionsUOW = studentQuesionsUOW;
        } // end public StudentQuestionsModel(VerityContext context, SignInManager<VerityUser> signInManager, UserManager<VerityUser> userMrg)

        [BindProperty]
        public QuestionViewModel QuestionViewModel { get; set; }

        [BindProperty]
        public Question Question { get; set; }

        public async Task<IActionResult> OnPostAsync()
        {
            ... Not sure what to do here ...
        }

public class OptionViewModel
{
    public int Id { get; set; }
    public string OptionText { get; set; }
}

public class QuestionViewModel
{
    public int QuestionId { get; set; }
    public int ExamQuestionOrder { get; set; }
    public string QuestionText { get; set; }
    public bool? IsSingleSelection { get; set; }
    public List<OptionViewModel> Options { get; set; }
}

public class StudentQuestionsModelModel : PageModel
{
    public void OnGet()
    {
        QuestionViewModel = new QuestionViewModel
        {
            QuestionId = 1,
            ExamQuestionOrder = 1,
            QuestionText = "Question1",
            IsSingleSelection = false,
            Options = new List<OptionViewModel>()
            {
                new OptionViewModel
                {
                    Id = 1,
                    OptionText = "Option 1"
                },
                new OptionViewModel
                {
                    Id = 2,
                    OptionText = "Option 2"
                }
            }
        };
    }

    [BindProperty]
    public QuestionViewModel QuestionViewModel { get; set; }

    [BindProperty]
    public int AnswerSelectedId { get; set; }   //this is the key bit

    public async Task<IActionResult> OnPostAsync()
    {
        return Content($"The answer selected was {AnswerSelectedId}");
    }
}

公共课堂学生问题模型：页面模型
{
//私有只读VerityContext\u上下文；
专用只读签名管理器\u签名管理器；
私有只读用户管理器_UserManager；
私人只读是学生提问提问；
私有只读VerityLearn.DataAccess.VerityContext\u上下文；
公共学生问题模型(
VerityContext上下文，
SignInManager SignInManager，
UserManager userMrg，
学生提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问提问
)
{
_上下文=上下文；
_signInManager=signInManager；
_userManager=userMrg；
_studentquesinosuow=studentquesinosuow；
}//结束公共学生问题模型（VerityContext上下文、SignInManager SignInManager、UserManager userMrg）
[BindProperty]
公共问题视图模型问题视图模型{get；set；}
[BindProperty]
公共问题{get；set；}
公共异步任务OnPostAsync（）
{
…不知道在这里做什么。。。
}

QuestionViewModel.cs

    public class QuestionViewModel
    {
        public int QuestionId { get; set; }

        public int ExamQuestionOrder { get; set; }

        public string QuestionText { get; set; }

        public bool? IsSingleSelection { get; set; }

        public List<OptionViewModel> Options { get; set; }
    } 

公共类问题视图模型
{
public int QuestionId{get；set；}
public int ExamQuestionOrder{get；set；}
公共字符串QuestionText{get；set；}
公共布尔？IsSingleSelection{get；set；}
公共列表选项{get；set；}
} 

如果要使用单选按钮表示互斥选项，应通过应用相同的

名称

属性值将它们组合在一起：

<input type="radio" name="question1" value="answer1" /> Answer 1
<input type="radio" name="question1" value="answer2" /> Answer 2
<input type="radio" name="question1" value="answer3" /> Answer 3

答案1
答复2
答复3

您正在使用的Html帮助程序为每个单选按钮生成不同的id和名称属性值。我将避免在Razor页面中使用Html帮助程序，而使用标记帮助程序：

@for (var i = 0; i <  Model.QuestionViewModel.Options.Count(); i++)
 {
    <input type="radio" asp-for="QuestionViewModel.QuestionId" value="@Model.QuestionViewModel.Options[i]" /> @Model.QuestionViewModel.Options[i].OptionText<br/>
 }

for（var i=0；i }

---

更多信息：

如果要使用单选按钮表示互斥选项，应通过应用相同的

名称

属性值将其分组：

<input type="radio" name="question1" value="answer1" /> Answer 1
<input type="radio" name="question1" value="answer2" /> Answer 2
<input type="radio" name="question1" value="answer3" /> Answer 3

答案1
答复2
答复3

您正在使用的Html帮助程序为每个单选按钮生成不同的id和名称属性值。我将避免在Razor页面中使用Html帮助程序，而使用标记帮助程序：

@for (var i = 0; i <  Model.QuestionViewModel.Options.Count(); i++)
 {
    <input type="radio" asp-for="QuestionViewModel.QuestionId" value="@Model.QuestionViewModel.Options[i]" /> @Model.QuestionViewModel.Options[i].OptionText<br/>
 }

for（var i=0；i }

---

更多信息：

您感兴趣的是所选单选按钮的值。在我的演示中，为了使事情更简单，我假设它是一个id。假设单选按钮具有名称

AnswerSelectedId

，则在提交表单时，会将标有

AnswerSelectedId

的值发布回服务器。T因此，您需要在模型中定义一个名为

AnswerSelectedId

的属性，以便模型绑定可以匹配这两个属性

这里是一个快速演示，展示了从Mike Brind的答案中获得的大量信息

StudentQuestions.cshtml.cs

   public class StudentQuestionsModel : PageModel
    {
        //private readonly VerityContext _context;
        private readonly SignInManager<VerityUser> _signInManager;
        private readonly UserManager<VerityUser> _userManager;
        private readonly IStudentQuesionsUOW _studentQuesionsUOW;
        private readonly VerityLearn.DataAccess.VerityContext _context;

        public StudentQuestionsModel(
            VerityContext context,
            SignInManager<VerityUser> signInManager,
            UserManager<VerityUser> userMrg,
            IStudentQuesionsUOW studentQuesionsUOW
        )
        {
            _context = context;
            _signInManager = signInManager;
            _userManager = userMrg;
            _studentQuesionsUOW = studentQuesionsUOW;
        } // end public StudentQuestionsModel(VerityContext context, SignInManager<VerityUser> signInManager, UserManager<VerityUser> userMrg)

        [BindProperty]
        public QuestionViewModel QuestionViewModel { get; set; }

        [BindProperty]
        public Question Question { get; set; }

        public async Task<IActionResult> OnPostAsync()
        {
            ... Not sure what to do here ...
        }

public class OptionViewModel
{
    public int Id { get; set; }
    public string OptionText { get; set; }
}

public class QuestionViewModel
{
    public int QuestionId { get; set; }
    public int ExamQuestionOrder { get; set; }
    public string QuestionText { get; set; }
    public bool? IsSingleSelection { get; set; }
    public List<OptionViewModel> Options { get; set; }
}

public class StudentQuestionsModelModel : PageModel
{
    public void OnGet()
    {
        QuestionViewModel = new QuestionViewModel
        {
            QuestionId = 1,
            ExamQuestionOrder = 1,
            QuestionText = "Question1",
            IsSingleSelection = false,
            Options = new List<OptionViewModel>()
            {
                new OptionViewModel
                {
                    Id = 1,
                    OptionText = "Option 1"
                },
                new OptionViewModel
                {
                    Id = 2,
                    OptionText = "Option 2"
                }
            }
        };
    }

    [BindProperty]
    public QuestionViewModel QuestionViewModel { get; set; }

    [BindProperty]
    public int AnswerSelectedId { get; set; }   //this is the key bit

    public async Task<IActionResult> OnPostAsync()
    {
        return Content($"The answer selected was {AnswerSelectedId}");
    }
}

---

然后，模型绑定将该值绑定到名为AnswerSelectedId的属性，然后您就可以在onPostAsync方法中访问该值。

您感兴趣的是所选单选按钮的值。在我的演示中，为了使事情更简单，我假设它是一个id。假设单选按钮的名称

为swerSelectedId

，然后在提交表单时，标签为

AnswerSelectedId

的值将被发回服务器。因此，您需要在模型中定义一个名为

AnswerSelectedId

的属性，以便模型绑定可以匹配这两个属性

这里是一个快速演示，展示了从Mike Brind的答案中获得的大量信息

StudentQuestions.cshtml.cs

   public class StudentQuestionsModel : PageModel
    {
        //private readonly VerityContext _context;
        private readonly SignInManager<VerityUser> _signInManager;
        private readonly UserManager<VerityUser> _userManager;
        private readonly IStudentQuesionsUOW _studentQuesionsUOW;
        private readonly VerityLearn.DataAccess.VerityContext _context;

        public StudentQuestionsModel(
            VerityContext context,
            SignInManager<VerityUser> signInManager,
            UserManager<VerityUser> userMrg,
            IStudentQuesionsUOW studentQuesionsUOW
        )
        {
            _context = context;
            _signInManager = signInManager;
            _userManager = userMrg;
            _studentQuesionsUOW = studentQuesionsUOW;
        } // end public StudentQuestionsModel(VerityContext context, SignInManager<VerityUser> signInManager, UserManager<VerityUser> userMrg)

        [BindProperty]
        public QuestionViewModel QuestionViewModel { get; set; }

        [BindProperty]
        public Question Question { get; set; }

        public async Task<IActionResult> OnPostAsync()
        {
            ... Not sure what to do here ...
        }

public class OptionViewModel
{
    public int Id { get; set; }
    public string OptionText { get; set; }
}

public class QuestionViewModel
{
    public int QuestionId { get; set; }
    public int ExamQuestionOrder { get; set; }
    public string QuestionText { get; set; }
    public bool? IsSingleSelection { get; set; }
    public List<OptionViewModel> Options { get; set; }
}

public class StudentQuestionsModelModel : PageModel
{
    public void OnGet()
    {
        QuestionViewModel = new QuestionViewModel
        {
            QuestionId = 1,
            ExamQuestionOrder = 1,
            QuestionText = "Question1",
            IsSingleSelection = false,
            Options = new List<OptionViewModel>()
            {
                new OptionViewModel
                {
                    Id = 1,
                    OptionText = "Option 1"
                },
                new OptionViewModel
                {
                    Id = 2,
                    OptionText = "Option 2"
                }
            }
        };
    }

    [BindProperty]
    public QuestionViewModel QuestionViewModel { get; set; }

    [BindProperty]
    public int AnswerSelectedId { get; set; }   //this is the key bit

    public async Task<IActionResult> OnPostAsync()
    {
        return Content($"The answer selected was {AnswerSelectedId}");
    }
}

---

然后，模型绑定将该值绑定到名为AnswerSelectedId的属性，然后您就可以在onPostAsync方法中访问该值。

我建议使用动画效果非常好的。您可以按照以下步骤在剃须刀页面中使用它：

css:

控制器：

公共异步任务编辑（int-id）
{
//为简洁起见省略了代码
返回PartialView（“编辑”，模型）；
}
[HttpPost]
[ValidateAntiForgeryToken]
公共异步任务更新（[Bind（Exclude=null）]GroupViewModel模型，
参数字符串[]selectedRoles）
{
//为简洁起见省略了代码
等待这个.GroupManager.UpdateGroupAsync（组）；
selectedRoles=selectedRoles？？新字符串[]{}；
等待此消息。GroupManager.SetGroupRolesAsyn