Add tag via script for oocss

Question

I'm getting ready to update a website and I'm thinking about using oocss. I know there are a lot of mixed opinions about oocss, but so far it seems like a good choice for my project. The only thing I dislike about it is the use of tags in the HTML to style complex modules. The oocss documentation says to use some sort of scripting to insert these tags, making them easier to remove down the road when they are no longer necessary, but it doesn't go into any detail how to do this. If anyone could point me to a solution or more information about how to implement this, I would appreciated it. My site is written with asp in c# and i will be using razor templates. I would also like to achieve this server-side, not with java-script, if possible. Thanks.

This is a sample of the html for a complex module:

<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>

Thanks to Mark I looked around for some html helper examples and found this post.

I modified the code a little so my helper looks like:

    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);
    }
}

And then in my view I included:

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

But now is there a way to include a css class in the view so that it is put into the first div's classes? I'm sorry if this is a stupid question but I very new to C# and MVC in general. This is what I've got so far:

I changed the static class html.extensions to this:

    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);
    }
}

And I put this in my view:

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

I get this error: CS1501: No overload for method 'Flow' takes 0 arguments.

score 0 · Answer 1 · answered Jun 13 '12 at 07:33

I'm not sure if there any open-source available to help you to achieve oocss in ASP.NET MVC or Razor. I would suggest go for creating reusable html helpers that renders the modules (buttons, pagination etc.) using oocss.

For ex. to create a button using oocss. You can have a separate html helper CssButton that renders the content with the expected html with the passed model. So you can reuse anywhere in views as,

@Html.CssButton(model)

For creating custom html helpers

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

Even you can wrap all the html helpers that renders the modules in a separate assembly so it would be reusable across projects.

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

I was looking so long for some sort of method to add the tags dynamically and didn't really even think about helpers but they are a pretty simple fix. — user1224419, Jun 14 '12 at 04:31

Add tag via script for oocss

1 Answers1