lundi 16 avril 2018

Hide elements in the view if the model state is invalid

Imagine a simple form that takes an email input like this:

@using (Html.BeginForm("save", "email", FormMethod.Post, new {  @id = "my__form" }))
{
    <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'></div>
}

The spinner is not displayed initially (CSS):

   .spinner {
       display: none;
   }

On form submit I show a spinner on the page:

$('.btn').on("click", function (event) {
   event.preventDefault();
   $('#my__form').submit();
   $('.spinner').show();
});

My action is as follows:

[HttpPost]
[Route("email")]
public ActionResult Save(EmailViewModel model)
{
    if (ModelState.IsValid)
    {
        //Do stuff with email 
        return RedirectToAction("action", "contoller");
    }
    return View(model);
 }

Think of the above as pseudo-code that represents a more generic issue.

If a model state is invalid and the UI is updated in some way (in this case showing a spinner), what's the pattern or mechanism to reset the form?

For clarity, I am not talking here about standard data validation etc. I've tried having a hidden input on the form that I can populate using ModelState.AddModelError("spinner", false) and then acts as a 'switch' that javascript can read and then hide the spinner. This feels like a hack.

It feels like this is a common problem to which there is a common solution?

Aucun commentaire:

Enregistrer un commentaire