將數據發送到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

嘗試為此值添加引號

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/json; charset=utf-8是常見的，就像application/x-www-form-urlencoded; charset=UTF-8 application/x-www-form-urlencoded; charset=UTF-8 ，這是默認值。

dataType是你期望從服務器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)