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

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

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

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

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
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

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