Question

我有一种情况，我需要决定在客户端布尔值和服务器端布尔值中包含一个html链接，如下所示：

const preloadSupported = () => {
              const link = document.createElement('link');
              const relList = link.relList;
              if (!relList || !relList.supports)
                return false;
              return relList.supports('preload');
            };

if (!@Model.oldLayout && preloadSupported())
{
    <link rel="preload" href="staticResource.js" as="script" />
}

或

if (@Model.oldLayout) //server side boolean
{
    if (preloadSupported()) // client side boolean
    {
        @foreach (var url in Model.cssUrls)
        {
            <link rel="preload" href="@Html.StaticFile(url)" as="script"/>
        }
    }
    else
    {
        @foreach (var url in Model.cssUrls)
        {
            <link rel="prefetch" href="@Html.StaticFile(url)"/>
        }
    }   
}

我应该怎么做？我尝试了不同的变化，但没有一个有效！感谢您的帮助

Answer 1

您需要将此代码放在您的javascript标记内的剃刀文件中。

从服务器传入脚本的URL，或者在javascript代码中对其进行硬编码。

<script>
    @if (!Model.OldLayout)
    {
        <text>
        if (preloadSupported())
        {
            loadScript("/scripts/script01.js");
            loadScript("/scripts/script02.js");

            function loadScript(url)
            {
                var script = document.createElement('script');
                document.head.appendChild(script);
                script.onload = function()
                {
                    // Do anything with the script here (because it's now loaded)
                };
                script.src = url;
            }
        }
        </text>
    }
</script>

Answer 2

混合服务器端和客户端代码可能很棘手。您可以将渲染的服务器端代码与javascript一起使用，但它实际上无法正常工作。

在您的第一个示例中，if语句必须是：

if (!('@Model.oldLayout' === 'True') && preloadSupported())
{
    //..link
}

这里的问题是链接在解析和呈现页面之前不会存在。您可以使用document.write，createElement或jquery $.load()来添加它，但这取决于外部文件的用途和必须添加的时间。

最好的选择是检查＆＃34; preloadSupport＆＃34;较早，或者如果支持预加载则重定向访问者并创建新响应。

将服务器端razor布尔值与客户端布尔值结合使用以包含链接

2 个答案: