为啥不输入“提交”不适用于表格?

Posted

技术标签:

【中文标题】为啥不输入“提交”不适用于表格?【英文标题】:Why won't type "submit" not work with Form?为什么不输入“提交”不适用于表格? 【发布时间】:2017-10-26 17:37:01 【问题描述】:

我正在使用 .NET MVC 为新用户创建 IQ 测试。目前,我有表单设置发布到数据库:

<div class="form-group">
  <input type="button" class="btn btn-default personality-finish-btn" value="send" />
</div>

但出于引导验证的原因,我需要像这样切换到 type="submit":

<div class="form-group">
  <input type="submit" class="btn btn-default personality-finish-btn" value="Submit" />
</div>

当通过单击提交按钮发布表单时,我收到了一个关于 MVC 的严重错误,如下所示:

'参数字典包含方法'System.Threading.Tasks.Task`1[System.Web.Mvc.JsonResult] PersonalityEvaluation(System .String, Boolean)' 在“TechAcademyLMS.Controllers.RegistrationController”中。可选参数必须是引用类型、可空类型或声明为可选参数。 参数名称:parameters'

仅当从“按钮”类型更改为“提交”类型时才会发生这种情况。由于我没有在我的发布逻辑的任何地方调用按钮,我相信这一定是一个内置的 html 问题。

编辑:

这是我一直在使用的当前验证逻辑。我以前没有使用过 bool,所以我不知道为什么现在需要:

$(document).ready(function () 
    

    $(".personality-finish-btn").on("click", function () 
        checkPersonalityRadio();
    )
)

function checkPersonalityRadio() 
    var pass = false;
    var score = 0;
    for (var i = 1; i < 51; i++) 
        var value = $("input[name='eval-checkbox-" + i + "']:checked").val();
        if (value !== undefined) 
            score += parseInt(value);
        
    ;

    if (score >= 35 && 50) 
        score += " Pass";
        pass = true;
     else if (score <= 34)
        score += " Fail";


    score = JSON.stringify(score);

    $.ajax(
        type: "POST",
        url: "/Registration/PersonalityEvaluation",
        data:  score: score, pass: pass ,
        success: function (response) 
            window.location.href = "/Registration/StepTwelve";
        ,
        dataType: "json",
        error: function () 
            console.log(data);
            alert("Whoops, something went wrong.");
        ,
        traditional: true
    );

【问题讨论】:

错误很明显 - 您的提交按钮调用了 PersonalityEvaluation() 方法,该方法需要 bool 但您没有将值传递给该参数。 @StephenMuecke 请查看更新后的答案。当它起作用时,我一直在使用与以前相同的逻辑。我不知道我是否应该改变逻辑,但如果可能的话我不想这样做。 因为你在点击按钮的时候并没有取消默认提交所以你进行了普通提交和ajax提交。但这有什么意义 - 为什么在操作完成后想要重定向时使用 ajax(使用 ajax 的全部意义在于保持在同一页面上)。只需正常提交即可。 @StephenMuecke 看,这不是我的项目,这是我的公司,所以这不是我的决定。不需要态度,只需要帮助 - 谢谢。 也发布您的控制器操作方法。 【参考方案1】:

按钮类型不会提交表单,但会运行您的 javascript 函数。 submit 类型的输入实际上是提交包含输入的表单。

如果您想运行 javascript 但不想提交表单,请使用提交事件,然后取消默认的表单行为,如下所示:

$(".personality-finish-btn").on("submit", function () 
    checkPersonalityRadio(); // here you can send you details to API controller by Ajax.
    return false; //this will avoid the default form behaviour, which is being submitted.
)

更新: 我认为您的问题是您试图在 POST 提交中发送两个参数。 ModelBinder 尝试将这些参数映射到一个对象,因此它可能会尝试将所有参数分配给 PersonalityEvaluation(System.String, Boolean) 中的字符串,这就是为什么您的布尔值始终为空。

您最好的选择是创建一个包含这两个属性的对象。比如:

public class TestResults()
    public string score get; set;
    public bool pass get; set;

所以你的控制器中的动作方法看起来像:

public PersonalityEvaluation(TestResults results)
    //your logic here

看看这个链接http://www.asp.net/web-api/overview/formats-and-model-binding/parameter-binding-in-aspnet-web-api

【讨论】:

这看起来很符合逻辑,我给了你一个赞成票。但不幸的是,我仍然遇到同样的错误。我尝试在 document.Ready() 中包含 checkPersonalityRadio() 但这不起作用。【参考方案2】:

Tony 我在项目中多次遇到此错误并成功解决。因此,如果您仔细查看错误,它会说

'参数字典包含方法'System.Threading.Tasks.Task`1[System.Web. 'TechAcademyLMS.Controllers.RegistrationController' 中的 Mvc.JsonResult] PersonalityEvaluation(System.String, Boolean)'。可选参数必须是引用类型、可空类型或声明为可选参数。参数名称:parameters'

说明:

我假设您拥有 PersonalityEvaluation() 的参数,如下所示:

PersonalityEvaluation(String somename, Bool somename)

所以错误表明,我们将空值传递给 bool 参数,但同时我们指定为不可空类型。

注意:无论您从简单视图操作链接还是从 ajax javascript 发送参数,错误都将保持不变。

解决方案:

您可以将参数设为可空类型,如下所示:

PersonalityEvaluation(String somename, Bool?somename)

或确保您始终发送不带空值的参数,以使其成为可空类型。对于一个字符串,我们不必担心它已经是一个可以为空的类型。所以没问题..:)

希望以上信息对您有所帮助,请告诉我您的想法或反馈

谢谢

卡提克

【讨论】:

以上是关于为啥不输入“提交”不适用于表格?的主要内容,如果未能解决你的问题,请参考以下文章

jQuery Validate onclick: false 不适用于复选框或选择

Knockout 验证不适用于 Kendo 文本编辑器

jQuery 提交();不适用于火狐

提交按钮不适用于 html 代码

在html中的表单,为啥一按回车键就提交表单了呢?

routes.MapRoute 不适用于使用 GET 提交的表单