ASP.NET MVC调用Html.BeginForm()后视图样式不识别问题

问题现象 #

在登录视图添加@using(Html.BeginForm())代码后，预先编写的自定义登录样式无法正常加载渲染，页面样式错乱，效果如下：

故障根因 #

代码存在两处违反HTML渲染规则的问题，直接导致DOM解析异常、样式匹配失败：

• 视图顶部已经指定使用共享布局页Layout = "~/Views/Shared/_Layout.cshtml"，但又在当前视图内重复编写了完整的HTML文档结构（包含<!DOCTYPE html>、<html>、<head>、<body>全套标签）。布局页本身已经内置了这些全局标签，最终输出到浏览器的页面会出现多层html/head/body标签嵌套，浏览器DOM树解析错乱，样式自然无法正常生效。
• Html.BeginForm()是Razor封装的表单生成方法，本身就会自动渲染外层<form>标签，你在该方法的代码块内部又手写了一层<form>标签，造成表单嵌套——这是HTML规范明确禁止的写法，不仅会导致表单提交逻辑异常，还会让你写的.login-form form样式选择器匹配不到正确的DOM节点。

修复方案 #

按照以下步骤调整代码即可，调整后样式仅在当前登录页生效，不会影响其他页面：

• 删除当前视图内多余的全局HTML结构：移除<!DOCTYPE html>、<html>、<head>、<body>以及对应的闭合标签，这些内容统一由布局页承载。
• 删除Html.BeginForm()内部手写的冗余<form>标签，直接将登录表单的内容放在Html.BeginForm()代码块内部即可，不需要额外套form标签。
• 将当前页专属的自定义样式通过MVC的Section机制注入到布局页的head区域：先确认你的_Layout.cshtml的<head>标签内存在@RenderSection("Styles", required: false)配置（如果没有就手动加这一行，用来预留当前页自定义样式的注入位置），然后把登录页的自定义样式放在当前视图的@section Styles {}代码块中。

修复后完整视图代码 #

@model ContugasApp.Models.Login
    
@{
    ViewBag.Title = "Login";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section Styles {
    <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">
        <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>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

补充说明：如果你的布局页没有预留Styles节点，也可以直接把style标签放在Html.BeginForm()代码块的上方，不使用section注入，只是不符合MVC的规范写法，同样能让样式生效，但推荐用section的方式把样式放到head区域，避免页面渲染闪屏。

内容的提问来源于stack exchange，提问作者Emmanuel