如何在 Razor 模板中正确使用三元运算符 (:?)？

Question

我正在构建一个用于 Sitefinity 网站的自定义大型菜单。我仍在学习 C# 和 Razor，所以请原谅我的代码方法中的任何错误。我使用 Bootstrap 来完成大部分繁重的 CSS 工作。在我的代码中，您可以看到我正在尝试使用三元运算符来检查是否列出了要填充的子菜单的项目。如果是，则添加类下拉列表，如果不添加空格或将其留空，以便不添加该类。我还使用三元运算符来检查网站后面是否选择了大型菜单。其中添加了 has-megamenu 类。我在浏览器中收到以下错误：

错误CS0173：无法确定条件表达式的类型，因为'System.Web.IHtmlString'和'string'之间没有隐式转换

<div class="@Model.CssClass">
  <nav class="navbar navbar-expand-lg">
     <div class="container">
      <div class="d-flex flex-grow-1">
        <a href="/" class="navbar-brand">
          <img src="/images/logo.png" /> 
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse flex-grow-1 text-right" id="main_nav">
      <ul class="navbar-nav ms-auto flex-nowrap">

        @foreach (var item in Model.Items)
          {
              
              string linkClass = "nav-link";
              string toggleAttribute = "";
              string inlineEditingAttribute = "";

              
              var navigateUrl = HyperLinkHelpers.GetDetailPageUrl(item, ViewBag.DetailsPageId, ViewBag.OpenInSamePage, Model.UrlKeyPrefix);
              var subMenuItems = item.Fields.SubMenuItems as IEnumerable<dynamic>;
              bool hasSubMenuItems = subMenuItems != null && subMenuItems.Any();
              var relatedSubMenuItems = item.Fields.RelatedSubMenuItems as IEnumerable<dynamic>;
              bool hasRelatedSubMenuItems = relatedSubMenuItems != null && relatedSubMenuItems.Any();
              bool hasMegaMenu = hasSubMenuItems && subMenuItems.Any(subItem => subItem.MegaMenuSelection.ToHtmlString() ==  @Html.Raw("Yes"));

              
              if (hasSubMenuItems)
              {
                  linkClass += " dropdown-toggle";
                  toggleAttribute = "dropdown";
                  inlineEditingAttribute = Html.InlineEditingFieldAttributes("Title", "ShortText").ToHtmlString();
              }

              <li class="nav-item 
                @(hasSubMenuItems ? "dropdown" : @Html.Raw("&nbsp;")) 
                @(hasMegaMenu ? "has-megamenu" : @Html.Raw("&nbsp;"))" 
                @Html.InlineEditingAttributes(Model.ProviderName, Model.ContentType.FullName, (Guid)item.Fields.Id)>

                <a 
                   class="@linkClass" 
                   data-bs-toggle="@toggleAttribute" 
                   href="@navigateUrl" 
                   @Html.Raw(inlineEditingAttribute)>
                   @item.Fields.Title
                </a>

                if (hasSubMenuItems && !hasMegaMenu)
                {
                    <ul class="dropdown-menu" role="menu">
                        @foreach (var subMenuItem in subMenuItems)
                        {
                            <li data-hasMenu="@subMenuItem.MegaMenuSelection">
                                <a class="dropdown-item" href="@subMenuItem.ItemDefaultUrl">@subMenuItem.Title</a>
                            </li>
                        }
                    </ul>
                }
                
                else if (hasMegaMenu)
                {
                    <div class="dropdown-menu megamenu" role="menu">
                        <div class="row g-4 p-4">
                            <div class="col-lg-4">
                                <ul class="mega-menu-sub-titles">
                                    @foreach (var subMenuItem in subMenuItems)
                                    {
                                        if (subMenuItem != null)
                                        {
                                            <li>
                                                <a href="javascript:void(0);" onclick="showRelatedItems('@subMenuItem.Id')">@subMenuItem.Title</a>
                                            </li>
                                        }
                                    }
                                </ul>
                            </div>
                            <div class="col-lg-4">
                                <ul class="sub-menu-list">
                                    @foreach (var subMenuItem in subMenuItems)
                                    {
                                        <ul class="related-sub-menu" id="[email protected]" style="display:none;">
                                            @foreach (var relatedSubMenuItem in subMenuItem.RelatedSubMenuItems)
                                            {
                                                if (relatedSubMenuItem != null)
                                                {
                                                    <li>
                                                        <a class="dropdown-item" href="@relatedSubMenuItem.ItemDefaultUrl.ToHtmlString()">@relatedSubMenuItem.Title</a>
                                                    </li>
                                                }
                                            }
                                        </ul>
                                    }
                                </ul>
                            </div>
                            <div class="col-lg-4">
                                Column 3
                            </div>
                        </div>
                    </div>
                } 
              </li>
          }
      </ul>
      </div>

    </div>
  </nav>
</div>

我已经厌倦了这段代码的不同变体。我可以让它显示主要导航项和下拉菜单。但是，当我添加代码来检查导航项是否有下拉菜单或大型菜单时。这看起来很简单，很容易弄清楚。但是，这让我跺脚。

Answer 1

如果您只想有条件地设置 css 类，请允许我删除您的大部分代码来演示执行此操作的最小方法。

<ul class="navbar-nav ms-auto flex-nowrap">
    @foreach (var item in Model.Items)
    {
        <li class="@GetCssClass(item)" 
        @Html.InlineEditingAttributes(Model.ProviderName, Model.ContentType.FullName, (Guid)item.Fields.Id)>
        </li>
    }
</ul>
@code 
{
    public string GetCssClass(Item item)
    {
        var subMenuItems = item.Fields.SubMenuItems as IEnumerable<dynamic>;
        bool hasSubMenuItems = subMenuItems != null && subMenuItems.Any();
        var cssClass = hasSubMenuItems ? " dropdown" : string.Empty;
        return $"nav-item{cssClass}";
    }
}

你编写一个方法，然后直接在设置类属性时使用它。