ASP.NET MVC razor : attribut conditionnel en HTML

Question

Le code ci-dessous ne semble pas propre. Une suggestion pour améliorer le code ?

<li @if(ViewData["pagename"].ToString()=="Business details"){ <text>class="active" </text> } >
        <a  @if(ViewData["pagename"].ToString()=="Business details"){ <text>style="color: white; background-color: #08C; border: 1px solid #08C;" </text> }
            href="@Url.Action("BusinessDetails", "Business")">Business Details</a>
    </li> 
    <li @if (ViewData["pagename"].ToString() == "Booking policies"){ <text>class="active"</text> }> 
        <a  @if (ViewData["pagename"].ToString() == "Booking policies")
               { <text>style="color: white; background-color: #08C; border: 1px solid #08C;" </text> }
            href="@Url.Action("BookingPolicies", "Business")">Booking policies</a> 
    </li>

Answer 1

Basé sur les dégivrages répondre ici une adaptation, en prenant un object au lieu d'un string :

    public static MvcHtmlString ConditionalAttr(this HtmlHelper helper, string attributeName, object value, Func<bool> condition)
    {
        if (string.IsNullOrEmpty(attributeName) || value == null)
        {
            return MvcHtmlString.Empty;
        }

        var render = condition != null ? condition() : true;

        return render ? 
            new MvcHtmlString($"{attributeName}=\"{HttpUtility.HtmlAttributeEncode(value.ToString())}\"") : 
            MvcHtmlString.Empty;
    }

Ainsi, vous ne devez pas transformer vos autres types de données en chaînes avant de les transmettre, ce qui permet d'économiser un temps précieux. .ToString() . Il y a une différence. : le passage d'une chaîne vide rendra toujours les données. Par exemple :

@Html.ConditionalAttr("data-foo", "", () => Model.IsFooNeeded)

// Ouput:
data-foo=""

Answer 2

Approche avec la méthode d'extension TagWrap. Le code pour votre question ressemblerait à ceci :

@using (Html.TagWrap("li", condition ? new { @class = "active" } : null))
{
    var anchorAttrs = new Dictionary<string, object> { { "href", Url.Action("BusinessDetails", "Business") } };
    if(condition)
    {
        anchorAttrs["style"] = "color: white; background-color: #08C; border: 1px solid #08C;";
    }
    using (Html.TagWrap("a", anchorAttrs))
    {
        <text>Business Details</text>
    }
}

Méthodes d'extension TagWrap

en utilisant Microsoft.AspNetCore.Mvc.ViewFeatures ;

public static IDisposable TagWrap(this IHtmlHelper htmlHelper, string tagName, object data)
{
    return htmlHelper.TagWrap(tagName, HtmlHelper.AnonymousObjectToHtmlAttributes(data));
}

public static IDisposable TagWrap(this IHtmlHelper htmlHelper, string tagName, IDictionary<string, object> data)
{
    var tag = new TagBuilder(tagName);
    tag.MergeAttributes(data);

    htmlHelper.ViewContext.Writer.Write(tag.RenderStartTag());

    return new DisposableAction(() =>
        htmlHelper.ViewContext.Writer.Write(tag.RenderEndTag()));
}

Classe d'aide utilisée pour rendre la balise de fermeture sur Dispose

public class DisposableAction : IDisposable
{
    private readonly Action DisposeAction;

    public DisposableAction(Action action)
    {
        DisposeAction = action;
    }

    public void Dispose()
    {
        DisposeAction();
    }
}

Answer 3

Puisque les deux conditions if (l'une pour la classe de Li et l'autre pour la balise a) sont identiques, vous pouvez la supprimer. Je vais utiliser une classe css au lieu d'ajouter une définition de style en ligne.

@if(ViewData["pagename"].ToString()=="Business details"){
    <li class="active">
        @Html.ActionLink("BusinesDetails","Business",null,new {@class="clsWhite"})
    </li>
}
else if (ViewData["pagename"].ToString() == "Booking policies")
{
    <li class="active">
        @Html.ActionLink("BookingPolicies", "Business", null, new { @class = "clsWhite" })
    </li>
}

CSS

.clsWhite
{
  color: white; background-color: #08C; border: 1px solid #08C;
}