Simple MVC login page form won't use HttpPost inputs when I have fieldsets around my input boxes

Question

I've been learning .NET and I decided to try MVC by starting a simple login page. I have 2 text fields in a form that are passed to a overloaded controller view method by HttpPost.

The issue is when I have fieldset around both of the inputs for username/password they won't pass the value through what I'm assuming is the HttpPost. My actual logic I think is sound since when I remove the fieldsets from the form it works fine and passes the correct values.

My question is why are the fieldsets messing up? Is there a work around or should I not be using fieldsets in this? Here's my form and my HttpPost controller.

<div> 
    @ViewBag.FailedLogin
    <form id="loginForm" action="/Login/Login" method="post">
        <h1>Log In</h1>
         <fieldset>
            <input id="un" type="text" placeholder="Username" autofocus required>
             <input id="pw" type="password" placeholder="Password" required>
        </fieldset>
        <fieldset id="actions">
            <input type="submit" value="Log in">
            @*<a href="">Forgot your password?</a> <a href="">Register</a>*@
        </fieldset>
    </form>
</div>

And my overloaded controller method

 [HttpPost]
    public ActionResult Login(string un, string pw)
    {
        Models.RoadsEntities dbcon = new Models.RoadsEntities();

        var user = dbcon.tblUsers.Where(m => m.UserName == un&& m.Password == pw).FirstOrDefault();

        if (user != null)
            return View("loginChild");
        else
        {
            ViewBag.FailedLogin = "Incorrect user ID or password";
            return View("Login");
        }

    }

Thank you for the help.

Answer 1

It's better to create a model class which will contain all your current page properties and use it. Moreover, this will be semantically correct because now you are missing "M" from the "MVC".

And yes, this will parse all your data into your model (if it is correct)

Moreover, using model classes you could validate it, check smth and do a lot of useful things in pretty simple way

So, it could be:

public class LoginModel
{
    public string Username { get; set; }

    public string Password { get; set; }
}

Then use it in your view and in your controller:

View:

<fieldset>
    @Html.TextBoxFor(model => model.Username)
    @Html.TextBoxFor(model => model.Password)
</fieldset>

Controller:

public ActionResult Login(LoginModel model)

Answer 2

The fieldset should not give you issues - it's plain HTML. Please refrain from the way that you are doing it. The best way to retain your form values during a post back is to bind your view to a view model.

I wrote an answer as to what a view model is, please go and read it:

What is ViewModel in MVC?

Let us go through it step by step. In your example you are trying to use a login form with a username and password.

First of all create your view model for your form data. Your view model is different to your domain model in that it only contains the data that you want to use on your view. In your example, you will create 2 properties, namely Username and Password:

public class AccountViewModel
{
     public string Username { get; set; }

     public string Password { get; set; }
}

The above view model will be instantiated and be passed to the view from your action method. When your form is posted your action method will receive this view model as a parameter. It will contain the values of username and password (if entered):

public class AccountController : Controller
{
     private IUserRepository userRepository;

     public AccountController(IUserRepository userRepository)
     {
          this.userRepository = userRepository;
     }

     public ActionResult Login()
     {
          AccountViewModel model = new AccountViewModel();

          return View(model);
     }

     [HttpPost]
     public ActionResult Login(AccountViewModel model)
     {
          // Do some form validation
          if (!ModelState.IsValid)
          {
               ViewBag.FailedLogin = "Incorrect user ID or password";

               return View(model);
          }

          // If form validation succeeds do what you need to do
     }
}

In your login view it will receive the above mentioned view model. All that you then need to do is to create a form with 2 textboxes for username and password and a submit button:

@model YourProjectName.ViewModels.AccountViewModel

@using (Html.BeginForm())
{
     <h1>Log In</h1>
     @ViewBag.FailedLogin
     <fieldset>
          <div>
               @Html.TextBoxFor(m => m.Username)
               @Html.ValidationMessageFor(m => m.Username)
          </div>
          <div>
               @Html.TextBoxFor(m => m.Password)
               @Html.ValidationMessageFor(m => m.Password)
          </div>
     </fieldset>
     <fieldset id="actions">
          <button type="submit">Log In</button>
     </fieldset>
}