Js function passes null to the controller, in the old version-CodePudding

I need to wrote a code on an older version of the .net Framework, namely 4.5.2. I ran into a problem, the ajax code sends an empty request to the controller.

Here is the form and I need to check user Full Name on unique:

<div >
    <h1>Register the new user</h1>
    @using (Html.BeginForm("CreateUserAsync", "Home", FormMethod.Post))
    {
        <div>
            @Html.Label("FullName", "Enter your full name")
            <input type="text" id="FullName" name="FullName" pattern="^(\w\w )\s(\w )\s(\w )$" onblur="CheckAvailability()" required />
            <span id="message" onclick="ClearMessage()"></span>
        </div>
        <p><input type="submit" value="Send" id="submit" /></p>
    }
</div>

Here is my js function to checking Full Name:

function CheckAvailability() {
    var data = $("#FullName").val();
    var param = data;
    $.ajax({
        type: "POST",
        url: "/Home/CheckFullNameAsync",
        contentType: "application/x-www-form-urlencoded; charset=utf-8",
        dataType: "String",
        data: JSON.stringify(param),
        success: function (response) {
            var message = $("#message");
            if (response) {
                message.css("color", "red");
                message.html("Full name is already exist");
                $('#submit').attr('disabled', 'disabled');
            }
            else {
                console.log(JSON.stringify(param));
                message.css("color", "green");
                message.html("Full name is available");
                $('#submit').removeAttr('disabled');
            }
        }
    });
};
function ClearMessage() {
    $("#message").html("");
};

Js function pass the FullName to next controller:

[HttpPost]
    public async Task<JsonResult> CheckFullNameAsync([FromBody]string fullName)
    {
        var isValid = await _service.IsUserExistAsync(fullName);
        return Json(isValid);
    }

But the controller receives null. I think the problem is in the Js function, but I can figure out what I'm doing wrong.

CodePudding user response：

Dont need to create two variable

var data = $("#FullName").val();
var param = data;

Just create

var param = $("#FullName").val();

try this

Check this link. it explains your problem well

$.ajax({
        type: "POST",
        url: "/Home/CheckFullNameAsync",
        contentType: "application/x-www-form-urlencoded; charset=utf-8",
        dataType: 'json',
        data:{"":param},
        //data: { fullName: param },
        success: function (response) {
            var message = $("#message");
            if (response) {
                message.css("color", "red");
                message.html("Full name is already exist");
                $('#submit').attr('disabled', 'disabled');
            }
            else {
                console.log(JSON.stringify(param));
                message.css("color", "green");
                message.html("Full name is available");
                $('#submit').removeAttr('disabled');
            }
        }
    });

or this one also

$.post('/Home/CheckFullNameAsync', { fullname: param}, 
    function(returnedData){
         console.log(returnedData);
}).fail(function(){
      console.log("error");
});

CodePudding user response：

What is dataType: "String"? That's not a listed option. And more specifically, all you're sending is a value but with no key. So the server isn't able to deserialize the data and determine where the fullName value comes from.

Change the type to 'json' and send the object with the named key for the value:

dataType: "json",
data: { fullName: param },