Перенаправление на другую страницу после отправки формы ASP NET

Я хочу перенаправить пользователя на другую страницу после отправки формы. У меня есть страница Create, на которой пользователь вводит данные, и Learning с данными просмотра.

Create Посмотреть

@model Deck

<!DOCTYPE html>
<html lang = "en">

<head>
    <script src = "~/js/script.js">
    </script>
    <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"
          integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin = "anonymous" asp-append-version = "true">    
</head>

<body>

<main class = "main">
  <div class = "container">
        <div class = "new-module d-flex justify-content-between mt-5">
            <h1>Create new module</h1>
            <a class = "btn btn-primary" asp-controller = "Cards" asp-action = "learning" type = "submit">Создать</a>
        </div>

        <div class = "card mt-5 p-2 pb-3">
            <h3>Title</h3>
            <input class = "form-control w-100" placeholder = "Enter a name">
        </div>
        <form asp-controller = "Cards" asp-action = "Create" method = "post" class = "cards">
            <div class = "card mt-6" id = "card">
                <div class = "header d-flex justify-content-between p-3">
                    <h4 class = "card-counter">1</h4>
                </div>
                <div class = "card-body row">
                    <div class = "term col">
                        <h3>Term</h3>
                        <input class = "form-control w-100" name = "term" >
                    </div>
                    <div class = "definition col">
                        <h3>Definition </h3>
                        <input class = "form-control w-100" name = "definition"  >
                    </div>
                </div>
            </div>

            <input type = "submit" value = "Create" id = "create-cards" class = "btn btn-primary mt-2"/>
        </form>
        <button class = "new-card w-100 d-flex justify-content-center align-items-center mt-4 mt-s rounded-2" style = "height: 5rem"  type = "button">
            <h3>+ Add card</h3>
        </button>
  </div>

</main>
</body>

</html>

скрипт.js

var currentCardNumber = 1;

function addCard() {

    currentCardNumber++;
    let newCardHTML = `
                    <div class = "header d-flex justify-content-between p-3">
                        <h4 class = "card-counter">${currentCardNumber}</h4>
                    </div>
                    <div class = "card-body row">
                        <div class = "term col">
                            <h3>Term</h3>
                            <input class = "form-control w-100" name = "term" >
                        </div>
                        <div class = "definition col">
                            <h3>Definition </h3>
                            <input class = "form-control w-100" name = "definition" >
                        </div>
                    </div>
            </div> `;
    let newCard = document.createElement('div');
    newCard.classList.add('card');
    newCard.classList.add('mt-3');
    newCard.innerHTML = newCardHTML;

    let addNewCard = document.querySelector('.cards');
    let referenceNode = document.getElementById('create-cards');
    addNewCard.insertBefore(newCard, referenceNode);

}
function saveCardDataToServer() {
    let cards = [];
    document.querySelectorAll('.cards > .card   ').forEach((card) => {

        let termInput = card.querySelector('input[name = "term"]');
        let definitionInput = card.querySelector('input[name = "definition"]');

        if (termInput && definitionInput) {
            let term = termInput.value.trim();
            let definition = definitionInput.value.trim();
            cards.push({
                Term: term,
                Definition: definition
            });
        }
        else {
            console.error("Input elements not found in card:", card);
        }
    })

    fetch('/Cards/Create/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({Cards: cards})
    })
        .then(response => response.json())
        .then((data => {
            if (data.success) {
                console.info("Data successfully saved: ", data);
                window.location.href = "/Cards/Learning";
            } else {
                console.error("Error saving card: ", data.message);
            }
        }))
}
document.addEventListener('DOMContentLoaded', function() {
  let newCard = document.querySelector('.new-card');
  newCard.addEventListener('click', function() {
    addCard();
  });
  document.querySelector('form.cards').addEventListener('submit', function() {
    saveCardDataToServer();
  });
});

Контроллер

public class CardsController : Controller
{
    public IActionResult Learning()
    {
        var cards = CardsRepository.GetCards();
        return View(cards);
    }

    public IActionResult Create()
    {
        return View();
    }
    
    [HttpPost]
    [Route("Cards/Create/")]
    public IActionResult Create([FromBody] Deck deck)

    {
        if (deck != null && deck.Cards != null)
        {
            foreach (var card in deck.Cards)
            {
                if (!string.IsNullOrWhiteSpace(card.Term) && !string.IsNullOrWhiteSpace(card.Definition))
                {
                    CardsRepository.AddCard(card);
                }
            }
            return Json(new { success = true, message = "Card saved successfully " });
        }
        return Json(new {
            success = false, message = "Invalid data provided"
        });
    }

}

Модели

public class Deck
{
    public List<Card> Cards { get; set; }

    public Deck()
    {
        Cards = new List<Card>();
    }
}

public class Card
{
    public int CardId { get; set; }
    [Required]
    public string Term { get; set; } = string.Empty;
    public string Definition { get; set; } = string.Empty;
}

Я пробовал <input type = "submit" value = "Создать" id = "create-cards" class = "btn btn-primary mt-2" onclick = "window.location.href='@Url.Action("Learning")'"/> в представлении и document.getElementById('create-cards').addEventListener('click',function (){ window.location.href = "/Create/Learning"; }); в js, бесполезно.

Странная вещь, когда я отправляю форму с точкой останова при выборке в отладчике, все работает правильно

javascript c# asp.net-mvc asp.net-core

06.07.2024 23:12

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Добавьте return false; после звонка на window.location.href;

См.: https://stackoverflow.com/a/61434833/11993452

Или вы можете перенаправить из метода контроллера с помощью return RedirectToAction(nameof(Learning));

Добавлен return false; и перенаправление из метода контроллера с помощью return RedirectToAction(nameof(Learning)); не помогает. Однако, если я добавил return false;, нажал кнопку, вернулся на первую страницу и снова нажал кнопку, все работает правильно.

— 07.07.2024 22:21

попробуйте удалить тег формы и изменить этот код document.querySelector('form.cards').addEventListener('submi‌t', function() { saveCardDataToServer(); }); потому что он использует «form.card». Вы можете использовать id, чтобы найти здесь элемент и добавить список событий.

— 08.07.2024 04:59

В вашем коде при отправке происходит отправка формы и событие отправки на JavaScript. Постарайтесь сосредоточиться на любом из них. Удалите любой из них и попробуйте, как в предыдущем комментарии.

— 08.07.2024 05:13

Еще одна вещь: не добавляйте return false; когда вы используете return RedirectToAction(nameof(Learning)); и убедитесь, что выполнение достигает контроллера при отправке

— 08.07.2024 05:17

07.07.2024 07:47