Send email and Redirect on click Razor Pages Asp

Question

As the title suggests I am having difficulty posting and redirecting on a single click

Below is the form which sends the email and redirects to a new page. I know the issue is the redirect part, as if if remove the redirect, the email sends.

                                    <div class="form-actions no-color">
                                        <p>
                                            From : <input type="text" asp-for="email.From" value="email" /><br />
                                            To : <input type="text" asp-for="email.To" value="@principal.EmailAddress" /><br />
                                            Subject : <input type="text" asp-for="email.Subject" /><br />
                                            Body : <textarea asp-for="email.Body"></textarea><br />
                                            <a asp-page="./Edit" asp-route-id="@item.Id" class="btn btn-md float-end text-white fw-bold mt-3 mb-2 grow" id="emailBtn" style="background-color: #1da1f2">

                                            </a>
                                        </p>
                                    </div>
                                </form>

The Jquery I am using below

 $(function () {
            $("#emailBtn").click(function () {
                $("#emailForm").submit()
                var dataString = $(this).serialize();
                e.preventDefault()
                $.ajax({
                    type: "POST",
                    url: "?handler=SendEmail",
                    data: dataString,
                    success: function () {

                    }
                })
            });
        })

and my server side code

 public async Task OnPostSendEmail()
            {
            using (var smtp = new System.Net.Mail.SmtpClient("stp"))
                {


                var emailMessage = new MailMessage();
                emailMessage.From = new MailAddress("email");
                emailMessage.To.Add(email.To);
                emailMessage.Subject = email.Subject;
                emailMessage.Body = email.Body;



                await smtp.SendMailAsync(emailMessage);

                }
            }

Answer 1

If you want to redirect after ajax,you can use window.location.href.Here is a demo:

Form:

<form id="emailForm" method="post">
    <div class="form-actions no-color">
        <p>
            From : <input type="text" asp-for="email.From" value="email" /><br />
            To : <input type="text" asp-for="email.To" value="@principal.EmailAddress" /><br />
            Subject : <input type="text" asp-for="email.Subject" /><br />
            Body : <textarea asp-for="email.Body"></textarea><br />
            <a asp-page="./Edit" asp-route-id="@item.Id" class="btn btn-md float-end text-white fw-bold mt-3 mb-2 grow" id="emailBtn" style="background-color: #1da1f2">

            </a>
        </p>
    </div>
</form>

js:

$("#emailBtn").click(function () {
            var dataString = $("#emailForm").serialize();
            $.ajax({
                type: "POST",
                url: "?handler=SendEmail",
                data: dataString,
            }).done(function () {
                    window.location.href = $("#emailBtn").attr("href");
                }
            )
        });

result: