Изменить значение кнопки отправки при нажатии с помощью AJAX

Итак, у меня есть кнопка «Нравится» в моем индексном представлении, которая выглядит так. Он вызывает функцию «PostLike», которая увеличивает количество лайков, вставляя новую строку в мою таблицу «лайков».

<form asp-action="PostLike" asp-route-id="@item.Id">
      <input id="btn" type="submit" value="Like" class="btn btn-primary">
</form>

Что я хочу сделать, так это изменить значение кнопки с нравится на В отличие от при нажатии, не обновляя страницу и сохраняя значение после обновления приложения. Любые идеи? Я знаю, что для этого мне нужно использовать некоторую функцию AJAX, но я не знаю, как это должно быть реализовано.

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
0
0
64
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

вы можете сделать вызов ajax, чтобы проверить состояние запроса успеха или ошибки, а затем изменить значение метода успеха

ArticleLikeObj — это объект, который нужно отправить контроллеру для сохранения действия «как статья», и это класс модели представления, содержащий такие свойства, как Идентификатор статьи и текущий зарегистрированный пользователь.

аякс вызов

<input id="@item.ArticleId" onClick="Submit_clicked(this.id)" value="Like" class="btn btn-primary">

<input id="@item.ArticleId" onClick="Submit_clicked(this.id)" value="Like" class="btn btn-primary">


<input id="@item.ArticleId" onClick="Submit_clicked(this.id)" value="Like" class="btn btn-primary">

function Submit_clicked(clicked_id)
  {
      let ArticleLikeObj = {ArticleId:clicked_id, UserName:"Doe"};
      SendRequest(ArticleLikeObj);
  }

function SendRequest(ArticleLikeObj) {
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("action name","controller name")',
                    data: ArticleLikeObj,
                    contentType: 'application/x-www-form-urlencoded',
                    dataType: "json",
                    success: function (response) {
                        document.getElementById("Submit").value = "Liked";
                    },
                    error: function () {
                        alert("Error!");
                    }
                });
            }

Не могли бы вы объяснить мне, пожалуйста, что я должен поставить вместо "//данные"? Что такое CreateFromVM? Это часть, которую я не понял.

Bianca Tărău 23.04.2022 15:47

@BiancaTărău Я обновил ответ, и если он решен, ответ "принять"

Karim Fahmy 23.04.2022 15:59

Проблема в том, что у меня есть кнопка «Нравится» для каждой статьи. И статьи отображаются на мой взгляд через foreachloop. Итак, как мне получить конкретные данные для каждой статьи?

Bianca Tărău 23.04.2022 16:09

@BiancaTărău Я обновил ответ, также обновите свой вопрос с предыдущим комментарием, и если он решен, ответ «принять»

Karim Fahmy 23.04.2022 16:31

Другие вопросы по теме