Re: Input -> Button, workaround

bissoi — Sat, 04 Jul 2009 15:21:39 GMT

Thanks rtpHarry for this link. very useful. i guess most the time you don't care about the button value as much as the other editable fields. textAreas, textboxes, etc... but good to know about this issue in IE.

Re: Input -> Button, workaround

rtpHarry — Wed, 01 Jul 2009 12:24:14 GMT

Thats some nice clean code!

One thing to be wary of that there are compatibility issues with the <button> tag, IE, and forms:

http://www.sitehatchery.com/blog/index.php/html-button-tag-and-ie-compatibility

Input -> Button, workaround

bissoi — Wed, 01 Jul 2009 12:17:06 GMT

Hello,

Yesterday, I had a little chat with a friend who is in love with Mootools (the JavaScript Library, www.mootools.net). he is a web UI and client side scripting expert, currently he is working on a project that backed on ASP.NET serverside.

in most of mootools validation classes and plugins, that he used to write and use, are dealing with Submit buttons or Normal Buttons and relaying on the <Button> html tag more than the <input type="submit"> or the <input type="button"> tags. so he was facing a problem when he push the interface to the ASP.NET kitchen, where the programmer there has to replace the client side<button> with <asp:button /> server side control which by default will render its output as <input> tag.

so i thought to send him this little class control that inherits the same asp:button, and render its output as <button> tag to serve his mootooling scripts. in beside of that i did add a custom client ID property, that he override the one that ASP.NET assign to the control specially if it was nested inside other user controls. and that would solve a lot of the issues that he was facing in using mootools/ASP.NET marriage.

public class mootoolsbtn : Button
{
    private string _myClientID;

    public string myClientID
    {
        get
        {
            _myClientID = (string)this.ViewState["clientID"];
            return (_myClientID == null) ? "" : _myClientID;
        }
        set
        {
            this.ViewState["clientID"] = value;
        }
    }
    public override void RenderBeginTag(HtmlTextWriter writer)
    {

        AddAttributesToRender(writer);        
        writer.RenderBeginTag("button");

    }
    protected override void RenderContents(HtmlTextWriter writer)
    {
        writer.Write(base.Text);        
        base.RenderContents(writer);
    }
    protected override void AddAttributesToRender(HtmlTextWriter writer)
    {
        base.Attributes.Remove("id");
        writer.AddAttribute("id", this.myClientID);
        base.AddAttributesToRender(writer);
    }
}

and in any webform page he can register this control and use it instead of the asp:button.

<myC:mootoolsbtn OnClick="myOButton_Click" OnClientClick="window.alert('Hello there' + this.id); return true;" runat="server" myClientID="FakeClientID" ID="myBTN" Text="Click Me" />

and it will be renderd out to the client as :

<button id="FakeClientID" type="submit" name="myBTN" value="Click Me" onclick="window.alert('Hello there' + this.id); return true;" id="myBTN">Click Me</button>

and clicking on it will call the javascript code beside it will fire the server side void. myOButton_click.

hope that can help and be useful for any one in love with mootools or any other JS library.

cheers,

Custom Server Controls

Re: Input -> Button, workaround

Re: Input -> Button, workaround

Input -> Button, workaround