发送数据到 ajax 控制器

Question

程序执行以下步骤：

用户点击更改地址
按钮消失，出现另一个按钮 - 保存。
接下来，程序应从输入中读取数据并通过 ajax 将其发送到控制器方法。

但没有任何效果。当我将所有内容都放在一个 <script> 标签中时，第一个按钮也停止工作。帮助

问题是，即使是 buttonSetAddress 按钮也不执行该功能。只有在我从 <script>

中删除所有其他内容后它才开始工作

<div class="form-group">
    <label>Адресс</label>
    <input class="form-control" id="AddressInput" type="text" placeholder="@ViewBag.User.Address" readonly /><br />
    <button type="button" class="btn btn-primary" id="buttonSetAddress">Изменить</button>
    <button type="button" class="btn btn-success" id="buttonSaveAddress" onclick="SaveAddress()" hidden>Сохранить</button>
</div>

js 和 ajax

<script type="text/javascript">
    document.getElementById('buttonSetAddress').onclick = function AddressInputSet() {
        document.getElementById('AddressInput').removeAttribute('readonly');
        document.getElementById('buttonSetAddress').hidden = 'true';
        document.getElementById('buttonSaveAddress').removeAttribute('hidden');
        alert('sdfgdfg');
    };
    document.getElementById('buttonSaveAddress').onclick =  function SaveAddress() {
        var data = JSON.stringify( {
            userId: @ViewBag.User.Id,
            address: document.getElementById('AddressInput').value
        });

        $.ajax({
            type: 'POST',
            url: '/Account/ResetAddress',
            data: data,
            dataType: JSON,
            success: function () {
                document.getElementById('buttonSaveAddress').hidden = 'true';
            },
            error: function () {
                alert('Error');
            }
        });
    };
</script>

控制器

[HttpPost]
public async void ResetAddress(string userId, string address)
{
    var user = await _userManager.FindByIdAsync(userId);
    user.Address = address;
    await _userManager.UpdateAsync(user);
}

Answer 1

尝试为此值添加引号

var data = {
            userId: '@ViewBag.User.Id', // here
            address: document.getElementById('AddressInput').value
        };

Answer 2

var data =JSON.stringify( {
            userId: '@ViewBag.User.Id', // here
            address: document.getElementById('AddressInput').value
        });

您必须使用 JSON.stringify 将您反对 json。

而且你必须在 ajax

中设置内容类型

Answer 3

contentType 是您要发送的数据类型，因此 application/json; charset=utf-8 是常见类型，application/x-www-form-urlencoded; charset=UTF-8 也是默认类型。

dataType 是您期望从服务器返回的内容：json、html、文本等。jQuery 将使用它来确定如何填充成功函数的参数。

由于您的操作 return void，您无法将 dataType 设置为 JSON。

尝试使用以下运行良好的代码（确保 url 正确）

<div>
<label>Адресс</label>
<input class="form-control" id="AddressInput" type="text" placeholder="@ViewBag.User.Address" readonly /><br />
<button type="button" onclick ="AddressInputSet()"class="btn btn-primary" id="buttonSetAddress">Изменить</button>
<button type="button" onclick="SaveAddress()" class="btn btn-success" id="buttonSaveAddress"  hidden>Сохранить</button>
</div>
@section Scripts{
<script type="text/javascript">
    function AddressInputSet() {
        document.getElementById('AddressInput').removeAttribute('readonly');
        document.getElementById('buttonSetAddress').hidden = 'true';
        document.getElementById('buttonSaveAddress').removeAttribute('hidden');
        alert('sdfgdfg');
    };
   function SaveAddress() {
        var data ={
            userId: @ViewBag.User.Id,
            address: document.getElementById('AddressInput').value
        };

        $.ajax({
            type: 'POST',
            url: '/Account/ResetAddress',
            data: data,
            //contentType: "application/x-www-form-urlencoded; charset=utf-8",
            //dataType: JSON,
            success: function () {
                document.getElementById('buttonSaveAddress').hidden = 'true';
            },
            error: function () {
                alert('Error');
            }
        });
    };
</script>
}

操作：

[HttpPost]
public async void ResetAddress(string userId, string address)

发送数据到 ajax 控制器

Send data to ajax controller

c#

asp.net-ajax

asp.net-core