在剃刀视图中添加html元素

本文关键字：html 元素 添加 剃刀 视图 | 更新日期: 2023-09-27 18:28:20

我对剃须刀很陌生，我总是使用aspx页面，我试图创建一个包含2个文本和一个提交按钮的登录表单，然后我试图添加一个带有渐变和hoover的方形菜单，但我被卡住了。

这是我的登录名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>

通过这种方式，谷歌和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和html的问题。

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