如何在模型状态无效时隐藏视图元素？ASP.NET MVC表单示例

Great question! Let's walk through how to handle hiding elements like the spinner and other UI components in your form when the Model State is invalid. We'll cover both server-side (for postbacks and initial loads) and client-side (for smoother user experiences) approaches using your provided form example.

1. Server-Side Conditional Rendering (Core for Postbacks) #

When your form submits and the server determines the Model State is invalid, it returns the view back to the client. We can use Razor syntax directly in the view to toggle element visibility based on ModelState.IsValid.

First, add a simple CSS class to handle hiding elements (put this in your site's CSS file or a <style> tag in the view):

.hidden {
    display: none;
}

Handling the Spinner #

By default, the spinner should be hidden. When the form submits successfully, you might show it, but if Model State is invalid, we need to ensure it stays hidden when the view reloads. Modify the spinner element like this:

<div class='spinner @(!ModelState.IsValid ? "hidden" : "")'></div>

When ModelState.IsValid is false (invalid), the hidden class is added, hiding the spinner automatically when the view renders.

Adjusting Other Elements #

You can apply the same logic to other elements too:

• Error Summary: Show an alert only when there are validation issues

  @if (!ModelState.IsValid)
  {
      <div class="error-alert">
          Please correct the errors below and try again.
      </div>
  }
  

• Success Message: Hide a success notification when Model State is invalid

  <div class="success-message @(ModelState.IsValid ? "" : "hidden")">
      Your email was saved successfully!
  </div>
  

Updating the Submit Button #

If you disabled the submit button client-side during submission, the server-side render will automatically reset it to enabled when Model State is invalid. Keep the button markup clean—no extra attributes needed:

<button type="submit" class="btn">Save email</button>

2. Client-Side Handling (For Smoother UX) #

For a better user experience, show the spinner and disable the button when the user submits the form, then reset those elements if the server returns invalid Model State. Here's how to do that with vanilla JavaScript:

Add this script at the bottom of your view (or in a separate JS file):

document.getElementById('my__form').addEventListener('submit', function(e) {
    const spinner = document.querySelector('.spinner');
    const submitBtn = this.querySelector('.btn[type="submit"]');

    // Show spinner and disable button when submission starts
    spinner.classList.remove('hidden');
    submitBtn.disabled = true;

    // For regular (non-AJAX) submission, the server-side logic will reset the UI on reload.
    // For AJAX submission, add the code below:
    e.preventDefault(); // Prevent default form submit

    fetch(this.action, {
        method: this.method,
        body: new FormData(this)
    })
    .then(response => response.text())
    .then(html => {
        // Replace the form container with the updated view from the server
        document.querySelector('#form-container').innerHTML = html;
        
        // Reset UI: hide spinner and re-enable button
        const newSpinner = document.querySelector('.spinner');
        const newSubmitBtn = document.querySelector('.btn[type="submit"]');
        newSpinner.classList.add('hidden');
        newSubmitBtn.disabled = false;
    })
    .catch(err => {
        // Handle errors and reset UI
        spinner.classList.add('hidden');
        submitBtn.disabled = false;
        console.error('Submission error:', err);
    });
});

Putting It All Together #

Here's your modified form with all the server-side logic included:

@using (Html.BeginForm("save", "email", FormMethod.Post, new { @id = "my__form" })) {
    @if (!ModelState.IsValid)
    {
        <div class="error-alert">Please fix the errors below and try again.</div>
    }

    <div class="field">
        @Html.LabelFor(model => model.Email)
        @Html.ValidationMessageFor(model => model.Email)
        @Html.TextBoxFor(model => model.Email, new { @placeholder = "Enter your email", @type = "email" })
    </div>

    <button type="submit" class="btn">Save email</button>
    <div class='spinner @(!ModelState.IsValid ? "hidden" : "")'></div>

    <div class="success-message @(ModelState.IsValid ? "" : "hidden")">Email saved successfully!</div>
}

内容的提问来源于stack exchange，提问作者Alex P