单选按钮触发 Ajax 调用 onClick

Question

我有一份调查表。这是 17 multiple-choice 个问题。我想使用 Ajax 来保存答案并在用户进行时报告分数。即：当用户 select 单选按钮 select 一个问题的答案时，它会在数据库中创建或更新该问题的答案，计算所有答案的分数并显示在 div 在屏幕上。单击提交按钮时，一切正常。

这是表单代码

    @using (Ajax.BeginForm(
        new AjaxOptions
        {
            HttpMethod="post",
            InsertionMode=InsertionMode.Replace,
            UpdateTargetId="currentScore"
        }
        ))
    { ... }

每个问题都有 5 个答案链接到来自数据库 table 的答案 ID。我编写代码将答案添加到数据库并在提交表单时更新 on-screen 分数，一切正常 当我单击提交按钮时 ，但我希望每次单击特定答案的单选按钮时都会发生这种情况。

我为此所做的尝试：

在我添加的单选按钮上：onclick="this.form.submit()"

结果：

表单提交，就好像它不是 Ajax 表单一样，而是像普通表单一样，并且页面重新加载。

我页面上有如下js:

<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/jquery-ui-1.10.3.js"></script>
<script src="/Scripts/modernizr-2.6.2.js"></script>

这里是控制器header（按要求）

using System;
using System.Collections.Generic; 
using System.Data; 
using System.Data.Entity; 
using System.Linq; 
using System.Threading.Tasks; 
using System.Net; 
using System.Web; 
using System.Web.Mvc; 
using PROJECTNAME.Models; 

namespace PROJECTNAME.Controllers { 

public class QuestionsController : Controller
{
...

js 在一个包中：

    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js",
                "~/Scripts/jquery.unobtrusive*",
                "~/Scripts/jquery.validate*"));

在布局上加载：

@Scripts.Render("~/bundles/jquery")

Answer 1

按钮有效时要尝试的事情：

1) 给表单一个ID或者使用表单标签提交onclick="$('#IdOfForm').submit();"

2) 如果单个存在，则在页面上查找表单标签 onclick="$('form').submit();"

3) 查找表单 parent onclick="$('this').parents('form').submit();" 或查找表单标签的其他语法。

4) 或者直接触发按钮点击onclick="$('#IdOfSubmBtn').click();"

所以我会在函数中放置 onclick 事件，并查看它在每一步中得到了什么。或者

有时它需要很少的延迟，因为 DOM 接收 AJAX 事件的速度很慢。 onclick="setTimeout(function() { yours,1,2, or 3 }, 300);"

单选按钮触发 Ajax 调用 onClick

Radio button to trigger Ajax call onClick

c#

ajax

asp.net-mvc

jquery

asp.net-ajax