web-dev-qa-db-ja.com

かみそりビューエンジンでオプションのHTML属性を簡潔に作成する方法は？

次のコードを少ないコード行（多分5）で書く方法を探しています。選択したクラスと同じことができると思いますが、このかみそりの構文はきれいに見えません。

<ul>
@foreach (var mi in Model.MenuItems) {
  <li@(mi.Selected?" class=\"selected\"":null)>
  @if (string.IsNullOrEmpty(mi.Title)) {
    <a href="@mi.Href">@mi.Text</a>
  } else {
    <a href="@mi.Href" title="@mi.Title">@mi.Text</a>
  }
  </li>
}
</ul>
asp.net-mvcrazorviewengine
40
JarrettV

ASP.NET MVC 4で修正済み

参照してください http://weblogs.asp.net/jgalloway/archive/2012/02/16/asp-net-4-beta-released.aspx

条件付き属性のレンダリング

Nullの可能性がある属性がある場合、以前は次のように空の属性を書き出さないようにnullチェックを行う必要がありました。

<div @{if (myClass != null) { <text>class="@myClass"</text> } }>Content</div>

これで、Razorは自動的にそれを処理できるため、属性を書き出すことができます。 nullの場合、属性は書き込まれません。

<div class="@myClass">Content</div>

したがって、@ myClassがnullの場合、出力は次のようになります。

<div>Content</div>
54
JarrettV

以下のRazor構文を許可するために、チェーン可能なHtmlAttributeクラスといくつかのHtml拡張メソッドを考え出しました。

<ul> 
    @foreach (var mi in items) { 
    <li @Html.Css("selected", mi.Selected)> 
        <a href="@mi.Href" @Html.Attr("title", mi.Title)>@mi.Text</a> 
    </li> 
    } 
</ul>

次にHtmlAttributeクラスを示します。

public class HtmlAttribute : IHtmlString     
{
    private string _InternalValue = String.Empty;
    private string _Seperator;

    public string Name { get; set; }
    public string Value { get; set; }
    public bool Condition { get; set; }

    public HtmlAttribute(string name)
        : this(name, null)
    {
    }

    public HtmlAttribute( string name, string seperator )
    {
        Name = name;
        _Seperator = seperator ?? " ";
    }

    public HtmlAttribute Add(string value)
    {
        return Add(value, true);
    }

    public HtmlAttribute Add(string value, bool condition)
    {
        if (!String.IsNullOrWhiteSpace(value) && condition)
            _InternalValue += value + _Seperator;

        return this;
    }

    public string ToHtmlString()
    {
        if (!String.IsNullOrWhiteSpace(_InternalValue))
            _InternalValue = String.Format("{0}=\"{1}\"", Name, _InternalValue.Substring(0, _InternalValue.Length - _Seperator.Length));
        return _InternalValue;
    }
}

追加情報：「セパレーター」は、属性の複数の値を連結するために使用されます。これは、複数のcssクラス名（スペースを使用）またはString.Emptyを使用して（.Add（）メソッドを使用して）複数の条件に依存する値を構築する場合に役立ちます。

そして、これがHtml Extensionヘルパーメソッドです。

public static class Extensions
{
    public static HtmlAttribute Css(this HtmlHelper html, string value)
    {
        return Css(html, value, true);
    }

    public static HtmlAttribute Css(this HtmlHelper html, string value, bool condition)
    {
        return Css(html, null, value, condition);
    }

    public static HtmlAttribute Css(this HtmlHelper html, string seperator, string value, bool condition)
    {
        return new HtmlAttribute("class", seperator).Add(value, condition);
    }

    public static HtmlAttribute Attr(this HtmlHelper html, string name, string value)
    {
        return Attr(html, name, value, true);
    }

    public static HtmlAttribute Attr(this HtmlHelper html, string name, string value, bool condition)
    {
        return Attr(html, name, null, value, condition);
    }

    public static HtmlAttribute Attr(this HtmlHelper html, string name, string seperator, string value, bool condition)
    {
        return new HtmlAttribute(name, seperator).Add(value, condition);
    }
}

それらが使用されているかどうかをお知らせください。

おかげで、

リー

41
Lee Gunn
<ul>
@foreach (var mi in Model.MenuItems) {
    <li@(mi.Selected?" class=\"selected\"":null)>
        <a href="@mi.Href" @{if(!string.IsNullOrEmpty(mi.Title)) { <text>title="@mi.Title"</text>} }>@mi.Text</a>
    </li>
}
</ul>

私はテストしていませんが、正しく解析されます。

10
Buildstarted

それはカスタムHTMLヘルパーの良い候補でしょう：

public static class HtmlExtensions
{
    public static MvcHtmlString MenuItem(this HtmlHelper htmlHelper, MenuItem mi)
    {
        var li = new TagBuilder("li");
        if (mi.Selected)
        {
            li.AddCssClass("selected");
        }
        var a = new TagBuilder("a");
        a.MergeAttribute("href", mi.Href);
        if (!string.IsNullOrEmpty(mi.Title))
        {
            a.MergeAttribute("title", mi.Title);
        }
        a.SetInnerText(mi.Text);
        return MvcHtmlString.Create(li.ToString());
    }
}

そしてあなたの見解では：

<ul>
@foreach (var mi in Model.MenuItems) {
    @Html.MenuItem(mi)
}
</ul>

またはDisplayTemplatesを使用すると、ループを記述する必要さえありません。

<ul>
    @Html.DisplayFor(x => x.MenuItems)
</ul>
7
Darin Dimitrov
<ul>
@foreach (var mi in Model.MenuItems) {
  <li@(Html.Raw((mi.Selected ? " class=\"selected\"" : null))>
    <a href="@mi.Href">@mi.Text</a>
  </li>
}
</ul>
4
Konstantin Tarkus

値がclassの場合、null属性はRazorによってレンダリングされません。

<a href="#nolink" class="@(categoryId == null ? "submenu-active": null)">All</a>
3
Darius Kucinskas

複数のクラスの場合は、この単純な拡張メソッドを使用します。

public static MvcHtmlString If(this string text, bool condition) {
    return new MvcHtmlString(condition ? text : string.Empty);
}

そしてビューでは：

<div class="menuitem @("active".If(Model.Active))">
1
Robert Massa