.cshtml 页面上的 Razor @{ } 方法不允许文本或 href 选择答案

【问题标题】：Razor @{ } method on .cshtml page not allowing text or href selection.cshtml 页面上的 Razor @{ } 方法不允许文本或 href 选择
【发布时间】：2020-11-08 01:36:58
【问题描述】：

我已经在 .Net Core 身份中搭建了我的 RegisterConfirmation 页面。我的cshtml代码如下。

@page
@model RegisterConfirmationModel
@using LazZiya.ExpressLocalization
@inject ISharedCultureLocalizer _loc
@{
    ViewData["Title"] = _loc[Model.PageTabTitle];
}

@section header_image{
    <div class="bg-img-non-home" id="RegisterPageBanner">
}
@section header_content{
    <div class="container-title">
        <div class="block-title">
            <br>
            <h1 class="block-subtitle-text" id="RegisterPageSubtitle">@_loc[Model.SubTitle]</h1>
            <h2 class="block-title-text-non-home" id="RegisterPageTitle">@_loc[Model.Title]</h2>
        </div>
    </div>
}
</div>
    <body class="body-bg-img">
        <div class="container-body">
            <div class="row justify-content-center align-items-center">
                <div class="col">
                    <br />
                    <h2 class="font-style-content-head" id="RegisterConfHeading">@_loc[Model.Heading]</h2>
                    <hr />
                </div>
            </div>
            <br />
        </div>
        <div class="container-body">
            <div class="row justify-content-center align-items-center">
                <hr />
                @{
                    if (@Model.DisplayConfirmAccountLink)
                    {
                        <p>
                            This app does not currently have a real email sender registered, see <a href="https://aka.ms/aspaccountconf">these docs</a> for how to configure a real email sender.
                            Normally this would be emailed: <a id="confirm-link" href="@Model.EmailConfirmationUrl">Click here to confirm your account</a>
                        </p>
                    }
                    else
                    {
                        <p>
                            Please check your email to confirm your account.
                        </p>
                    }
                }
            </div>
        </div>
    </body>

如果@section header_content 存在，页面上的所有内容都会显示。但是我的if 语句中的文本无法用鼠标突出显示，并且无法单击a href 链接。如果我删除下面的代码部分，那么我的 if 语句中的文本可以使用鼠标突出显示，并且 href 可以正常工作。

@section header_content{
    <div class="container-title">
        <div class="block-title">
            <br>
            <h1 class="block-subtitle-text" id="RegisterPageSubtitle">@_loc[Model.SubTitle]</h1>
            <h2 class="block-title-text-non-home" id="RegisterPageTitle">@_loc[Model.Title]</h2>
        </div>
    </div>
}
</div>

更新：当我放大时它工作正常。此外，如果我在 if 语句中添加大量文本，它不会换行，它只会超过 body-bg-img 图像的宽度。当文本超过页面宽度时，我可以选择文本...

【问题讨论】：

看起来您正在使用引导程序。您可以使用'fixed-top'锚定顶部图像getbootstrap.com/docs/4.1/components/navbar/#placement

标签： asp.net-core razor razor-pages

【解决方案1】：

这更像是一种解决方法而不是答案。通过使用换行符将我的文本向下推，它可以正常工作。对于其他大多数页面来说不是解决方案，但是因为这只是页面上很少组件的注册确认，所以我可以让它工作。

我猜这是我的@section header_image 的 css 大小问题。一种解决方案可能是检查 css，或者创建一个高度降低的切碎标题图像并在此页面上使用它。不过在这种情况下我不需要费心。

<body class="body-bg-img">
    <div class="container-body">
        <div class="row justify-content-center align-items-center">
            <div class="col">
                <br />
                <br />
                <h2 class="font-style-content-head" id="RegisterConfHeading">@_loc[Model.Heading]</h2>
                <hr />
            </div>
        </div>
        <br />
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <div class="container-body">
        <div class="row justify-content-center align-items-center">
            @{
                if (@Model.DisplayConfirmAccountLink)
                {
                    <p>
                        This app does not currently have a real email sender registered, see <a href="https://aka.ms/aspaccountconf">these docs</a> for how to configure a real email sender.
                        Normally this would be emailed: <a id="confirm-link" href="@Model.EmailConfirmationUrl">Click here to confirm your account</a>
                    </p>
                }
                else
                {
                    <p>
                        Please check your email to confirm your account.
                    </p>
                }
            }
        </div>
    </div>
</body>

更新： 以上持续了大约60秒，我无法忍受！ :) 问题是我的块标题 css 样式的硬编码高度值。我将其更改为自动，现在很好。仍然需要进行一些整理以使我的页面整体看起来，但问题已解决。

.block-title {
    width: 520px;
    height: auto;
    text-align: center;
}

【讨论】：