メニュー項目の HTML ヘルパー メソッドを作成する例をいくつか見てきました。active
**Summary:**
簡単に言えば、MVC プロジェクトでは、Twitter Bootstrap を使用して、子が選択されたときに折りたたみ可能なメニューの開いた状態を保持しようとしています。
active open
子が選択されている場合、親の css (選択された項目) を含める必要がある折りたたみ可能なメニューを使用しています。これにより、メニューが正しい場所で開かれます。別の HTML ヘルパーを使用すると、アクティブなアイテムは既に に設定されていactive
ます。
メニューの HTML:
<div id="sidebar">
<ul>
<li class="active"><a href="dashboard.html"><i class="icon-home"></i> <span>Dashboard</span></a></li>
<li class="submenu">
<a href="#"><i class="icon-beaker"></i> <span>UI Lab</span> <i class="arrow icon-chevron-right"></i></a>
<ul>
<li><a href="interface.html">Interface Elements</a></li>
<li><a href="jquery-ui.html">jQuery UI</a></li>
<li><a href="buttons.html">Buttons & icons</a></li>
</ul>
</li>
<li class="submenu">
<a href="#"><i class="icon-th-list"></i> <span>Form elements</span> <i class="arrow icon-chevron-right"></i></a>
<ul>
<li><a href="form-common.html">Common elements</a></li>
<li><a href="form-validation.html">Validation</a></li>
<li><a href="form-wizard.html">Wizard</a></li>
</ul>
</li>
<li><a href="tables.html"><i class="icon-th"></i> <span>Tables</span></a></li>
<li><a href="grid.html"><i class="icon-th-list"></i> <span>Grid Layout</span></a></li>
<li class="submenu">
<a href="#"><i class="icon-file"></i> <span>Sample pages</span> <i class="arrow icon-chevron-right"></i></a>
<ul>
<li><a href="invoice.html">Invoice</a></li>
<li><a href="chat.html">Support chat</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="messages.html">Messages</a></li>
</ul>
</li>
<li>
<a href="charts.html"><i class="icon-signal"></i> <span>Charts & graphs</span></a>
</li>
<li>
<a href="widgets.html"><i class="icon-inbox"></i> <span>Widgets</span></a>
</li>
</ul>
</div>
アイテムのヘルパー メソッドは次のとおりです。
public static MvcHtmlString MenuItem(this HtmlHelper htmlHelper,
string text,
string action,
string controller,
string iconClass)
{
var li = new TagBuilder("li");
var routeData = htmlHelper.ViewContext.RouteData;
var currentAction = routeData.GetRequiredString("action");
var currentController = routeData.GetRequiredString("controller");
if (string.Equals(currentAction, action, StringComparison.OrdinalIgnoreCase) &&
string.Equals(currentController, controller, StringComparison.OrdinalIgnoreCase))
{
li.AddCssClass("active");
}
var i = new TagBuilder("i");
i.AddCssClass(iconClass);
var basePath = HttpContext.Current.Request.Url.GetLeftPart(UriPartial.Authority);
//li.InnerHtml = htmlHelper.ActionLink("<i>something</i>" + text, action, controller).ToHtmlString();
li.InnerHtml = htmlHelper.Raw(string.Format("<a href=\"{0}/{1}/{2}\"><i class=\"{4}\"></i>{3}</a>", basePath, controller, action, text, iconClass)).ToString();
return MvcHtmlString.Create(li.ToString());
}
そして、次のように実装されています:
<div id="sidebar">
<ul>
@Html.MenuItem("Dashboard", "Index", "Dashboard", "icon-home")
@* <li class="active"><a href="dashboard.html"><i class="icon-home"></i> <span>Dashboard</span></a></li>*@
<li class="submenu">
<a href="#"><i class="icon-beaker"></i> <span>UI Lab</span> <i class="arrow icon-chevron-right"></i></a>
<ul>
<li>@Html.MenuItem("Websites", "Index", "Websites", null)</li>
<li><a href="jquery-ui.html">jQuery UI</a></li>
<li><a href="buttons.html">Buttons & icons</a></li>
</ul>
</li>
<li class="submenu">
<a href="#"><i class="icon-th-list"></i> <span>Form elements</span> <i class="arrow icon-chevron-right"></i></a>
<ul>
<li><a href="form-common.html">Common elements</a></li>
<li><a href="form-validation.html">Validation</a></li>
<li><a href="form-wizard.html">Wizard</a></li>
</ul>
</li>
私が持っていないのは、サブメニュー項目のためのものです。
これを達成しようとするより簡単な方法はありますか?
- アップデート -
これを部分的なビューに入れるのが最善かもしれないと推測しています。現在のアイテムを「アクティブ」に設定するためにコントローラー/アクションが一致するかどうかを確認するのではなく、クリック時に選択したアイテムを保持してすべてのメニューアイテムで参照する方法を見つける必要があります。クリックでアクティブになるコントローラ メソッドは、現在選択されている項目が親か子かをチェックし、親が子と一致する場合は別の形式にしますか? もっと簡単な方法があるに違いないと確信しています。