Question

I see this type of code when looking through our working code base:

    private Button AddClearButton()
    {
        return new Button
                   {
                       OnClientClick =
                           string.Format(@"$('.{0}').css('background-color', '#FBFBFB');
                                   $('#' + {1}).val('');
                                   $('#' + {2}).val('');
                                   return false;", _className, _hiddenImageNameClientId, _hiddenPathClientId),
                       Text = LanguageManager.Instance.Translate("/button/clear")
                   };
    } 

or

            _nameAndImageDiv = new HtmlGenericControl("div");
            var imageDiv = new HtmlGenericControl("div");
            imageDiv.Attributes.Add("style", "width: 70px; height: 50px; text-align: center; padding-top: 5px; ");

            var nameDiv = new HtmlGenericControl("div");
            nameDiv.Attributes.Add("style", "width: 70px; word-wrap: break-word; text-align: center;");
            var image = new HostingThumbnailImage();

Disclaimer: I have not worked with CSS before. but I heard that we should separate css, js, html, C#, other than put them together.

so, is the above code bad? If yes, how is the better approach?

Answer 1

Off the top of my head I can think of a couple of issues, non fatal however.

In no particular order:

1. You lose the ability to cache your JavaScript files, on either the server or on the client.
2. You increase the side of your page. If every button has a lot of embedded JavaScript, then the page size, thus load times, are increased.
3. Debugging will become extremely difficult.
4. Unobtrusive JavaScript is your friend!
5. Maintenance becomes more complex as you need to remember where in the C# code that the hard-coded JavaScript strings are.
6. Intellisense is lost. Visual studio has a fantastic JavaScript editor, you lose all of that functionality by hard-coding the strings
7. Did I mention Unobtrusive JavaScript is your friend!
8. You lose the benefits of separation of functionality.
9. If you have duplicate buttons with the same functionality, then you have duplicate code.

I’m sure there is a bunch I have missed.