单选按钮触发 Ajax 调用 onClick [关闭]

Question

我有一个本质上是调查表的东西。这是 17 道选择题。我想使用 Ajax 来保存答案并在用户进行操作时报告分数。即：当用户选择单选按钮来选择问题的答案时，它会在数据库中创建或更新该问题的答案，计算所有答案的分数并显示在屏幕上的 div 中。单击提交按钮时，所有这些都可以正常工作。

这是表单代码

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

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

我做了什么来尝试这个：

在我添加的单选按钮上：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>

这是控制器标头（根据要求）

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在一个bundle中：

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

在布局上加载的内容：

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

Answer 1

如果按钮有效，可以尝试的事情：

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

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

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

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

所以我会将 onclick 事件放在函数中，看看它在每个步骤中得到了什么。或

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