如何在 Razor 视图中将 onclick 事件添加到单选按钮答案

【问题标题】：How to add onclick event to radio button in Razor View如何在 Razor 视图中将 onclick 事件添加到单选按钮
【发布时间】：2014-09-02 07:47:08
【问题描述】：

我有这个看法。没关系，除了我想添加：onclick="javascript:SubmitClick(@Model.id, answer.Id);" 到其中的 RadioButtons 定义。

@model WebApplication2.Models.Question
<div>
    @Html.HiddenFor(x => x.Id)
    <h3> @Model.QuestionText </h3>
    @foreach (var answer in Model.Answers) {
        <p>
            @Html.RadioButtonFor(b => b.SelectedAnswer, answer.Id)  @answer.AnswerText
        </p>
    }
</div>

问题和答案是看起来像这样的模型。

 public class Question {
        public int Id { set; get; }
        public string QuestionText { set; get; }
        public virtual ICollection<Answer> Answers { set; get; }
        public string SelectedAnswer { set; get; } //this field is SET after clicking the radio button, I don't need this field ant this behaviour

    }
    public class Answer {
        public int Id { set; get; }
        public string AnswerText { set; get; }
    }

据我所知b => b.SelectedAnswer@Html.RadioButtonFor 中的这个表达式使得单击Question 类中的字段SelectedAnswer 后将被设置。我不需要我只需要同时选择 foreach 循环中的一个单选按钮，然后单击它们会调用onclick="javascript:SubmitClick(@Model.id, answer.Id);"。它也可以以过时的方式完成，只是为了让它工作。

有助于理解视图外观的屏幕：

【问题讨论】：

为什么不把它放在一个表单元素中并回发呢？ SubmitClick 函数有什么作用？
@StephenMuecke 回发重定向我会做不同的动作吗？我发布了一个对我有用的答案。如果您知道更简单的方法，请显示。谢谢。
当然，如果你愿意的话。在您的发布方法中，保存您的数据，然后return RedirectToAction("SomeAction");
您是说要保持在同一页面上吗？如果是这样，那么使用 AJAX 是可行的方法。但是您将 questionId 和 personId` 设置为相同的值（即@Model.Id，因此没有必要回发这两个值。
您的模型中没有属性Person.ID。您的模型是Question，它具有属性ID，所以@Model.ID 是您分配给questionId 和personId 的Question.ID 的值

标签： javascript html asp.net-mvc razor radio-button

【解决方案1】：

观点：

@model WebApplication2.Models.Question
<div>
    @Html.HiddenFor(x => x.Id)
    <h3> @Model.QuestionText </h3>
    <form action="">
        @foreach (var answer in Model.Answers) {
            <p>
                <input type="radio" onclick="javascript:SubmitClick(@Model.Id, @answer.Id);">@answer.AnswerText<br>

            </p>
        }
    </form>
</div>

脚本函数在强类型视图中针对Person：

 function SubmitClick(qid, aid) {
        var url = '@Url.Action("SubmitSurvey", "Person")';

        $.post(url, { questionId: qid, answerId: aid, personId:@Model.Id }, function (data) {
            alert('questionId: ' + qid + ' answerId ' + aid);
        });
    }

脚本调用的方法

  public void SubmitSurvey(int questionId, int answerId, int personId) {

            System.Diagnostics.Debug.WriteLine("UPDATING DATABASE " + "Selected personId: " + personId);

        }

【讨论】：