通过脚本为 oocss 添加 <b> 标签

Question

我正准备更新一个网站，并且正在考虑使用 oocss。我知道关于 oocss 有很多不同的意见，但到目前为止，它似乎对我的项目来说是一个不错的选择。我唯一不喜欢的是在 HTML 中使用标签来设置复杂模块的样式。 oocss 文档说使用某种脚本来插入这些标签，使它们在不再需要时更容易删除，但它没有详细说明如何执行此操作。如果有人可以向我指出解决方案或有关如何实现此功能的更多信息，我将不胜感激。我的网站是用 c# 中的 asp 编写的，我将使用 razor 模板。如果可能的话，我还想实现这个服务器端，而不是使用 java 脚本。谢谢。

这是一个复杂模块的 html 示例：

<div class="mod complex"> 
    <b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
    <div class="bd">
        <p>Lorem ipsum.</p>
    </div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b> 

感谢 Mark，我四处寻找一些 html 帮助程序示例，发现 this post.

我稍微修改了代码，所以我的助手看起来像：

    public class Complex : IDisposable
{
    private readonly ViewContext _viewContext;
    private bool _disposed = false;

    public Complex(ViewContext viewContext)
    {
        _viewContext = viewContext;
    }

    public void Dispose()
    {
        Dispose(true);
        GC.SuppressFinalize(this);
    }

    protected virtual void Dispose(bool disposing)
    {
        if (!_disposed)
        {
            _disposed = true;
            _viewContext.Writer.Write(
                @"</div>
                    <b class=""bottom""><b class=""bl""></b><b class=""br""></b></b>
                    </div>" 
            );
        }
    }
}

public static class HtmlExtensions
{
    public static Complex Complex(this HtmlHelper htmlHelper)
    {
        htmlHelper.ViewContext.Writer.Write(
            @"<div class=""mod complex"">
                  <b class=""top""><b class=""tl""></b><b class=""tr""></b></b>
                    <div class=""inner"">"
        );
        return new Complex(htmlHelper.ViewContext);
    }
}

然后在我看来，我包括：

    @using (Html.Complex())
{
    <div class="bd">
        <p>Lorem ipsum.</p>
    </div>
}

但是现在有没有办法在视图中包含一个 css 类，以便将它放入第一个 div 的类中？如果这是一个愚蠢的问题，我很抱歉，但我对 C# 和 MVC 很陌生。这是我到目前为止所得到的：

我把静态类 html.extensions 改成这样：

    public static class HtmlExtensions
{
    public static  Flow Flow(this HtmlHelper htmlHelper, string classname)
    {
        htmlHelper.ViewContext.Writer.Write(@"<div class="" " + classname + @"mod complex flow"">
                  <b class=""top""><b class=""tl""></b><b class=""tr""></b></b>
                    <div class=""inner"">"
        );
        return new Flow(htmlHelper.ViewContext);
    }
}

我认为这是：

@using (Html.Flow("bgtest"))
    {
        <div class="bd">
         <div style="height:442px; width:980px; background-color: grey;"></div>
        </div>
    }

我收到此错误：CS1501：方法 'Flow' 没有重载需要 0 个参数。

Answer 1

我不确定是否有任何开源可帮助您在 ASP.NET MVC 或 Razor 中实现 oocss。我建议去创建 可重用的 html 助手，使用 oocss 呈现模块（按钮、分页等）。

例如。使用 oocss 创建一个按钮。您可以拥有一个单独的 html 帮助程序 CssButton，它使用传递的模型以预期的 html 呈现内容。因此，您可以在视图中的任何位置重复使用，

@Html.CssButton(model)

用于创建自定义 html 助手

http://www.asp.net/mvc/tutorials/older-versions/views/creating-custom-html-helpers-cs

即使您可以将呈现模块的所有 html 助手包装在单独的程序集中，以便跨项目重复使用。

http://blogs.msdn.com/b/davidebb/archive/2010/10/27/turn-your-razor-helpers-into-reusable-libraries.aspx