Category Archives: Internet

Bootstrap compatible asp.net radio button list

Recently I have had the requirement to make some of my asp.net controls ‘bootstrap compatible’

In this instance it has been asp.net’s radio button list that is causing me consternation!

An inline bootstrap radio button list has the mark up of this:

<div class="radio">
                <label class="radio-inline">
                    <input type="radio" value="Ac" name="optArchive" checked="checked">Active</label>
                <label class="radio-inline">
                    <input type="radio" value="Ar" name="optArchive">Archive</label>
            </div>

You could use hidden fields and JavaScript to control Postbacks and capture the data.I feel this is not a reliable option.

The easiest and I think the best method I have found so far is to extend the RadioButtonList to do my bidding.

I started by creating a class file to contain all of my bootstrap friendly controls, in this instance I named it ‘/App_Code/bsFriendly.cs’, creating a namespace in that class called Controls

In that file I extend the RadioButtonList, so far it looks like this:


//bsFriendly.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Controls
{
    public class bsRadioButtonList : RadioButtonList
    {
    }
}

Nothing too exciting.

Within our ‘bsRadioButtonList’ the RenderItem method has to be overridden. In VS this is a case of typing ‘protected override’ to get IntelliSense to present a list of override-able properties and methods. From that list select ‘RenderItem’, Visual Studio will create the override with a call back to it’s base.

Remove the base call and instead replace it with the following:

namespace Controls
{
    public class bsRadioButtonList : RadioButtonList
    {
 
   
        protected override void RenderItem(ListItemType itemType, int repeatIndex, RepeatInfo repeatInfo, HtmlTextWriter writer)
        {




            RadioButton radioButton = new RadioButton(); // to hold our radio button
            Literal litText = new Literal(); //to hold our labels text
            radioButton.Page = this.Page;
            radioButton.GroupName = this.UniqueID;
            radioButton.ID = this.ClientID + "_" + repeatIndex.ToString();
            radioButton.Attributes["value"] = this.Items[repeatIndex].Value;
            radioButton.Checked = this.Items[repeatIndex].Selected;
            radioButton.TextAlign = this.TextAlign;
            radioButton.AutoPostBack = this.AutoPostBack;
            radioButton.Attributes.Add("onchange", "__doPostBack('" + this.ClientID + "_" + repeatIndex.ToString() + "',' ')"); // fire postback
            radioButton.TabIndex = this.TabIndex;
            radioButton.Enabled = this.Enabled;
            System.Web.UI.HtmlControls.HtmlGenericControl gnLabelHolder = new System.Web.UI.HtmlControls.HtmlGenericControl("label"); // our label holder
            gnLabelHolder.Attributes.Add("for", this.ClientID + "_" + repeatIndex.ToString()); //associated to the radio button
            gnLabelHolder.Attributes.Add("class", "radio-inline"); //give it the bootstrap inline class, could extend as a property
            litText.Text = this.Items[repeatIndex].Text;

            gnLabelHolder.Controls.Add(radioButton); // add in the correct order of radio button then texts
            gnLabelHolder.Controls.Add(litText);
           
            
            gnLabelHolder.RenderControl(writer); //render to the writer


        }
    }

}

This will now act as new control.

To include the control on a page, simply add:

<%@ Register TagPrefix="bs" Assembly="App_Code" Namespace="Controls" %>

At the top of the page, below the Language and Codefile definitions at the top.

As a control in the page:

          <bs:bsRadioButtonList AutoPostBack="true" OnSelectedIndexChanged="test_SelectedIndexChanged" ID="test" runat="server" RepeatLayout="Flow"  RepeatDirection="Horizontal">
                    <asp:ListItem Selected="True">Active</asp:ListItem>
                    <asp:ListItem>Archive</asp:ListItem>

                </bs:bsRadioButtonList>

And in our back end cs file:

    protected void test_SelectedIndexChanged(object sender, EventArgs e)
    {

    }

That’s all there is to it.

Caveats:

  1. In the mark up you need to select an item, not doing so could cause confusion with postbacks
  2. AutoPostBack needs to be set to true to allow the hookup on __DoPostBack

Javascript Dynamic Event

Javascript Dynamic Events / Javascript Custom Events

I often asked myself: How do I create a custom event in javascript?

Something I have been using for quite awhile now is my own custom event handler for javascript, it’s pretty simple compact and easy to use

To use; just copy the devent function to the page in which it needs to be used.

Initialize it by xxEventName = new devent()

You can set what happens when the event is fired by assigning a function to the XXEventName.myEvent property, and you can trigger the event by using the XXEventName.fire() method.

The example below is the best method on which to use it.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>oop Example</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        function devent(runonce)
        {

            /******************
            * Javascript Dynamic Events
            * (c) joesblog.me.uk 2011
            *******************/

            // event has run
            this.onEvent_hasrun = false;

            // only allow running once
            this.onEvent_runonce = runonce;

            // event function
            this.myEvent = function () { };

            // now obsolete
            this.myCallback = null;

            //data to be passed to event
            this.myEvent_Data = null;

            // how many times the event has been fired
            this.myEventCount = 0;

            //fire the event , in other words execute the function assigned in myEvent
            this.fire = function ()
            {
                if (this.myEvent != null)
                {
                    if (!this.onEvent_runonce)
                    {
                        this.onEvent_hasrun = true;
                        this.myEventCount++;
                        this.myEvent();
                        return;
                    }
                    else
                    {
                        if (!this.onEvent_hasrun)
                        {
                            this.onEvent_hasrun = true;
                            this.myEventCount++;
                            this.myEvent();
                        } else
                        { return; }
                    }
                }
            }
        }

        ///An example of a static javascript class
        var myStaticClass = new function ()
        {
            // the event for when the sum has been done
            this.mathsDone = new devent();

            // the result of the addition
            this.simpleMaths = null;
            //The interval object timer.
            this.waitInterval = null;
            //self explainatory 
            this.countDown = 5; 
            
            //default countdown
            this.defaultCount = 5;

            //initialise all the objects and things that we need in this class
            this.init = function ()
            {
         
                //clear the interval 
                 this.waitInterval = null;

                //set the coutndown to its starting position
                 this.countDown = this.defaultCount;
            }

            //function called no the interval 'pulse'
            this.controlTime = function ()
            {
                if (myStaticClass.countDown == 0)
                {   ///if all the countdown has reached zero, do the maths, reset the countdown and clear the interval object

                    myStaticClass.doSimpleMaths(); 
                    myStaticClass.countDown = myStaticClass.defaultCount;
                    clearInterval(myStaticClass.waitInterval);
                }
                else
                {
                    myStaticClass.countDown--;
                }

                document.getElementById('countdown').innerHTML = myStaticClass.countDown

            }


            this.doSimpleMaths = function ()
            {
                myStaticClass.simpleMaths = (100 * 100) + 5;
                this.mathsDone.fire(); //fire the mathsDone event and cause the function we have set to run
            }

            this.start = function ()
            {
                myStaticClass.waitInterval = setInterval(myStaticClass.controlTime, 1000);
            }
        }
        //An example of a nonStaticClass
        function nonStaticClass(constructorVar1, constructorVar2)
        {
            this.aVar = constructorVar1;
            this.bVar = constructorVar2;
            this.result = 12;
            this.method = function () { this.result = this.aVar + this.bVar;  alert('do something'); }
        }

        var nonStaticClass_Instance = null;

        $('document').ready(function ()
        {
            //init the class
            myStaticClass.init();
            //assign a function to the mathsdone event
            myStaticClass.mathsDone.myEvent = function ()
            {
                alert(myStaticClass.simpleMaths);
            }

            nonStaticClass_Instance = new nonStaticClass(5, 12);

        });
    </script>

    <style type="text/css">
        body {
            font-family: verdana;
        }

        .centerDiv {
            height: 500px;
            width: 500px;
            background-color: #eaeaea;
            margin: auto;
            border-radius: 5px;
            border: solid 1px #ccc;
        }

            .centerDiv p {
                padding: 10px;
            }

        input[type=button] {
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="centerDiv">
        <p>Click below and then Wait <span id="countdown">5</span> seconds</p>
        <input type="button" value="click ME" onclick="myStaticClass.start()" />
        <input type="button" value="click ME non Static method" onclick="nonStaticClass_Instance.method()" />

    </div>
</body>
</html>

Demo of the code

Beeker MSN

Download and Use the old Windows Live Messenger 2009

Well Forgive me, I’m not normally one to rant(Ed. okay that may be a lie).But this time it’s almost serious!

Since the dawn of the blue screen, Microsoft have been royally screwing things up for the likes of you, me and everybody else.

Now they have unleashed their greatest stagnation upon the masses; Windows Live Messenger 2011 (Wave 4) . Not only has it got all the gloss of a polished turd, its got more bugs than a fisherman’s hut.  its also got a brand new terrible interface combined with the removal of some very useful features that the previous versions had.

Apart from giving me a case of the grumps..lets see what they’ve given us…

  • Tabbed conversations… We already had this with msn plus
  • A redesign of how the emoticons look how useful.
  • The ability to ignore Bing search not only from your browser, but now from within msn as well!
  • Connections to various social networks.. Okay that could be useful, but its handled in a most cumbersome way.
  • Integration with Facebook chat…Really ? why ?
  • OOOOH BADGES …erm no

Though on the flip side of the coin, here are some of the more useful things they have removed:

  • One way web cam support, you can no longer Send my web cam or View this contacts web cam instead you are forced to do some kind of Skype-esq video call which resembles half the quality of Skype but double the annoyance.
  • The abolition of contact Import/Exports.. This one really is beyond me, Why do this? okay sure i never used it.. but i could have?
  • Display names are now royally screwed up.
  • Oh yes, sorry folks, if your using anything other than Vista/Windows 7 your no longer supported.

Now you all may think I’m just a mad man ranting about a situation with no solution, a wolf crying in the wilderness? Well not exactly; There are alternatives.

For years aMSN has been developing, it is an open source alternative to the run of the mill, its free, very easy to use and works on most major platforms(Windows,MacOs,Linux etc..).

I’ve used that for awhile, but when I’m on a windows machine I still prefer the style n feel of the older msn clients…that’s why i have provided this Earlier version of Windows Live 2009.

Just un-install the latest one, via the program / features part of your control panel.

Another useful tool I use to wallow away the days is MSN plus, with polygamy( in the non marital sense) and various other tools it makes the MSN experience a bit more bearable.

A Small Update 24th Feburary 2011

Some of you may now be getting:

A newer version is available. You must install the newer version in order to continue. Would you like to do this now ?

Microsoft now deem it a requirement for you to update again to a later version, once again removing features. I am including a small replacement for the msnmsg.exe file, simply copy it into your windows live messenger directory (most likely: C:\Program Files\Windows Live\Messenger)

You will still need to install the version of Windows live messenger 2009 above.

The msnmsgr patch can be found here. Just simply replace that msnmsg.exe with the one in your Windows Live Messenger directory and all should work fine!

Happy hunting.

Beeker MSN