Replace contact form POST with async JS API endpoint
Deploy Staging / deploy (push) Successful in 1m10s
Deploy Staging / deploy (push) Successful in 1m10s
Add a POST /api/contact minimal API that returns JSON instead of relying on the Razor Page's OnPostAsync full-page reload. The contact form now submits via fetch(), showing an inline success or error message without reloading the page. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SLdp8vEGVX6EKSDQPAx36a
This commit is contained in:
@@ -939,10 +939,7 @@
|
|||||||
|
|
||||||
<div class="contact-form-box style-two">
|
<div class="contact-form-box style-two">
|
||||||
|
|
||||||
@if (Model.ContactFormSubmitted)
|
<div id="contact-form-message" class="alert" role="alert" style="display:none;"></div>
|
||||||
{
|
|
||||||
<div class="alert alert-success">Danke für deine Nachricht! Ich melde mich so schnell wie möglich.</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
<form method="post" id="dreamit-form">
|
<form method="post" id="dreamit-form">
|
||||||
|
|
||||||
@@ -1073,5 +1070,51 @@
|
|||||||
if (event.key === "Escape") closeModal();
|
if (event.key === "Escape") closeModal();
|
||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
(function () {
|
||||||
|
var form = document.getElementById("dreamit-form");
|
||||||
|
var messageBox = document.getElementById("contact-form-message");
|
||||||
|
var submitButton = form.querySelector("button[type=submit]");
|
||||||
|
|
||||||
|
function showMessage(text, isSuccess) {
|
||||||
|
messageBox.textContent = text;
|
||||||
|
messageBox.className = "alert " + (isSuccess ? "alert-success" : "alert-danger");
|
||||||
|
messageBox.style.display = "block";
|
||||||
|
}
|
||||||
|
|
||||||
|
form.addEventListener("submit", function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
submitButton.disabled = true;
|
||||||
|
|
||||||
|
var payload = {
|
||||||
|
name: form.querySelector("[name=name]").value,
|
||||||
|
email: form.querySelector("[name=email]").value,
|
||||||
|
phone: form.querySelector("[name=phone]").value,
|
||||||
|
subject: form.querySelector("[name=subject]").value,
|
||||||
|
message: form.querySelector("[name=message]").value
|
||||||
|
};
|
||||||
|
|
||||||
|
fetch("/api/contact", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify(payload)
|
||||||
|
})
|
||||||
|
.then(function (response) {
|
||||||
|
if (response.ok) {
|
||||||
|
showMessage("Danke für deine Nachricht! Ich melde mich so schnell wie möglich.", true);
|
||||||
|
form.reset();
|
||||||
|
} else {
|
||||||
|
showMessage("Beim Senden ist ein Fehler aufgetreten. Bitte versuche es erneut.", false);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(function () {
|
||||||
|
showMessage("Beim Senden ist ein Fehler aufgetreten. Bitte versuche es erneut.", false);
|
||||||
|
})
|
||||||
|
.finally(function () {
|
||||||
|
submitButton.disabled = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})();
|
||||||
</script>
|
</script>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,62 +1,12 @@
|
|||||||
using Microsoft.AspNetCore.Mvc;
|
|
||||||
using Microsoft.AspNetCore.Mvc.RazorPages;
|
using Microsoft.AspNetCore.Mvc.RazorPages;
|
||||||
using RazorPagesMovie.Data;
|
|
||||||
using RazorPagesMovie.Models;
|
|
||||||
|
|
||||||
namespace RazorPagesMovie.Pages
|
namespace RazorPagesMovie.Pages
|
||||||
{
|
{
|
||||||
public class BewerbungModel : PageModel
|
public class BewerbungModel : PageModel
|
||||||
{
|
{
|
||||||
private readonly RazorPagesMovieContext _context;
|
|
||||||
|
|
||||||
public BewerbungModel(RazorPagesMovieContext context)
|
|
||||||
{
|
|
||||||
_context = context;
|
|
||||||
}
|
|
||||||
|
|
||||||
[BindProperty]
|
|
||||||
public string Name { get; set; } = string.Empty;
|
|
||||||
|
|
||||||
[BindProperty]
|
|
||||||
public string Email { get; set; } = string.Empty;
|
|
||||||
|
|
||||||
[BindProperty]
|
|
||||||
public string? Phone { get; set; }
|
|
||||||
|
|
||||||
[BindProperty]
|
|
||||||
public string? Subject { get; set; }
|
|
||||||
|
|
||||||
[BindProperty]
|
|
||||||
public string Message { get; set; } = string.Empty;
|
|
||||||
|
|
||||||
public bool ContactFormSubmitted { get; set; }
|
|
||||||
|
|
||||||
public void OnGet()
|
public void OnGet()
|
||||||
{
|
{
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public async Task<IActionResult> OnPostAsync()
|
|
||||||
{
|
|
||||||
var contactMessage = new ContactMessage
|
|
||||||
{
|
|
||||||
Name = Name,
|
|
||||||
Email = Email,
|
|
||||||
Phone = Phone,
|
|
||||||
Subject = Subject,
|
|
||||||
Message = Message
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!TryValidateModel(contactMessage, nameof(ContactMessage)))
|
|
||||||
{
|
|
||||||
return Page();
|
|
||||||
}
|
|
||||||
|
|
||||||
_context.ContactMessage.Add(contactMessage);
|
|
||||||
await _context.SaveChangesAsync();
|
|
||||||
|
|
||||||
ContactFormSubmitted = true;
|
|
||||||
return Page();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
using System.ComponentModel.DataAnnotations;
|
||||||
using Microsoft.AspNetCore.Authentication.Cookies;
|
using Microsoft.AspNetCore.Authentication.Cookies;
|
||||||
using Microsoft.EntityFrameworkCore;
|
using Microsoft.EntityFrameworkCore;
|
||||||
using RazorPagesMovie.Data;
|
using RazorPagesMovie.Data;
|
||||||
@@ -47,4 +48,30 @@ app.UseRouting();
|
|||||||
app.UseAuthentication();
|
app.UseAuthentication();
|
||||||
app.UseAuthorization();
|
app.UseAuthorization();
|
||||||
app.MapRazorPages();
|
app.MapRazorPages();
|
||||||
|
|
||||||
|
app.MapPost("/api/contact", async (ContactMessageRequest request, RazorPagesMovieContext context) =>
|
||||||
|
{
|
||||||
|
var contactMessage = new ContactMessage
|
||||||
|
{
|
||||||
|
Name = request.Name ?? string.Empty,
|
||||||
|
Email = request.Email ?? string.Empty,
|
||||||
|
Phone = request.Phone,
|
||||||
|
Subject = request.Subject,
|
||||||
|
Message = request.Message ?? string.Empty
|
||||||
|
};
|
||||||
|
|
||||||
|
var validationResults = new List<ValidationResult>();
|
||||||
|
if (!Validator.TryValidateObject(contactMessage, new ValidationContext(contactMessage), validationResults, validateAllProperties: true))
|
||||||
|
{
|
||||||
|
return Results.BadRequest(new { error = "Bitte alle Pflichtfelder korrekt ausfüllen." });
|
||||||
|
}
|
||||||
|
|
||||||
|
context.ContactMessage.Add(contactMessage);
|
||||||
|
await context.SaveChangesAsync();
|
||||||
|
|
||||||
|
return Results.Ok(new { success = true });
|
||||||
|
});
|
||||||
|
|
||||||
app.Run();
|
app.Run();
|
||||||
|
|
||||||
|
record ContactMessageRequest(string? Name, string? Email, string? Phone, string? Subject, string? Message);
|
||||||
|
|||||||
Reference in New Issue
Block a user