在 C# ASP.NET Core MVC 中使用 AJAX 将数据从视图传递到控制器答案

【问题标题】：Pass data from view to controller using AJAX in C# ASP.NET Core MVC在 C# ASP.NET Core MVC 中使用 AJAX 将数据从视图传递到控制器
【发布时间】：2021-01-12 20:50:53
【问题描述】：

我曾尝试查看类似问题的答案，但没有一个适用于我的代码。我尝试了很多不同的东西，它应该做的就是发布全名，然后将其显示回视图中。查看代码：

    <script type="text/javascript">
        $(document).ready(function () {<script type="text/javascript">
        $(document).ready(function () {

$('#buttonDemo2').click(function () {
                var fullName = $('#fullName').val();
                var payload = {fn : fullName};
                $.ajax({
                    type: 'POST',
                    url: '/demo/demo2/',
                    contentType: 'application/json',
                    data: JSON.stringify(payLoad),
                    success: function (result) {
                        $('#result2').html(result);
                    }
                });
            });
</script>

<fieldset>
        <legend>Demo 2</legend>
        Full Name <input type="text" id="fullName" />
        <input type="button" value="Demo 2" id="buttonDemo2" />
        <br />
        <span id="result2"></span>
</fieldset>

控制器代码：

 [HttpPost]
    public IActionResult Demo2(string fullName)
        {
            return new JsonResult("Hello " + fullName);
        }

【问题讨论】：

您是否遇到任何错误？什么不起作用？
没有错误。它只返回“Hello”，但不会返回我在添加到它末尾的表单中输入的任何内容。例如。它的意思是说“你好鲍勃”。所以值永远不会到达控制器。

标签： c# ajax asp.net-mvc asp.net-core asp.net-ajax

【解决方案1】：

首先，通过ajax传递字符串到action时，要保证接收到的参数名和传入的参数名一致。

因此，您应该将var payload = {fn : fullName}; 更改为var payload = {fullName: fullName};，或将public IActionResult Demo2(string fullName) 更改为public IActionResult Demo2(string fn)。

那么，由于你只传递了一个字符串而不是一个对象参数，所以你不需要使用JSON.stringify，并删除contentType: 'application/json'。

这里是详细代码：

    <script type="text/javascript">
            $(document).ready(function () {

                $('#buttonDemo2').click(function () {
                    var fullName = $('#fullName').val();
                    var payload = { fullName: fullName }; // change name
                    $.ajax({
                        type: 'POST',
                        url: '/demo/demo2/',
                       // contentType: 'application/json', // remove this line
                        data: payload, //remove JSON.stringify
                        success: function (result) {
                            $('#result2').html(result);
                        }
                    });
                });
            });
    </script> 
<fieldset>
    <legend>Demo 2</legend>
    Full Name <input type="text" id="fullName" />
    <input type="button" value="Demo 2" id="buttonDemo2" />
    <br />
    <span id="result2"></span>
</fieldset>

控制器：

 [HttpPost]
        public IActionResult Demo2(string fullName)
        {
            return new JsonResult("Hello " + fullName);
        }

这是测试结果：

【讨论】：

你先生是个天才！太感谢了！是的，我认为主要问题是 var payload = {fn : fullName};其中“fn”与控制器方法中的“fullName”不匹配。你不知道你救了我多少挫折。谢谢你一百万次！