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是捆绑在一起的：

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）找到表单父onclick="$('this').parents('form').submit();"或其他语法查找表单标记。

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

那么我将把onclick事件放在函数中，看看它在每一步中得到了什么。 OR

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

单选按钮触发Ajax调用onClick

1 个答案: