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

Question

我想通过Ajax调用将数据从View传递到Controller。 以下简化代码每次都会传递NULL。 有人可以建议我做错了吗？

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

我期望字符串名称为“ Fred”。 谢谢。

Answer 1

使用Formdata传递json数据，现在您在控制器中创建GET和POST Action。

    <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

推荐的方法是序列化表格。

请记住，在控制器操作中将使用您的表单类型。 如果您的表单类型为MyViewModel，它将是控制器操作上期望的类型，那么这是一种很好的方法。 所有属性将被序列化和映射。

@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

为了使用，以达到您想要的功能AJAX以POST表单变量控制器，请参考下面的代码片段：

<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>

在您的控制器中，您可以像这样获得价值：

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