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

Question

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

下面是一个复杂模块的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 helper示例，找到了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中实现面向对象。我建议使用go来创建可重用的html helpers，它可以呈现模块(按钮、分页等)。使用oocss。

对于ex。使用oocss创建一个按钮。您可以有一个单独的html helper 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