Modal form validation in asp.net core 2.1 and Razor pages

Question

I have a Details.cshtml page displaying a customer's details as well as the linked list of customer.sites. On the page I've created a button to add a new site which opens a bootstrap modal containing the form for entry of a new site.

The problem I'm having is with validation. If the form is not valid, then the page reloads but the modal is hidden again, meaning the asp-validation-for text is not seen unless the user clicks the add site button again. Is there any way to make it so that when the ModelState.IsValid is not valid then modal stays open automatically?

details.cshtml page

@page "{id:int?}"
@model ServiceManager.Pages.Customers.DetailsModel

@{
    ViewData["Title"] = "Details";
}
@Html.DisplayFor(model => model.Customer.Name)



    
        
            
                Add New Customer Site
                
            
            
                
                    
                    
                        
                        
                        
                    
                    
                        
                        
                        
                    
                    
                        
                        
                        
                    
                    
                        
                        
                        
                    
                    
                        
                        
                        
                    
                    
                        
                        
                        
                    
                    
                        
                        
                        
                    
                    
                        
                        
                        
                    
                    
                        
                    
                    
                        
                        
                    
                
            
        
    


    
        
    
    @if (Model.Customer.CustomerType == "Domestic")
    {
        
            
        
    }
    else
    {
        
            
        
    }
        
            
        


    
        
            Customer Details
            
                
                    
                        @Html.DisplayNameFor(model => model.Customer.AccountRef)
                    
                    
                        @Html.DisplayFor(model => model.Customer.AccountRef)
                    
                    
                        @Html.DisplayNameFor(model => model.Customer.ContactDate)
                    
                    
                        @Html.DisplayFor(model => model.Customer.ContactDate)
                    
                    
                        @Html.DisplayNameFor(model => model.Customer.Active)
                    
                    
                        @Html.DisplayFor(model => model.Customer.Active)
                    
                
            
        
    
    
        
            Customer Sites
            
                @foreach (var item in Model.Customer.Sites)
                {
                    
                }
            
                
                    Description
                    Location
                    Telephone
                

                        
                            @Html.DisplayFor(modelItem => item.Description)
                        
                        
                            @Html.DisplayFor(modelItem => item.City)
                        
                        
                            @Html.DisplayFor(modelItem => item.Telephone)

Details.cshtml.cs page

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using ServiceManager.Models;

namespace ServiceManager.Pages.Customers
{
    public class DetailsModel : PageModel
    {
        private readonly CompanyContext _context;

        public DetailsModel(CompanyContext context)
        {
            _context = context;
        }

        public Commercial Customer { get; set; }


        public async Task OnGetAsync(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }

            Customer = await _context.Commercial
                .Include(c => c.Sites)
                .Include(c => c.Contacts)
                .FirstOrDefaultAsync(m => m.ID == id);

            if (Customer == null)
            {
                return NotFound();
            }
            return Page();
        }

        [BindProperty]
        public Address Site { get; set; }

        public async Task OnPostAsync(int? id)
        {

            if (!ModelState.IsValid)
            {
                Customer = await _context.Commercial
                .Include(c => c.Sites)
                .Include(c => c.Contacts)
                .FirstOrDefaultAsync(m => m.ID == id);

                return Page();
            }
            _context.Address.Add(Site);
            await _context.SaveChangesAsync();
            return RedirectToPage("./Index");  
        }
    }
}

StaticBeagle · Accepted Answer

One way to address this issue is to perform client side validation using jQuery before you submit the form. That way the modal stays open and the user gets instant feedback on what the errors are.

Another alternative and perhaps less invasive in this case, is to pass a flag from the server back to the client with the status of the model validation and then open the modal based on the value of such flag e.g.

Controller:

   public async Task OnPostAsync(int? id)
    {

        if (!ModelState.IsValid)
        {
            Customer = await _context.Commercial
            .Include(c => c.Sites)
            .Include(c => c.Contacts)
            .FirstOrDefaultAsync(m => m.ID == id);
            ViewData["ModelIsValid"] = false;
            return Page();
        }
        ViewData["ModelIsValid"] = true;
        _context.Address.Add(Site);
        await _context.SaveChangesAsync();
        return RedirectToPage("./Index");  
    }

View:

The main drawback of the second approach is that the modal will popup after the page has rendered instead of staying open.

Modal form validation in asp.net core 2.1 and Razor pages

Answers (1)

Related Questions