将数据发送到ajax控制器

Question

该程序执行以下步骤：

1. 用户单击“更改地址”
2. 按钮消失，出现另一个按钮 - 保存。
3. 接下来，程序应该从输入读取数据并通过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

contentType是你发送的数据类型，所以application/json; charset=utf-8是常见的，application/x-www-form-urlencoded; charset=UTF-8是默认值。

dataType是你期望从服务器回来的：json，html，text等.jQuery将使用它来弄清楚如何填充success函数的参数。

由于您的操作返回void，因此无法将dataType设置为JSON。

尝试使用下面的代码运行良好（确保网址是正确的）

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

Answer 2

尝试为此值添加引号

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

Answer 3

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

您必须使用JSON.stringify将对象转换为json。

并且您还必须在ajax中设置内容类型