ASP.NET MVC AJAX Action Button (Unobtrusive)

It’s been a while since I’ve made a post, mostly because I’ve been busy and mostly because I usually post information I feel will be helpful to others. Today I want to share a snippet of code that I put together because I was unable to track down the answer I was looking for.

Currently I am in a long term project that is primarily based ASP.NET MVC3 and with that comes troubles of its own. The trouble I was having was I wanted to create an HTML BUTTON that behaved much like MVC’s Ajax.ActionLink does. I wanted to be able to specifiy some button content as well as AjaxOptions for Unobtrusive parsing. I looked on the web, no luck. So I ventured out and created my own extension that I hope you find worthy.

C# (Place in new or existing file)

public static MvcHtmlString ActionButton(this AjaxHelper ajaxHelper,
   string buttonText,
   string iconSrc,
   AjaxOptions ajaxOptions,
   object routeValues = null,
   object htmlAttributes = null,
   object iconAttributes = null)
{
UrlHelper urlHelper = new UrlHelper(ajaxHelper.ViewContext.RequestContext);
RouteValueDictionary htmlAttributeDictionary =
    HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
string imgUrl = urlHelper.Content(iconSrc);
//Build icon for use in button
TagBuilder buttonIcon = new TagBuilder("img");
buttonIcon.MergeAttribute("src", imgUrl);
buttonIcon.MergeAttributes(new RouteValueDictionary(iconAttributes));
//Text
TagBuilder text = new TagBuilder("span") { InnerHtml = buttonText };
//Build Button and place text and icon inside
TagBuilder button = new TagBuilder("button");
button.MergeAttributes(ajaxOptions.ToUnobtrusiveHtmlAttributes());
button.MergeAttributes(htmlAttributeDictionary);
button.InnerHtml = buttonIcon.ToString(TagRenderMode.SelfClosing) + text.ToString();
return MvcHtmlString.Create(button.ToString());
}

You can of course overload or customize this extension method to suit your needs (remove routeValues, htmlAttributes, etc…), we actually have a few variants (icon, no icon) for use in our system for different calls but I wanted to show you a full capability call.

We are not out of the woods just yet, Microsoft’s Unobtrusive AJAX support library for jQuery does not attach to Buttons! They support attaching to A, Form, INPUT[type=image] and Submit but not to regular ole Button. So you are going to need to add a little binding in there to get you hooked up. Copy and paste the following.

JavaScript (Place in your Unobtrusive jQuery Library File)

    $("button[data-ajax=true]").live("click", function (evt) {
        evt.preventDefault();
        if (!$(this).attr("disabled")) {
            asyncRequest(this, {
                url: this.href,
                type: "GET",
                data: []
            });
        }
    });

Making the call.
Now that you are all set you can use the following in your code in your View to return unobtrusive BUTTONS with AJAX bindings, below is a sample call.

    @Ajax.ActionButton("Button Text", "/Images/x_sm.png", new AjaxOptions
                {
                    Url = Url.Action("Add"),
                    UpdateTargetId = "Details",
                    OnComplete = "javascript: weAreDone();",
                    InsertionMode = InsertionMode.Replace,
                    OnSuccess = "javascript: hooray();"
                },
                null,
                new { id = "btn1"})

That’s it. Now you have an unobtrusive button in MVC3. Get to styling.

I hope this helps you. I think in the future I will allow for iconAttributes to allow for height/width options. Maybe IDK, I might just leave it all up to CSS.

HTML Output from above call:

<button id="btn1" data-ajax-update="#Details" data-ajax-success="javascript:
hooray();" data-ajax-mode="replace" data-ajax="true" data-ajax-url=
"/Assignments/Assignments/Add" data-ajax-complete="javascript: weAreDone();">
   <img src="/Images/x_sm.png" alt="" />
   <span>Button Text</span>
</button>

Calculating Signal Strength on Telit GPRS Module

I currently have a project in the works that incorporates the Telit862 Quad GPRS module. After having some issues with signal quality in my area I decided it would be good for me to know the current signal strength given there is no visible display for this on the module. Given this fact I decided to incorporate a meter into my application and after a little research I found some articles that explained how AT&T classifies signal strength groups into their now famous “bars”.

Reading CSQ Value from serial

On the Telit module you can issue the AT+CSQ command to have it return the rssi value (http://en.wikipedia.org/wiki/Received_signal_strength_indication). The rssi value is important because it will be used to determine signal strength.

Using a serial connection you can connect to your Telit GPRS module and issue the AT+CSQ command. I am using minicom for this purpose however there might be other applications for your setup.

Anywho after launching minicom and issuing the AT+CSQ command into the prompt my window looks like this.

Welcome to minicom 2.4
OPTIONS: I18n
Compiled on Sep  7 2010, 01:26:06.
Port /dev/ttyS1

Press CTRL-A Z for help on special keys

AT+CSQ
+CSQ 16, 0

You can see the AT+CSQ command returned “+CSQ rssi, ber“, now this doesn’t help us a whole lot right off the bat as there is still some more processing that needs to be done. What we are looking for is the rssi value in this return; it will be used to convert into dBm. dBm is a power ratio in decibels and it is used to judge quality of reception in wireless comm. Well what’s the “ber” for? Don’t worry about it as you won’t necessarily need it we aren’t that sweet and tight.

Strip all unnecessary string information from return

You will need to be able to read this return from serial port using whichever language you desire. Once you read back “+CSQ rssi,ber” you will need to use some string functions to strip away the unneccesary “+CSQ” and “,ber” leaving you with just the rssi integer, but I’ll leave that part up to you.

Translate rssi to dBm

Telit states that it’s rssi values correspond into dBm as following:
0 – (-113dBm or less)
1 – (-111dBm)
2 thru 30 – (-109 dBm thru -53dBm, which equates to about a +2 dBm per rssi step)
31 – (-51 dBm or greater)
99 – (signal unknown)

Ok so this might be confusing but it’s not all that difficult. Telit states that 2-30 rssi range is equal to -109 dBm thru -53 dBm or steps of 2 dBm for each rssi. Note: We know that when our Telit sends back 1 as our rssi value that it is -111dBm, well that’s probably going to be 0 bars and 99 is an unknown signal according to Telit.

Again so for every rssi value our dBm increases 2. So we get the following…

2 rssi = -109 dBM
3 rssi = -107 dBm
4 rssi = -105 dBm
5 rssi = -102 dBm
…
30 rssi = -55 dBm
31 rssi = -53 dBm

Now that we know what each rssi is equal to we can move forward.

AT&T Bars Formula

According to a blog I found on the internet this guy states that he believes AT&T to categorize their “bars” the following way based on dBm:

5 Bars / -75 dBm or greater
4 Bars / -83 to -74 dBm
3 Bars / -95 to -82 dBm
2 Bars / -105 to -94 dBm
1 Bar / -110 to -104 dBm
0 Bars / -111 or less

Ok great but what the shit does that do for me? Well we now know how to bracket our values into bars to get an easy to read signal meter.

Conclusion

If you do the legwork and convert the rssi into dBm using the two step method you will find out the following:
If rssi is equal to 1 you have 0 Bars
If rssi is greater than 1 and less than 6 you have 1 Bar
If rssi is greater than or equal to 6 and less than 10 you have 2 Bars
If rssi is greater than or equal to 10 and less than 15 you have 3 Bars
If rssi is greater than or equal to 15 and less than 20 you have 4 Bars
If rssi is greater than or equal to 20 but not equal to 99 you have 5 Bars

Remember RSSI of 99 is an unknown signal as stated by Telit.

Installing Windows Phone 7 Developer Tools on XP

I have an old development machine at home that still runs XP. Shoot me. The damn thing works fine and I’m not about to drop the money to upgrade the OS and hardware. I do from time to time like to use it for things it’s not designed for. I recently got an invitation to update my Windows Phone to the latest release of Mango. Well after reading the instructions I noticed I had to install the Windows Phone SDK 7.1, requirements are Vista or Windows 7. Problem.

Solution I found for this was the following:

1. Download the Windows Phone Developer Tools RTW from Microsoft Download Center
2. Extract the downloaded package by running vm_web.exe /x
3. Go to the folder of the extracted package & open the file baseline.dat in any text editor
4. Look for the ‘gencomp7788’ section and change this two entries from 1 to 0:
* InstallOnLHS=0
* InstallOnWinXP=0
5. Save the file baseline.dat
6. Run setup.exe /web

Thanks to Red Frogfish for this information. Hope this helps others.