Блог

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

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

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

dataType это то, что вы ожидаете получить от сервера: json, html, текст и т.д. 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)
  

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

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

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

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

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