CODEWITHSUNDEEP
c#asp.netwebforms
codeandcloud
codeandcloud

Reputation: 55210

How to add value-less HTML5 attributes from code-behind

This is a follow up of this question: How to add <audio> tag to Content of Page in Code behind?

Here I am creating an audio control like this.

var myAudio = new System.Web.UI.HtmlControls.HtmlAudio();
myAudio.Attributes.Add("autoplay", "autoplay");
myAudio.Attributes.Add("controls", "controls");
myAudio.Src = "test.mp3";
Form.Controls.Add(myAudio);

This renders in page as

<audio src="test.mp3" autoplay="autoplay" controls="controls"></audio>

It works. But ideally, I would like this to be rendered as 

<audio src="test.mp3" autoplay controls></audio>

That is, as a valueless attribute with just the keys autoplay and controls.

I tried

myAudio.Attributes.Add("autoplay", ""); //autoplay = "";
myAudio.Attributes.Add("autoplay", null); //autoplay attribute missing

But these didn't yield any satisfactory results.

Is there a way to render the control with valueless attributes?

Upvotes: 2

Views: 862

Answers (1)

cmd.prompt
cmd.prompt

Reputation: 954

A possible solution is to override the RenderAttributes method on an inherited control.

public class MyCustomAudio : System.Web.UI.HtmlControls.HtmlAudio
{
    protected override void RenderAttributes(HtmlTextWriter writer)
    {
        foreach (string key in this.Attributes.Keys)
        {
            String val = this.Attributes[key];
            writer.Write(val == key
                ? String.Format(" {0}", key)
                : String.Format(" {0}=\"{1}\"", key, val));
        }
    }
}

With your same code:

var myAudio = new MyCustomAudio();
myAudio.Attributes.Add("autoplay", "autoplay");
myAudio.Attributes.Add("controls", "controls");
myAudio.Src = "test.mp3";
Form.Controls.Add(myAudio);

I got this output:

<audio autoplay controls src="test.mp3"></audio>

Upvotes: 3

Related Questions