ASP.NET MVC does not recognize styles in BeginForm

Question

I have a problem when I add the line @using(Html.BeginForm()) it turns out that adding that for my login screen no longer recognizes the added styles. How could I add them correctly? I just need to add that type of style in that View but it doesn't recognize the styles when I add that line of code

@model ContugasApp.Models.Login
    
@{
        ViewBag.Title = "Login";
        Layout = "~/Views/Shared/_Layout.cshtml";
}
    
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Bootstrap Simple Login Form</title>
    
        <style>
            .login-form {
                width: 340px;
                margin: 50px auto;
                font-size: 15px;
            }
    
                .login-form form {
                    margin-bottom: 15px;
                    background: #f7f7f7;
                    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
                    padding: 30px;
                }
    
                .login-form h2 {
                    margin: 0 0 15px;
                }
    
            .form-control, .btn {
                min-height: 38px;
                border-radius: 2px;
            }
    
            .btn {
                font-size: 15px;
                font-weight: bold;
            }
        </style>
</head>
<body>
        @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()
    
            <div class="login-form">
                <form action="/examples/actions/confirmation.php" method="post">
                    <img src="~/Imagenes/contugas_logo.png" width="280" />
                    <h2 class="text-center">Bienvenido</h2>
                    <div class="form-group">
                        @Html.EditorFor(model => model.USUARIO, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.USUARIO, "", new { @class = "text-danger" })
                    </div>
                    <div class="form-group">
                        @Html.EditorFor(model => model.CLAVE, new { htmlAttributes = new { @class = "form-control", type = "password" } })
                        @Html.ValidationMessageFor(model => model.CLAVE, "", new { @class = "text-danger" })
                    </div>
                    <div class="form-group">
                        <input type="submit" value="Iniciar Sesión" class="btn btn-primary btn-block" />
                    </div>
                </form>
            </div>
        }
</body>
</html>
    
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

score 0 · Answer 1 · answered Jul 15 '22 at 02:05

With @using (Html.BeginForm()), this will generate a <form> HTML element. And this leads your HTML page contains a nested <form> element which is not allowed.

Reference: Can you nest html forms?

Your Login form should be:

<div class="login-form">
    @using (Html.BeginForm(null, null, FormMethod.Post
        , new { @action = "/examples/actions/confirmation.php" }))
    {
        @Html.AntiForgeryToken()
    

        <!-- Form fields -->
    }
</div>

Rohit Sharma · Answer 2 · 2022-07-23T15:25:02.413

From below line I am assuming you have Layout page in which you already have head tag. As per W3C standards, you can not have two HEAD tags. On page load, head tag from layout are getting loaded NOT the head tag from login form hence your styles are not loaded.

 Layout = "~/Views/Shared/_Layout.cshtml";

In login page keep only what is required for login form. See below code for example

 @model ContugasApp.Models.Login

 @{
    ViewBag.Title = "Login";
    Layout = "~/Views/Shared/_Layout.cshtml"; 
  }
 
    <style>
        .login-form {
            width: 340px;
            margin: 50px auto;
            font-size: 15px;
        }

            .login-form form {
                margin-bottom: 15px;
                background: #f7f7f7;
                box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
                padding: 30px;
            }

            .login-form h2 {
                margin: 0 0 15px;
            }

        .form-control, .btn {
            min-height: 38px;
            border-radius: 2px;
        }

        .btn {
            font-size: 15px;
            font-weight: bold;
        }
    </style>

    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()

        <div class="login-form">
            <form action="/examples/actions/confirmation.php" method="post">
                <img src="~/Imagenes/contugas_logo.png" width="280" />
                <h2 class="text-center">Bienvenido</h2>
                <div class="form-group">
                    @Html.EditorFor(model => model.USUARIO, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.USUARIO, "", new { @class = "text-danger" })
                </div>
                <div class="form-group">
                    @Html.EditorFor(model => model.CLAVE, new { htmlAttributes = new { @class = "form-control", type = "password" } })
                    @Html.ValidationMessageFor(model => model.CLAVE, "", new { @class = "text-danger" })
                </div>
                <div class="form-group">
                    <input type="submit" value="Iniciar Sesión" class="btn btn-primary btn-block" />
                </div>
            </form>
        </div>
    } 
 @section Scripts {
@Scripts.Render("~/bundles/jqueryval") } // If possible keep this in layout page

ASP.NET MVC does not recognize styles in BeginForm

2 Answers2