Null value when posting data from a html form to a c# controller method using a JavaScript function

Question

I am teaching myself how to program and I am having a hard time identifying an issue with my most recent experiment. The following is within the context of an 'ASP.NET Web Application (.NetFramework) C#' and MVC architecture.

I am attempting to post data from a html form to a c# controller method using a JavaScript function.

The JavaScript function invokes the controller method; however, the string passed to the method always has a null value. (I know that the new 'Organisation' instance is successfully created, as new instances appear with an ID in my database yet with a null name - as per my model).

I have searched similar questions and tested contentType: application/json; charset=utf-8 contentType: application/json; charset=utf-8 also; however, my issue persists.

The error reads: System.ArgumentNullException: 'Value cannot be null. Parameter name: s' System.ArgumentNullException: 'Value cannot be null. Parameter name: s' and occurs at var jsonDataParsed = JObject.Parse(jsonData); in my c# controller method.

I was hoping someone may be kind enough to help me:)

The form:

<form id="createOrganisationForm">

    <label for="organisationName">Organisation name</label>
    <input type="text" id="organisationName" />

    <input type="submit" onclick="createOrganisation()" value="submit" />

</form>

The Javascript function:

function createOrganisation() {

    var formData = {
        "OrganisationName": $("#organisationName").val()
    }

    $.ajax({
        url: '@Url.Action("CreateOrganisation", "Organisations")',
        type: "POST",
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        data: JSON.stringify(formData)
    })

}

The c# method in a controller:

[HttpPost]
public void CreateOrganisation(string jsonData)
{
    var jsonDataParsed = JObject.Parse(jsonData);
    var organisationName = jsonDataParsed["OrganisationName"].ToString();

    var organisation = new Organisation();
    organisation.Name = organisationName;
    db.Organisations.Add(organisation);
    db.SaveChanges();
}

The model:

public class Organisation
{
    public int OrganisationID { get; set; }
    public string Name { get; set; }
}

Answer 1

Try this:

function createOrganisation() {

    var formData = {
        "OrganisationName": $("#organisationName").val()
    }

    $.ajax({
        url: '@Url.Action("CreateOrganisation", "Organisations")',
        type: "POST",
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        dataType: 'json',
        data: {'formData': formData }
    })

}
 

Answer 2

Thank you everyone for your help. Special thanks go to @Teemu for pointing me towards the final solution.

Below is a working solution; I hope this may help others with future issues.

Key changes:

• name="organisationName" atrribute added to input
• <input type="submit" edited to <button type="button"
• "parameter=" added to data: in ajax request
• ["OrganisationName"] edited to ["organisationName"] in C# method

Please refer to @Teemu advice in the question's comment section for the rationale behind these changes.

The HTML form:

<form id="createOrganisationForm">

    <label for="organisationName">Organisation name</label>
    <input type="text" id="organisationName" name="organisationName" />

    <button type="button" onclick="createOrganisation()">Submit</button>

</form>

The JavaScript function:

function createOrganisation() {

    var formData = JSON.stringify({ organisationName: $("#organisationName").val()})

    $.ajax({
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        data: "jsonData=" + formData,
        url: '@Url.Action("CreateOrganisation", "Organisations")',
        type: "POST"
    })
}

Helpful note: the above script should be in the view file (not an external file) if you are using a razor @URL.Action

The c# controller method:

[HttpPost]
public void CreateOrganisation(string jsonData)
{
    var jsonDataParsed = JObject.Parse(jsonData);
    var organisationName = jsonDataParsed["organisationName"].ToString();

    var organisation = new Organisation();
    organisation.Name = organisationName;
    db.Organisations.Add(organisation);
    db.SaveChanges();
}