MVC3 Tabs Helper

Question

我需要一个html助手来处理页面上的“标签”功能。单击选项卡将重新加载页面并重新加载局部视图（如果已指定）。我是这样编写的，但不确定这是最好的解决方案。??

public static class TabExtensions
{
    public static MvcHtmlString Tabs(this HtmlHelper htmlHelper, List<TabItem> tabItems, object htmlAttributes = null)
    {
        if (tabItems == null)
        {
            throw new ArgumentException("at least one tab item required");
        }

        string viewName = string.Empty;
        object model = null;
        var sb = new StringBuilder();
        sb.Append("<a name=\"tabs\"></a>");

        var tagUl = new TagBuilder("ul");
        tagUl.MergeAttributes(HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));

        // Current url data
        var baseUri = new UriBuilder(htmlHelper.ViewContext.HttpContext.Request.Url);
        var selTab = htmlHelper.ViewContext.RequestContext.HttpContext.Request.QueryString["tab"];

        foreach (var tab in tabItems)
        {
            // No tab user selected
            if (string.IsNullOrEmpty(selTab))
            {
                selTab = tab.TabLinkText;
            }

            var tagLi = new TagBuilder("li");
            string tagInnerHtml;

            if (selTab.Equals(tab.TabLinkText, StringComparison.OrdinalIgnoreCase))
            {
                tagLi.MergeAttribute("class", "current");
                tagInnerHtml = string.Format("<strong>{0}</strong>", tab.Text);
                viewName = tab.PartialViewName;
                model = tab.PartialViewModel;
            }
            else
            {
                tagInnerHtml = tab.Text;
            }

            var queryToAppend = string.Concat("tab=", tab.TabLinkText);
            var querystring = new StringBuilder();

            if (baseUri.Query.Length > 1)
            {
                if (baseUri.Query.Contains("tab"))
                {
                    querystring.Append(baseUri.Query.Replace(string.Concat("tab=", selTab), queryToAppend));
                }
                else
                {
                    querystring.Append(baseUri.Query + "&" + queryToAppend);
                }
            } 
            else
            {
                querystring.Append("?" + queryToAppend);
            }

            // Assign anchor link
            querystring.Append("#tabs");

            tagLi.InnerHtml = string.Format("<a href=\"{0}\">{1}</a>", querystring, tagInnerHtml);
            tagUl.InnerHtml += tagLi.ToString();
        }

        sb.Append(tagUl.ToString());

        // Render partial
        if (!string.IsNullOrEmpty(viewName))
        {
            htmlHelper.ViewData.Model = model;

            using (StringWriter sw = new StringWriter())
            {
                ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(htmlHelper.ViewContext.Controller.ControllerContext, viewName);
                ViewContext viewContext = new ViewContext(htmlHelper.ViewContext.Controller.ControllerContext, viewResult.View, htmlHelper.ViewData, htmlHelper.ViewContext.TempData, sw);
                viewResult.View.Render(viewContext, sw);

                sb.Append(sw.GetStringBuilder().ToString());
            }
        }

        return MvcHtmlString.Create(sb.ToString());
    }
}

#region Tab Item Model 

public class TabItem
{
    public string Text { get; set; }

    public string TabLinkText { get; set; }

    public string PartialViewName { get; set; }

    public object PartialViewModel { get; set; }

    public TabItem(string text, string tabLinkText)
        : this()
    {
        this.Text = text;
        this.TabLinkText = tabLinkText;
    }

    public TabItem(string text, string tabLinkText, string partialViewName, object partialViewModel = null)
        : this()
    {
        this.Text = text;
        this.TabLinkText = tabLinkText;
        this.PartialViewName = partialViewName;
        this.PartialViewModel = partialViewModel;
    }

    public TabItem()
    {
        this.Text = string.Empty;
        this.PartialViewName = string.Empty;
        this.TabLinkText = string.Empty;
        this.PartialViewModel = null;
    }
}

#endregion

你这样使用它：

                    <%
                        var tabList = new List<TabItem>
                        {
                            new TabItem(LocalResources.fld_AboutFirm_lbl, "about"),
                            new TabItem(LocalResources.fld_FirmOffers_lbl, "offer"),
                            new TabItem(LocalResources.fld_Profile_lbl, "profile", "~/Views/Partial/FirmProfileTab.cshtml", Model),
                            new TabItem(LocalResources.fld_Contact_lbl, "contact", "~/Views/Partial/FirmContactTab.cshtml", Model)
                        };
                    %>
                    <%: Html.Tabs(tabList, new { @class = "firmTabs clearfix" })%>

这将生成html：

<ul class="firmTabs clearfix"><li><a href="?tab=about#tabs">O firmie</a></li><li><a href="?tab=offer#tabs">Firma oferuje</a></li><li><a href="?tab=profile#tabs">Profil</a></li><li class="current"><a href="?tab=contact#tabs"><strong>Kontakt</strong></a></li></ul>

Answer 1

我认为更好的解决方案是为标签菜单设置母版页，为标签内容设置查看页面。你的方法看起来非常复杂。你为什么需要这个html助手？如果你将html封装成帮助方法 - 你会失去你的观点。所以就MVC而言，我认为你的方式并不好。