在 Razor 视图中添加 html 元素答案

【问题标题】：Add html elements in razor view在 Razor 视图中添加 html 元素
【发布时间】：2015-12-28 02:10:44
【问题描述】：

我对剃须刀非常陌生，我总是使用 aspx 页面，我正在尝试使用带有 2 个文本和一个提交按钮的登录表单，我正在尝试添加一个带有渐变和胡佛的方形菜单，但我得到了卡住了。

这是我的 Login.cshtml：

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

@if (TempData["message"] != null)
{
<script type="text/javascript">
    alert(@Html.Raw(Json.Encode(TempData["message"])));
</script>
}

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    @Html.AntiForgeryToken()
     <div>
      <table>
        <tr>
            <td>@Html.LabelFor(a => a.Username)</td>
            <td>@Html.TextBoxFor(a => a.Username)</td>
            <td>@Html.ValidationMessageFor(a => a.Username)</td>
        </tr>
        <tr>
            <td>@Html.LabelFor(a => a.Password)</td>
            <td>@Html.PasswordFor(a => a.Password)</td>
            <td>@Html.ValidationMessageFor(a => a.Password)</td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" value="Login" />
            </td>
            <td></td>
        </tr>
    </table>
</div>
}

<div style="background: grey">
<div style="float: left; margin-left: 35%; width: 15%; background: linear-gradient(red, orange);">
    <div style="height: 30%; border: 1px solid;">
        @Html.ActionLink("Contatti", "Contatti")
    </div>
    <div style="height: 30%; border: 1px solid;">
        @Html.ActionLink("Dove Siamo", "DoveSiamo", null, new { @style = "position: relative; top: 90%;" })
    </div>
</div>
<div style="float: right; margin-right: 35%; width: 15%; text-align: right; background: linear-gradient(green, yellow);">
    <div style="height: 30%; border: 1px solid;">
        @Html.ActionLink("Informazioni", "Informazioni")
    </div>
    <div style="height: 30%; border: 1px solid;">
        @Html.ActionLink("Chi Siamo", "ChiSiamo", null, new { @style = "position: relative; top: 90%;" })
    </div>
</div>

通过这种方式，google 和 firefox 以正常方式呈现带有 actionlink 的 div，但 IE 不呈现高度，所以我添加了一个布局页面：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
      @RenderBody()
    </div>
</body>
</html>

@RenderSection("scripts", required: false)

现在 IE、Chrome 和 Firefox 正在使用没有高度的动作渲染 div，我想这不是放置未链接到表单的 HTMl 元素的正确方法，但是如何将其他 HTML 元素放入剃须刀中已经有表单的页面？

谢谢

【问题讨论】：

我认为您的 HTML 标记没有任何问题。究竟是什么问题？该描述听起来像是一个 CSS 样式问题，与服务器端视图引擎无关。
问题是背景灰色只有在我把它放在包含表单的 div 内时才会出现，如果我把它放在我需要的 div 中，begin 表单之外的地方不会出现，因为 div 是一切都搞砸了，它没有设置其他 div 的高度。

标签： c# razor

【解决方案1】：

我认为这主要是 css 和 html 的问题。

- 我没有看到<div style="background: grey"> 的结束标记，我会验证它是否正确关闭。
- 你有两个浮动 div，我会在关闭 <div style="background: grey"> 标签之前添加一个额外的标签 <div style='clear:both'>。这将清除该点之后的浮动。
- 在1.和2.之后，如果你没有看到灰色背景，我会怀疑内部div覆盖了背景，如果是这样，我会在父标签中添加一些填充，例如<div style="background: grey; padding: 10px;">

【讨论】：