Saturday, March 12, 2011

Make reCAPTCHA Smaller

I don't recommend this solution BUT if it's your only option he's how to make reCAPTCHA smaller.

First you'll need to use a custom theme. Add the following before the form element:

<script type="text/javascript">
var RecaptchaOptions = {
    theme : 'custom',
    custom_theme_widget: 'recaptcha_widget'
};
</script>

Next add the HTML for the custom widget where you want it to show up inside the form.

<div id="recaptcha_widget" style="display:none">

   <div id="recaptcha_image"></div>
   <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

   <span class="recaptcha_only_if_image">Enter the words above:</span>
   <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

   <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

   <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
   <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
   <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>

   <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>

 </div>

 <script type="text/javascript"
    src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
 </script>
 <noscript>
   <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
        height="300" width="500" frameborder="0"></iframe><br>
   <textarea name="recaptcha_challenge_field" rows="3" cols="40">
   </textarea>
   <input type="hidden" name="recaptcha_response_field"
        value="manual_challenge">
 </noscript>

This is standard code from the reCAPTCHA documentation up to this point. The trick I used to make the img and div tags smaller is to set the width in CSS with the !important flag. Add this CSS to your page.

    #recaptcha_image,
    #recaptcha_image img 
    {
        width: 200px !important;
        cursor: pointer;
    }
    #recaptcha_image img:hover
    {
        position: absolute;
        width: 300px !important;
    }
    .recaptcha_only_if_image,
    .recaptcha_only_if_audio
    {
        display: block;
    }

This will make the reCAPTCHA fit in a space a little over 200px wide. I've added an img:hover style to make the image full size when the mouse rolls over it. The :hover style doesn't work on older browsers though so the next step would be to use jQuery to make the image bigger on hover or click. I'll leave that up to you to figure out. ;)

Sunday, February 20, 2011

Preserve Telerik MVC Grid Checkboxes When Paging

This article explains how to preserve the state of input checkboxes in a Telerik ASP.NET MVC Grid control when paging, sorting, and filtering. This solution only works for client side Data Binding. If you're using Server Side Data Binding you'll need to come up with a different solution.

I'm a big fan of the Grid control. It's a real time saver and fills in a big gap that ASP.NET MVC is missing over WebForms!

The first step is to maintain a list of checkbox states. Below is the client side javascript you'll need to add to the page that has your MVC Grid. Note, jQuery is required for this to work.

var selectedIds = [];

$(document).ready(function () {
    //wire up checkboxes.
    $('#YOUR_GRID_ID').on('change', ':checkbox', function (e) {
        var $check = $(this);
        //console.log($check);
        if ($check.is(':checked')) {
            //add id to selectedIds.
            selectedIds.push($check.val());
        }
        else {
            //remove id from selectedIds.
            selectedIds = $.grep(selectedIds, function (item, index) {
                return item != $check.val();
            });
        }
    });
});

NOTE: You'll want to change YOUR_GRID_ID to match what you set your Grid's Name to.

The code above uses the global variable selectedIds to store the values of each selected checkbox in the grid. I use the jQuery live method to attach the change event to every checkbox in the grid. The nice thing about live is that it will catch new checkboxes that are loaded when paging, filtering, or sorting.

The next step is to restore the checkbox states after each ajax request that changes the grid.

function onDataBound(e) {
    //restore selected checkboxes.
    $('#YOUR_GRID_ID :checkbox').each(function () {
        //set checked based on if current checkbox's value is in selectedIds.
        $(this).attr('checked', jQuery.inArray($(this).val(), selectedIds) > -1);
    });
}

NOTE: You'll want to change YOUR_GRID_ID to match what you set your Grid's Name to.

I use the Grid's OnDataBound client side event, which fires after the Grid is finished loading new data, to parse threw all the new checkboxes and set their checked state based on if their value is in our selectedIds global variable.

Add the .ClientEvents line below to wire up the onDataBound event:

@(Html.Telerik().Grid<Web.Models.YOURMODEL>()
    .Name("VideosGrid")
    .ClientEvents(events => events.OnDataBound("onDataBound"))
)

If this helped you or you have a suggestion to improve it, let me know via the comments!

Wednesday, February 16, 2011

Plupload and ASP.NET MVC3

This post will explain howto integrate Plupload into an ASP.NET MVC3 project. It will probably work with lesser version of MVC without too many changes.

Integrating it into my project went smoother then any upload plugin I've ever used before. My previous favorite was NeatUpload but I've been having issues with it with large files, and since Plupload supports chunked uploads I figured I'd give it a try.

Here's what I did to get the Custom Upload example working in MVC.

First add the following to one of your Controllers or create a new Controller to hold this Action. (most of the credit goes to these two Stackoverflow questions: Question 1, Question 2)

/// <summary>
/// Handles chuncked file uploads like the ones from plupload.
/// </summary>
/// <param name="chunk"></param>
/// <param name="name"></param>
/// <returns></returns>
[HttpPost]
public ActionResult Upload(int? chunk, string name)
{
    var fileUpload = Request.Files[0];
    var uploadPath = Server.MapPath("~/App_Data/Uploads");
    chunk = chunk ?? 0;

    //UPDATE 2/17/2011: Removed this since it doesn't work. I recommend setting the unique_names param client side if you want unique names.
    ////find a free filename if this is the first chunk
    //if (!chunk.HasValue || chunk < 1)
    //{
    //    int xx = 1;
    //    while (System.IO.File.Exists(uploadedFilePath))
    //    {
    //        uploadedFilePath = Path.Combine(uploadPath, Path.GetFileNameWithoutExtension(name) + "_" + xx + Path.GetExtension(name));
    //        xx++;
    //    }
    //}
    
    //TODO: cleanup old files

    //write chunk to disk.
    string uploadedFilePath = Path.Combine(uploadPath, name);
    using (var fs = new FileStream(uploadedFilePath, chunk == 0 ? FileMode.Create : FileMode.Append))
    {
        var buffer = new byte[fileUpload.InputStream.Length];
        fileUpload.InputStream.Read(buffer, 0, buffer.Length);
        fs.Write(buffer, 0, buffer.Length);
    }

    return Content("Success", "text/plain");
}

NOTE: If you want to secure this Action and you're using Forms Authentication add the [Authorize] attribute above [HttpPost]

NOTE 2: I'm uploading files to ~/App_Data/Uploads. Create this folder or change the code above.

Now open or create a View file that you want to add the upload to and add the following HTML:

<div id="container">
    <div id="filelist">No runtime found.</div>
    <br />
    <a id="pickfiles" href="#">[Select files]</a>
    <a id="uploadfiles" href="#">[Upload files]</a>
</div>

Add the following Javascript to your View assuming you've placed everything from the js folder in the Plupload zip into the ~/Scripts/plupload/ folder of your project:

<!--Load 3rd party plupload scripts-->
<script src="@Url.Content("~/Scripts/plupload/gears_init.js")" type="text/javascript"></script>
<script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>
<!--Load plupload and all its runtime scripts-->
<script src="@Url.Content("~/Scripts/plupload/plupload.full.min.js")" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function () {
        var uploader = new plupload.Uploader({
            runtimes: 'gears,html5,flash,silverlight,browserplus',
            browse_button: 'pickfiles',
            container: 'container',
            max_file_size: '2048mb',
            url: '@Url.Action("upload", "home")',
            flash_swf_url: '@Html.ScriptPath("plupload/plupload.flash.swf")',
            silverlight_xap_url: '@Html.ScriptPath("plupload/plupload.silverlight.xap")',
            filters : [
                {title : "Image files", extensions : "jpg,gif,png"},
                {title : "Zip files", extensions : "zip"}
            ]
        });

        uploader.bind('Init', function (up, params) {
            $('#filelist').html("<div>Current runtime: " + params.runtime + "</div>");
        });

        $('#uploadfiles').click(function (e) {
            uploader.start();
            e.preventDefault();
        });

        uploader.init();

        uploader.bind('FilesAdded', function (up, files) {
            $.each(files, function (i, file) {
                $('#filelist').append('<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' + '</div>');
            });

            up.refresh(); // Reposition Flash/Silverlight
        });

        uploader.bind('UploadProgress', function (up, file) {
            $('#' + file.id + " b").html(file.percent + "%");
        });

        uploader.bind('Error', function (up, err) {
            $('#filelist').append("<div>Error: " + err.code + ", Message: " + err.message + (err.file ? ", File: " + err.file.name : "") + "</div>");

            up.refresh(); // Reposition Flash/Silverlight
        });

        uploader.bind('FileUploaded', function (up, file) {
            $('#' + file.id + " b").html("100%");
        });
    });

</script>

NOTE: I'm using Razor as my View Engine. If you are not do a search for @* in the HTML above and replace with <%= %> type syntax.

NOTE 2: Update the url param in the javascript to point to where your Upload Action is. Mine is in the Home Controller

You will also need to have jQuery included. I left that out since most people already do, but if you don't you can use this:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1.3");
</script>

The only other thing you may want to immediately do is adjust the filters option in the javascript to allow/disallow file types as needed.

That's it! Hope this was as easy for you as it was for me!

Tuesday, February 8, 2011

Fix No Audio in Live Meeting

Tried to watch mvcConf today and Live Meeting would not give me any audio.

Make sure you have the latest version of Live Meeting:
http://www.mvcconf.com/?l=livemeeting

The fix that worked for me was the change the default Playback Device:
  1. Right click the Audio/Speaker Icon in the Windows Task Bar and select Playback devices
  2. Right click a different playback device and select Set as Default Device

If that doesn't work go back into Live Meeting and play around with the Audio options:
  1. In Live Meeting select the Voice & Video menu
  2. Click Options -> Setup Audio and Video
  3. Try changing the Speaker you want to use.

Thursday, January 20, 2011

Android Browser Issues

Ran into a really frustrating issue with Android's Webkit browser today. I'm using jQuery Mobile in a project but have tweaked it quite a bit. The site works awesome on an iPhone. Android (2.2.1) not so much.

The symptoms:
1) Regular html select inputs where not opening up with the list of options.
2) Certain links and buttons had difficulty registering clicks.
3) One of my text boxes would get scrolled to the top of the page as soon as you started entering text.

The solution?
Make sure -webkit-backface-visibility is not set to hidden on any parent elements. The jQuery Mobile CSS has it set to hidden for the ui-page class. Overriding it for android by setting it to visible fixed all 3 of the above issues.

This took about 6 hours to solve.

Kill me now.

Sunday, January 16, 2011

MVC3 Boilerplate

Every time I create a new ASP.NET MVC3 project there are certain libraries and code I re-use regularly. One of them being HTML5 Boilerplate which I love. I did some googling for "MVC3 Boilerplate" and didn't find anything, so I decided to start my own and placed it here on GitHub.


With every release MVC3 included more awesome out of the box (finally has jQuery AND jQuery UI!), but I'd like to see the option to go further. One of the things I love about Ruby on Rails is it includes more of what you need to get you straight to coding like a de facto ORM (ActiveRecord). I also don't like how complicated AspNetSqlMembershipProvider is and the fact it doesn't store data in cleanly named "Users" table so I decided to add my own simple User class that can be modified and extended.


I'd love to see someone with more experience then me clean up, take over, re-do or otherwise improve on this idea. So feel free to fork my project or make suggestions. I'm not always the best and keeping projects up to date but I'll see what I can do.


Some of the features I've included are:
  • HTML5 Boilerplate
  • Elmah (error logging)
  • JSON Parser (comes in handy when making JSON based ajax calls)
  • Modernizr (part of HTML5 Boilerplate, but awesome enough to warrant its own mention)
  • AntiXSS Library (Most of the places this is used was based on the Tekpub MVC2 Starter Site, I'm probably doing it wrong and/or not using it enough)
  • Ninject (dependency injection)
  • SquishIt (used to compress and minimize javascript and CSS)
  • Sql Server CE (included so you don't need full MS SQL or SQL Express)
  • EF Code First (used as the ORM)
  • Bits from Tekpub MVC 2 Starter Site
  • Basic User Signup using simple POCO User object

I really don't know how much I'll keep this project up to date but even if it helps one person that's enough for me. ;)

    Tuesday, January 4, 2011

    Roku Support 2011 Bug

    This is the fun chat I had with Roku support today. To be fair this was an honest mistake and totally excusable, but what I'm not impressed with is the reason I had to contact them in the first place. I bought 2 Rokus as gifts last year. My sister's Roku had an issue and she contacted their support. They determined it needed to be replaced but they needed proof of purchase which means I had to contact them. Grrr. When I called they only offered a fax number to fax the email receipt from Amazon. I was finally able to get an email from Tom, but after forwarding the receipt they want me to call back later to confirm they got it and to proceed with the RMA. So I have to contact them 3 times to RMA a gift. Kill Me.