Why won't type “submit” not work with Form?

Question

I am using .NET MVC to create a IQ test for new users. Currently, I have the form setup to post to the database with:

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

But for bootstrap validation reasons, I need to switch to type="submit" like so:

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

When posting the form by clicking the submit button, I get a long nasty error with MVC along the lines of:

'The parameters dictionary contains a null entry for parameter 'pass' of non-nullable type 'System.Boolean' for method 'System.Threading.Tasks.Task`1[System.Web.Mvc.JsonResult] PersonalityEvaluation(System.String, Boolean)' in 'TechAcademyLMS.Controllers.RegistrationController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter. Parameter name: parameters'

This only happens when changing from type "button" to type "submit". Since I am not calling button anywhere in my posting logic, I'm confident this has to be a in-built HTML problem.

Any leads would be greatly appreciated, thank you.

Edit:

This is the current validation logic I have been using. I have not been using a bool previously, so I don't know why I would need to now:

$(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
    });
}

Answer 1

A button type doesn't submit the form but it runs your javascript function. An input of type submit actually submits the form where the input is enclosed.

If you want to run the javascript but don't want to submit the form use the submit event and then cancel the default form behaviour like so:

$(".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.
})

UPDATE: I think your problem is that you are trying to send two parameters in a POST submission. ModelBinder tries to map those paramaters to an object so it is probably trying to assign all your parameters to your string in PersonalityEvaluation(System.String, Boolean) and that's why your boolean is always null.

Your best option is create an object that wraps both properties. Something like:

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

So your action method in your controller would look something like:

public PersonalityEvaluation(TestResults results){
    //your logic here
}

Take a look at this link http://www.asp.net/web-api/overview/formats-and-model-binding/parameter-binding-in-aspnet-web-api

Answer 2

Tony I had this error many times in my project and resolved it successfully. so if you look at the error closely , it says

'The parameters dictionary contains a null entry for parameter 'pass' of non-nullable type 'System.Boolean' for method 'System.Threading.Tasks.Task`1[System.Web.Mvc.JsonResult] PersonalityEvaluation(System.String, Boolean)' in 'TechAcademyLMS.Controllers.RegistrationController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter. Parameter name: parameters'

Explanation:

i assume you are having the parameters for the PersonalityEvaluation() like below:

PersonalityEvaluation(String somename, Bool somename)

so the error says that ,we are passing the null value to the bool parameter but at the same time we specified as non-nullable type .

Note: From wherever you are sending the parameter either from the simple view action link or from the ajax javascript ,the error will remain the same.

solution:

you can make the parameters nullable type like below:

PersonalityEvaluation(String somename, Bool? somename)

or ensure that you are alaways sending the parameter without null alaways to make it as a nullable type. And for a string we no need worry its already a nullable type.so no problem..:)

Hope the above information is somewhat useful, kindly let me know your thoughts or feedbacks

Thanks

Karthik