Great start with the basic AJAX submission! Let's expand this to include proper validation (both server-side and client-side) so you can easily extend it later. Here's how to tweak your existing code step by step:

1. Add Server-Side Validation Rules to Your Model #

First, we'll use DataAnnotations to define validation rules on your News model. This ensures validation happens on the server (critical for security) and also enables client-side validation automatically.

using System.ComponentModel.DataAnnotations;

public class News
{
    public int NewsId { get; set; }

    [Required(ErrorMessage = "Email is required")]
    [EmailAddress(ErrorMessage = "Please enter a valid email address")]
    public string Email { get; set; }
}

2. Update Your Controller to Handle Validation #

Right now your controller skips validation and tries to save directly. Let's modify it to check if the model is valid, return validation errors if not, and only save when everything checks out. We'll also return JSON for AJAX requests instead of a full view:

[HttpPost]
public ActionResult Index(News model)
{
    if (!ModelState.IsValid)
    {
        // Return validation errors as JSON for AJAX handling
        var errors = ModelState.Values.SelectMany(v => v.Errors)
                                      .Select(e => e.ErrorMessage);
        return Json(new { success = false, errors = errors }, JsonRequestBehavior.AllowGet);
    }

    try
    {
        var newsletter = new News { Email = model.Email };
        _context.News.Add(newsletter);
        _context.SaveChanges();
        return Json(new { success = true, message = "Successfully subscribed!" });
    }
    catch (Exception e)
    {
        // Log the error (don't rethrow it to the client!)
        // _logger.LogError(e, "Failed to subscribe email");
        return Json(new { success = false, errors = new List<string> { "Something went wrong. Please try again later." } });
    }
}

3. Update Your View to Show Validation Feedback #

We'll add a validation message area and tweak the AJAX script to handle the response and display errors (or success messages) properly:

<form id="myForm">
    @Html.TextBoxFor(model => model.Email, new { @class = "form-control", @placeholder = "Email" })
    <!-- Add validation message container for email field -->
    @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger mt-2" })
    <!-- General error/success message area -->
    <div id="formMessage" class="mt-2"></div>
    <input type="button" value="SignUp" class="btn-block btn-primary mt-3" id="btnSubmit"/>
</form>

<script>
$(document).ready(function () {
    $("#btnSubmit").click(function () {
        // Clear previous messages first
        $("#formMessage").html("");
        $("#Email-error").html("");

        var data = $("#myForm").serialize();
        $.ajax({
            type: "POST",
            url: "/News/Index",
            data: data,
            dataType: "json",
            success: function (response) {
                if (response.success) {
                    // Show success message and reset form
                    $("#formMessage").html('<div class="text-success">' + response.message + '</div>');
                    $("#myForm")[0].reset();
                } else {
                    // Compile and show all errors
                    var errorHtml = '<div class="text-danger">';
                    response.errors.forEach(function(error) {
                        errorHtml += '<p>' + error + '</p>';
                    });
                    errorHtml += '</div>';
                    $("#formMessage").html(errorHtml);

                    // Populate email-specific error if exists
                    var emailError = response.errors.find(err => err.includes("Email"));
                    if (emailError) {
                        $("#Email-error").html(emailError);
                    }
                }
            },
            error: function() {
                $("#formMessage").html('<div class="text-danger">Failed to connect to server. Please try again.</div>');
            }
        });
    });
});
</script>

4. Optional: Add Instant Client-Side Validation #

For a smoother user experience, enable ASP.NET MVC's built-in client-side validation. Just make sure these scripts are included in your view (usually in your Layout.cshtml):

<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

This will validate the email field in real-time as the user types, without waiting for a server round-trip.

Next Steps for Extension #

With this foundation, you can easily expand your form:

• Add more validation rules (e.g., [MaxLength] for email length)
• Add a loading state to the submit button during AJAX calls
• Implement spam protection like reCAPTCHA
• Add custom logic to check if the email is already subscribed
• Style validation messages to match your site's design

内容的提问来源于stack exchange，提问作者See Sharp