Отправить данные на контроллер ajax - PullRequest
Новая
       17

Отправить данные на контроллер ajax

0 голосов
/ 25 апреля 2019

Программа выполняет следующие действия:

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

Ответы [ 3 ]

0 голосов
/ 25 апреля 2019 
var data =JSON.stringify( {
            userId: '@ViewBag.User.Id', // here
            address: document.getElementById('AddressInput').value
        });

Вы должны использовать JSON.stringify, чтобы превратить ваш объект в json.

а также вы должны установить тип содержимого в ajax

0 голосов
/ 25 апреля 2019

contentType - это тип данных, которые вы отправляете, поэтому application/json; charset=utf-8 является обычным, как и application/x-www-form-urlencoded; charset=UTF-8, что является значением по умолчанию.

dataType - это то, что вы ожидаете от сервера: json, html, text и т. Д. JQuery будет использовать это, чтобы выяснить, как заполнить параметр функции успеха.

Поскольку ваше действие возвращает 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)
0 голосов
/ 25 апреля 2019

попробуйте добавить цитату к этому значению 

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