Tagged: html Toggle Comment Threads | Keyboard Shortcuts

  • danielsaidi 4:49 pm on August 28, 2011 Permalink | Reply
    Tags: , editorblockfor, editorfor, html, html helper, labelfor,   

    EditorBlockFor HTML helper 

    In ASP.NET MVC, Microsoft has done a great job with the various HTML helpers that can be used in a form context, such as LabelFor, EditorFor, ValidationMessageFor etc.

    However, despite these helpers, the HTML markup still tend to become rather tedious and repetitive. For instance, this HTML generates a form that can be used t0 create groups in a web application that I am currently working on:

        @using (Html.BeginForm())
            <div class="editor-label">
                @Html.LabelFor(model => model.Name)
            <div class="editor-field">
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            <div class="editor-label">
                @Html.LabelFor(model => model.CollectionName)
            <div class="editor-field">
                @Html.EditorFor(model => model.CollectionName)
                @Html.ValidationMessageFor(model => model.CollectionName)
            <div class="form-buttons">
                <input type="submit" value="@this.GlobalResource(Resources.Language.Create)" />

    That is quite a lot of code for handling two single properties…and the two editor blocks look rather similar, don’t you think?

    I therefore decided to write a small HTML helper extension method – EditorBlockFor – that can be used to generate an editor block (label, editor and validation message).

    Using this new helper, the resulting form becomes a lot shorter and a lot easier to handle:

        @using (Html.BeginForm())
            @Html.EditorBlockFor(model => model.Name);
            @Html.EditorBlockFor(model => model.CollectionName);
            <div class="form-buttons">
                <input type="submit" value="@this.GlobalResource(Resources.Language.Create)" />

    As you see, the method is only to be used if you want to follow the conventions that are used for auto-generated ASP.NET MVC form code. But if you do…you can save a lot of keystrokes.

    I am not that familiar with the MvcHtmlString type, which the native methods return, so returning an IHtmlString instead of MvcHtmlString could be a big no no that I do not know about.

    Please let me know if I have ruined the order of the universe.

  • danielsaidi 9:05 am on February 2, 2011 Permalink | Reply
    Tags: flash, gears, html, , , , plupload, silverlight,   

    Trying out Plupload 

    In Wigbi, I had a really handy UI plugin called FileUploadForm that could upload any number of files with AJAX. All you needed to do was to add such a form to the page to have it handle the entire file upload process automatically.

    However, as I yesterday sat down to migrate the old plugin so that it would work with the new Wigbi version, I thought “hey, three years have passed – there MUST be an even easier way to upload files”. Believe it or not, there was.

    The people behind Tiny MCE have created a really nice file upload component called Plupload. It supports several ”runtimes” – from jQuery-based file upload in HTML4/5 to Flash, Silverlight, Gears etc. and is insanely easy to configure.

    You can tell Plupload which runtimes you’d prefer to use, which file types to support etc. The users can then upload files either with a regular “select file(s)” dialog or by dragging files from an Explorer/Finder window.

    To make Plupload work with Wigbi, I moved the upload.php file to ~/wigbi/pages/ and added some extra functionality, like starting/stopping Wigbi and being able to adjust the target folder with a query string variable.

    All in all, adding Plupload to my Wigbi-based site took 10 minutes and worked perfect.

  • danielsaidi 3:53 pm on January 27, 2011 Permalink | Reply
    Tags: filter, html, , , httpmodule   

    Automatically convert HTML5 to HTML4 

    I just love HTML5 and how easy things will become once it breaks through. However, until so is the case, the HTML code we write must be supported by older browsers as well.

    Still, we want to write HTML5 code…not old one. So, how to solve this little nugget of dilemma?

    Well, to make it possible to write HTML5 and still support older browsers, I and a collegue have created a class that automatically converts HTML5 elements to div and span elements when the response is sent to the client. For instance, <nav>…</nav> is translated to

    for IE8, while Chrome and Firefox will receive the original HTML5 code.

    The basic implementation

    First of all, HTML support is determined by one class, which implements a small interface. If the browser is considered to not support HTML5, the HTML5 code is converted to HTML4 with another small class, which implements an even smaller interface.

    Note: when we developed this, we tested it in an MVC application. However, it seems like there are some problems in web forms applications, where the output gets rendered multiple times. I will look into this and update the filter.

    This interface/implementation pattern is, if you are used to working with it, great if you use IoC/DI and later on feels that these quick implementations are insufficient. For instance, maybe you want to use a complete list of non-HTML5 browsers (we only consider IE8 and below not to have HTML5 support) and also do not want the class name to be applied to the end tag (which our class will add).

    If you feel like improving these classes, feel free to provide us with any updated, improved versions 🙂

    The ugly test hack

    When we finally went out to try the classes in action, we applied them in the Render event of a web form master page.

    It worked like a charm. When browsing the site with Firefox, Chrome etc. we received the HTML5 code…

    Firefox HTML code

    When viewing the site in Firefox, we get the original HTML5 code.

    …but in IE8, we were served the converted HTML4 code.

    IE HTML code

    When viewing the site in IE8, we get the converted HTML4 code.

    Well, isn’t this marvelous?

    But…wait a minute…applying it in the Render event of the master page? That feels…well, really, really bad.

    Yes, you are absolutely right. As I wrote, we were just trying it out. Relax…then read on for information about how to do it right 🙂

    The pretty final solution

    I guess that we can all agree that we want to make this conversion independent of our code. The solution above (applying it in the Render event), for instance, only works for Web Forms-based solutions. What if we want to automatically convert HTML5 to HTML 4 in an ASP.NET MVC-based web site?

    We need to find a better way of triggering the HTML5 conversion. So, how to do it “right”?

    We decided to create an HttpModule that applies a HTML5 conversion filter to the outgoing response. This will automatically handle all outgoing responses, provided that the module is registered in web.config.

    To enable the module, it depends which IIS setup you are using:

    • If you are using IIS 7.0 running in Integrated mode, add the following to the web.config system.webServer modules section:
             <add name="NExtra.Web.HttpModules.Html5ElementConvertHttpModule"
                  type="NExtra.Web.HttpModules.Html5ElementConvertHttpModule, NExtra, Version=, Culture=neutral" />
    • If you are using IIS 6.0 or IIS 7.0 running in Classic mode (including the development server), add the following to the web.config system.web httpModules section instead:
             <add name="NExtra.Web.HttpModules.Html5ElementConvertHttpModule"
                  type="NExtra.Web.HttpModules.Html5ElementConvertHttpModule, NExtra, Version=, Culture=neutral" />

    That should be all you need to do to enable the automatic HTML5 to HTML4 conversion.

    • Matthew Blackmon 5:20 pm on May 30, 2011 Permalink | Reply

      If I have an apache based server, how would I enable this module?

      • danielsaidi 9:42 pm on July 2, 2011 Permalink | Reply

        I’m not sure…I have never tried running .NET with Apache. Did you manage to solve it?

    • Katie 12:35 pm on July 1, 2011 Permalink | Reply

      Hi. I just got a temate off template monster and it was html5 and got my developer to spend ages doing it, not knowing it would not work on older browsers. I need help desperately as I néed to launch Wednesday and it’s a commercial site that needs to work on all browsers. How quick/ easy is it to fix? What do I tell my .net developers???

      • danielsaidi 9:46 pm on July 2, 2011 Permalink | Reply

        The module should work more or less by just registering it in web.config, but it may behave unsatisfactory with web forms, like when I tried using it together with EPiServer. In MVC, however, it should work right away.

    • venu 2:15 pm on September 13, 2011 Permalink | Reply

      Hi saidi,

      How to convert HTML4 to HTMl5

      • danielsaidi 8:55 pm on September 15, 2011 Permalink | Reply

        Well, it would be possible to create an inverted variant of this implementation. Just convert all tags with the class “nav” to a nav element and so on. Good idea – I will build one! 🙂

    • Sharon O'sullivan 11:18 pm on November 15, 2011 Permalink | Reply

      Hello Daniel

      I am considering buying an LG 3D TV for my family this Christmas (model LG47LW5700). But this tv model does not currently support HTML5, and a tech rep at LG said it was “not possible” to upgrade the firmware (perhaps he was misinformed)?. But now I hear LG and Google TV are thinking of collaborating for 2012 tv’s. I bet those 2012 tv’s will be a lot more expensive than the one I can buy now. So I’m wondering: If I bought this 2011 model, will you or anyone else create an LG “app” that would allow people like me to view HTML5 web sites by downconverting to HTML4 as you described above? (Please note, I’m not a techie! I was once, but that’s not my area anymore 🙂

      • danielsaidi 11:35 pm on November 15, 2011 Permalink | Reply

        Hi Sharon,

        Thank you for your comment, and thank you for telling me about this. I am also looking at buying a new TV, and I have not even considered this fact. HTML5 support (together with support for keyboard and mouse) would be a blast, so I will consider it when comparing prices and models from now on.

        However, the stuff I describe in this blog post are just meant to help developers adjust their web sites so that visitors with older browsers can design their web sites in HTML5, with automatic fallback to HTML4 if the browser does not support HTML5. The approach can be ported to any language, although it would have to be adjusted to fit the technology of choice.

        With that said – if you browse a HTML5 web site that uses this technique in your LG TV, the HTML5 code would automatically be converted to HTML4…but I really doubt that even 0.01% of the web sites in the world will…at least not my approach 😉 And, even if the HTML would be converted, you would still miss out on several HTML5 features, since the HTML5 standard is still a work in progress.

        So, I guess that the question we have to ask ourselves is whether or not the TV should be the device used to surf the web. Maybe a better approach is to stream the image/sound from your computer to the TV?

        • Sharon O'sullivan 1:06 am on November 16, 2011 Permalink

          Thanks for your reply, Daniel. That’s very, very helpful to hear that the HTML5 standard is still just a work in progress….Your reply made me re-assess the basics that I would really need from our tv.

          Really, I wanted to get a ‘smart tv’ not so much for general surfing of the web (because you’re right we have computers at home that can do google searches for us for that purpose), but mainly so that our tv would enable us to both:

          (a) view films from sites such as Netflix, YouTube (and other emerging web film channels like Cinema now), which the smart tv’s can do, so that we don’t have to head out on cold winter evenings to rent a dvd, and

          (b) access videos from news websites (eg BBC or CTV etc)

          The thing is, for some of these film services, you’d need an “app” to view their videos on the tv. And I was just concerned that if their videos are on their website courtesy of html5 (or if they upgrade their websites to html5 in the future), then I would no longer have access to their apps via our tv (and only newer html-5 compatible tv’s would). But perhaps, given the current state of development of html5, that problem would be a couple of years away still.

          Regarding your suggestion of streaming from the computer to the tv, that would work if my laptop was compatible with an HDMI cable, but it’s not (my laptop is about 2 yrs old). And although it would be nice to stream it to the tv wirelessly via our home router, I’m told that you can’t stream wirelessly from your computer desktop to your tv. The only way to stream wirelessly from your computer to your tv is via the DLNA (digital network living alliance) convention is by storing your digital films on the “shared documents” part of your computer, and then having your tv recognize it from their using the tv’s “media sharing” app feature. And, by definition, streaming (as I understand it) involves only downloading bits of the file at a time, it’s not the same as downloading the entire digital film to a shared documents folder, which is why it won’t work to wirelessly stream from your computer screen to your tv screen unless the whole digital file is there.

          But now that I think of it, another possibility would be to get a $45 cable from Apple to adapt our ipad to the HDMI plug on our tv, and the ipad supports html5 if I’m not mistaken.

          Bottom line is I really would like to get this LG tv because it’s got the passive 3D (much more sensible for kids than the $$$ active glasses), and a really neat motion-sensitive tv remote (like the nintendo wii). For your own shopping info, I think Sony supports Google tv (and html), but they use the active 3d glasses (not practical in my household), as does Samsung. I also want to have the skype video feature, which Samsung and LG 3d tv’s offer, but I don’t think Sony does (you might want to double check that).

          Anyway, hope all this info made some sense…I typed it quickly because I have to run. But thanks for sharing your thoughts on this.

        • danielsaidi 7:55 pm on November 17, 2011 Permalink

          Thank you for all the great advice! You have considered a lot of things that I have not. This will be very helpful for me when we get around to purchasing a new TV. 🙂 There are a lot(!) of options, and I am sure that you will select the option that suits you best, considering all the information you have provided me with.

          Regarding HTML5 support…as long as you find a TV that supports HTML5 (even if the firmware will not be upgradable), the audio and video specs of HTML5 are rather well-defined now, so I doubt that we will se any major changes in the final specs. So, if you find a TV that supports today’s HTML5 video/audio format, chances are probably big that they will continue to support the final format as well.

        • Sharon O'Sullivan 11:33 pm on November 17, 2011 Permalink

          Agreed! Which is why I did a turnaround on the LG and switched to the Samsung Smarthub. Cheers, and best of luck with your own tv purchase.

        • Sharon O'sullivan 1:20 am on November 16, 2011 Permalink

    • Pranav 9:50 am on May 24, 2013 Permalink | Reply

      I have made a browser in java but it does not support html5. How do I make it support html5

  • danielsaidi 6:11 am on October 7, 2009 Permalink | Reply
    Tags: documentation, doxygen, html, latex, xml   

    Doxygen – a brief tutorial 

    I am using Doxygen to generate simple web-based documentation from my well-documented NExtra project’s source code. Doxygen also supports extracting the documentation in various other formats (HTML, LaTex, .man, XML etc.), but I chose to keep it simple.

    To extract a simple HTML site from your documentation, just follow these simple steps:

    1. Download Doxygen and install it.
    2. Run the Doxygen wizard, which opens a small window wit the Wizard tab selected:doxygen_start
    3. Under the Project section, define these properties:
      • Project name (e.g. “.NET Extensions”)
      • Project version or id (e.g. “”)
      • Source code directory (your source code root)
      • Make sure to check the “Scan recursively” check box
      • Destination dictionary (where you want the documentation to be extracted)
    4. Under the Mode section, select All entities and Optimize for Java or C#
    5. Under the Output section, select the various output formats you want Doxygen to create.
    6. Since you selected All entities, you may believe that all entities will be extracted. Well, sadly, this is not true. For instance, Doxygen will not extract documentation for static classes, unless you explicitly tell it to.
    7. So, select the Expert tab (wow, an expert already, huh?) and make sure that the EXTRACT_STATIC checkbox is checked. If not, you will find that static parts of your application are left out of the documentation. You can also check other boxes to configure Doxygen in detail.
    8. Finally, you are more than ready to select the Run tab and click the “Run Doxygen” button. This will start Doxygen, which will place the documentation in your specified destination folder.

    If you think that the documentation is plain and “boring” in HTML format, you can skin it with CSS. I will cover that part in another blog entry.

    • Ozzie 9:06 pm on August 6, 2010 Permalink | Reply

      Thanks man, this helped me get started!

    • Michal 11:04 pm on December 10, 2010 Permalink | Reply

      can you make post how to make proper doxygen document with c# project and turn it into pdf type?

      • danielsaidi 11:43 pm on December 10, 2010 Permalink | Reply

        I could experiment with it when I generate the documentation for the new .NET extensions release. We’ll see. 🙂

    • Dhruvesh 7:55 am on September 18, 2014 Permalink | Reply

      Thanks , Atleast I got my first step

Compose new post
Next post/Next comment
Previous post/Previous comment
Show/Hide comments
Go to top
Go to login
Show/Hide help
shift + esc