Question

我是剃须刀的新手我总是使用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元素放入剃刀内已经有表格的页面？

谢谢

Answer 1

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

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

在剃刀视图中添加html元素

1 个答案: