Asp.net Core Razor Pages Unable to fetch value from csHTML to C#

Question

Customer Model

public class CustomerModel
{
  
    [Required]
    public string FirstName { get; set; }

    [Required]
    public string LastName { get; set; }

    [Required]
    public string Contact { get; set; }

    [Required]
    public int Notifications { get; set; }

    [Required]
    public int InfoCollect { get; set; }

    [Required]
    public string Email { get; set; }
    public UserModel User { get; set; }

}

UserModel Class

     public class UserModel
        {
            [Key]
            [Required]
            public string Email { get; set; }
            [Required]
            public string Password { get; set; }
            [Required]
            public string AccountType { get; set; }
        }
    }

Data Context

        public class OnlineFoodOrderingWebApplicationContext : DbContext
        {
            public OnlineFoodOrderingWebApplicationContext (DbContextOptions<OnlineFoodOrderingWebApplicationContext> options)
                : base(options)
            {
            }
            public DbSet<OnlineFoodOrderingWebApplication.Models.UserModel> NewUser { get; set; }
            public DbSet<OnlineFoodOrderingWebApplication.Models.CustomerModel> Customer { get; set; }
            public DbSet<OnlineFoodOrderingWebApplication.Models.StaffModel> Staff { get; set; }
       
     protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
         
            modelBuilder
                .Entity<CustomerModel>(eb =>
                {
                    eb.HasNoKey();
                });
            modelBuilder
             .Entity<StaffModel>(eb =>
             {
                 eb.HasNoKey();
             });
        }
    }

Register Page HTML

<div class="form-group">
        <div class="form-row">
            <div class="col-md-6">
                <div class="form-label-group">
                    <input name="firstName" type="text" class="form-control" placeholder="First name" required="required" asp-for="Customer.FirstName" />
                    <label for="firstName">First name</label>
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-label-group">
                    <input type="text" name="lastName" class="form-control" placeholder="Last name" required="required" asp-for="Customer.LastName" />
                    <label for="lastName">Last name</label>
                </div>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="form-label-group">
            <input type="email" name="inputEmail"  class="form-control" placeholder="Email address" required="required" asp-for="NewUser.Email" />
            <label for="inputEmail">Email address</label>
        </div>
    </div>

    <div class="form-group">
        <div class="form-label-group">
            <input type="text" name="inputContact" asp-for="Customer.Contact" class="form-control" placeholder="Contact Number" required="required" />
            <label for="inputContact">Contact Number</label>
        </div>
    </div>

    <div class="form-group">
        <div class="form-row">
            <div class="col-md-6">
                <div class="form-label-group">
                    <input type="password" name="inputPassword" asp-for="NewUser.Password" class="form-control" placeholder="Password" required="required" />
                    <label for="inputPassword">Password</label>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-label-group">
                    <input type="password" name="confirmPassword" class="form-control" placeholder="Confirm password" required="required" />
                    <label for="confirmPassword">Confirm password</label>
                </div>
            </div>
        </div>
    </div>
    @if (!ViewData.ModelState.IsValid && ViewData.ModelState["Error"].Errors.Count > 0)
    {
        <div class="alert alert-
             <strong>Error!</strong> danger">@ViewData.ModelState["Error"].Errors.First().ErrorMessage
        </div>
    }
    <button class="btn btn-primary btn-block" type="submit"> Send Message</button>

Register Page html.cs

public class RegisterModel : PageModel
{
    private readonly ILogger<IndexModel> _logger;


    private readonly OnlineFoodOrderingWebApplication.Data.OnlineFoodOrderingWebApplicationContext _context;

    public RegisterModel(OnlineFoodOrderingWebApplication.Data.OnlineFoodOrderingWebApplicationContext context, ILogger<IndexModel> logger)
    {
        _context = context;
        _logger = logger;
    }
   

    public void OnGet()
    {

    }
   
    public IActionResult Create()
    {
        return Page();
    }
   

    [BindProperty]
    public CustomerModel Customer { get; set; }
    [BindProperty]
    public UserModel NewUser { get; set; }



    public IActionResult OnPost()
    {
        if (ModelState.IsValid == false)
        {
            NewUser.AccountType = "Customer";
            ModelState.AddModelError("Error", "This is Error"+ NewUser.AccountType+ NewUser.Password+Customer.LastName);
            return Page();
        }

        
        Customer.Notifications = 1;
        Customer.InfoCollect = 1;

        _context.NewUser.Add(NewUser);

        return RedirectToPage("/Index");
    }


}

There is a bug that i unable to fetch the "NewUser" data from html input to the OnPost Method. However, that seems to be the same with "Customer" but the "Customer" has worked well that able to get the data from the input.

Answer 1

In order to make your OnPost method catch your html input parameters you have to wrap them inside the form tag. So your Register Page Html must look like that:

  <form method="post">
   <div class="form-group">
      <div class="form-row">
         <div class="col-md-6">
            <div class="form-label-group">
               <input name="firstName" type="text" class="form-control" placeholder="First name" required="required" asp-for="Customer.FirstName" />
               <label for="firstName">First name</label>
            </div>
         </div>
         <div class="col-md-6">
            <div class="form-label-group">
               <input type="text" name="lastName" class="form-control" placeholder="Last name" required="required" asp-for="Customer.LastName" />
               <label for="lastName">Last name</label>
            </div>
         </div>
      </div>
   </div>
   <div class="form-group">
      <div class="form-label-group">
         <input type="email" name="inputEmail"  class="form-control" placeholder="Email address" required="required" asp-for="NewUser.Email" />
         <label for="inputEmail">Email address</label>
      </div>
   </div>
   <div class="form-group">
      <div class="form-label-group">
         <input type="text" name="inputContact" asp-for="Customer.Contact" class="form-control" placeholder="Contact Number" required="required" />
         <label for="inputContact">Contact Number</label>
      </div>
   </div>
   <div class="form-group">
      <div class="form-row">
         <div class="col-md-6">
            <div class="form-label-group">
               <input type="password" name="inputPassword" asp-for="NewUser.Password" class="form-control" placeholder="Password" required="required" />
               <label for="inputPassword">Password</label>
            </div>
         </div>
         <div class="col-md-6">
            <div class="form-label-group">
               <input type="password" name="confirmPassword" class="form-control" placeholder="Confirm password" required="required" />
               <label for="confirmPassword">Confirm password</label>
            </div>
         </div>
      </div>
   </div>
   @if (!ViewData.ModelState.IsValid && ViewData.ModelState["Error"].Errors.Count > 0)
   {
   <div class="alert alert-
      <strong>Error!</strong> danger">@ViewData.ModelState["Error"].Errors.First().ErrorMessage
   </div>
   }
   <button class="btn btn-primary btn-block" type="submit"> Send Message</button>
</form>