Asp.Net Mvc Form does not send data to controller

December 12, 2021

I have an Index.cshtml page which displays a generic login page using Bootstrap. The code looks like this:

@model Accurecord_Direct.Models.Login.  
@{
    ViewData["Title"] = "Home Page";
    Layout = "~/Views/Shared/_NoMenu.cshtml";
}
<body>
@using (Html.BeginForm("LogIn", "Home", FormMethod.Post))
{
<section class="vh-100" style="background-color: #508bfc;">
    <div class="container py-5 h-100">
        <div class="row d-flex justify-content-center align-items-center h-100">
            <div class="col-12 col-md-8 col-lg-6 col-xl-5">
                <div class="card shadow-2-strong" style="border-radius: 1rem;">
                    <div class="card-body p-5 text-center">

                        <h3 class="mb-5">Log in</h3>

                        <div class="form-outline mb-4">
                            <input type="text" id="UserID" class="form-control form-control-lg" />
                            <label class="form-label" for="UserID">User ID</label>
                        </div>

                        <div class="form-outline mb-4">
                            <input type="password" id="Password" class="form-control form-control-lg" />
                            <label class="form-label" for="Password">Password</label>
                        </div>

                        <button class="btn btn-primary btn-lg btn-block" type="submit">Login</button>

                        <hr class="my-4">

                        <button class="btn btn-lg btn-block btn-primary" style="background-color: #dd4b39;" type="submit" asp-action="ForgotUserID"><i class="fab fa-google me-2"></i> Forgot User ID</button>
                        <button class="btn btn-lg btn-block btn-primary mb-2" style="background-color: #3b5998;" type="submit" asp-action="ForgotPassword"><i class="fab fa-facebook-f me-2"></i>Forgot Password</button>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
}
</body>

My model looks like this:

using System;  
namespace Accurecord_Direct.Models
{
    public class Login
    {
        public string UserID { get; set; }
        public string Password { get; set; }
    }
}

Any my controller looks like this:

    public IActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult LogIn(IFormCollection form, [FromForm] Login newLogin)
    {
        return RedirectToAction("Index");
    }

    [HttpPost]
    [Route("ForgotUserID")]
    public IActionResult ForgotUserID()
    {
        return View("ForgotUserID");
    }

    [HttpPost]
    [Route("ForgotPassword")]
    public IActionResult ForgotPassword()
    {
        return View("ForgotPassword");
    }

I run my application with a breakpoint set at the return in the ActionResult LogIn in the controller. When the breakpoint it hit, I look at the watch window for the variable newLogin. When I expand the variable, I see the two methods, UserID and Password, but they both have a value of (null). I am entering letters in the form prior to hitting the submit button.

Why wouldn’t the form data get passed to the controller?

Thank you!

>Solution :

fix the action

    [HttpPost]
    public ActionResult LogIn (Login newLogin)
    {
        return RedirectToAction("Index");
    }

and add asp-for for a view inputs

<div class="form-outline mb-4">
  <input type="text" asp-for="UserId" class="form-control form-control-lg"/>
<label class="form-label" for="UserID">User ID</label>
</div>
 <div class="form-outline mb-4">
<input type="password" asp-for=Password  class="form-control form-control-lg" />
 <label class="form-label" for="Password">Password</label>
 </div>