从View传递到Controller的字符串变量在Controller中始终以NULL到达

Question

I want to pass data from the View to the Controller with an Ajax call. The following simplified code passes NULL every time. Can someone suggest what I'm doing wrong please?

Index.cshtml:

<input type="submit" id="ajaxTestButton" value="Pass To Controller" />

@section scripts {
    <script type="text/javascript">

        var testData = "Fred";

        $("#ajaxTestButton").click(function () {
            $.ajax({
                type: "POST",
                dataType: "text",
                data: testData,
                contentType: "text/plain",
                url: '@Url.Action("ButtonTest", "Home")'
            });
    });
    </script>

HomeController.cs:

namespace TestingAjax.Controllers
{
    public class HomeController : Controller
    {
        [HttpPost]
        public void ButtonTest(string Name)
        {
            // Do something interesting here.
        }

        public IActionResult Index()
        {
            return View();
        }
    }
}

I'm expecting string Name to be "Fred". Thank you.

Answer 1

Passing your json data using Formdata, Now you create GET and POST Action in controller.

    <input type="submit" id="ajaxTestButton" value="Pass To Controller" />

@section scripts {
<script type="text/javascript">
        var formData = new FormData();
        formData.append("Name", "fred");

        $("#ajaxTestButton").click(function () {
        $.ajax({
            type: "POST",
            dataType: 'json',
            data: formData,
            processData: false,
            contentType: false,
            url: '@Url.Action("ButtonTest", "Home")'
        });
});
</script>

Answer 2

<input type="submit" id="ajaxTestButton" value="Pass To Controller" />

@section scripts {
    <script type="text/javascript">

        var testData = "Fred";

        $("#ajaxTestButton").click(function () {
            $.ajax({
                type: "POST",
                dataType: "text",
                data: { 'Name': testData },
                contentType: "text/plain",
                url: '@Url.Action("ButtonTest", "Home")'
            });
    });
    </script>

Answer 3

The recommended way is to serialize the form.

Keep in mind, in the controller action will be expecting your form type. This is a great approach, if you have a form type MyViewModel that will be the type to be expected on the controller action. All properties will be serialized and maped.

@section scripts {
    <script type="text/javascript">

        $("#ajaxTestButton").click(function () {
            var form = $('form');
        $.ajax( {
              type: "POST",
              url: form.attr( 'action' ),
              data: form.serialize(),
              success: function( response ) {
                console.log( response );
              }
            } );

    });
    </script>

Answer 4

In order to achieve your desired functionality using AJAX to POST your form variables to controller, refer to the following code snippet:

<input type="submit" id="ajaxTestButton" value="Pass To Controller" />

@section scripts {
<script type="text/javascript">
        var yourName= "Fred";
        var json = {
                   Name: yourName
                   };

        $("#ajaxTestButton").click(function () {
        $.ajax({
            url: '@Url.Action("ButtonTest", "Home")',
            type: "POST",
            dataType: "json",
            data: { "json": JSON.stringify(json) },
            success: function (data) {
             //If there is no error from the server
             },
             error: function (data) {
             //If there is an error from the server
             },
        });
});
</script>

And in your controller, you can get your value like this:

using System.Web.Script.Serialization;
namespace TestingAjax.Controllers
{
    public class HomeController : Controller
    {
        [HttpPost]
        public void ButtonTest(string json)
        {
            var serializer = new JavaScriptSerializer();
            dynamic jsondata = serializer.Deserialize(json, typeof(object));
            //Get your Name variable here
            string name= jsondata["Name"];
            // Do something interesting here.
        }

        public IActionResult Index()
        {
            return View();
        }
    }
}