May 11, 2009
In this post we will look into how we can use iframes to do multi file upload and also how we can use jQuery to communicate between the main document and a specific iframe (among many iframes).
So, the scenario here is we have a page with multiple file upload depending upon some data. We will use a repeater to deal with the data and hence we get ‘n’ rows of file upload depending upon the datasource. The iframe elements are kept inside repeater as shown below. Here we will see how we can trigger specific iframe events and then try to do validations and data communication between the main page and an iframe using jQuery. The communication is done with the help of accessing current pages elements and then setting the iframes hidden element with the values we got on the current page. The set values are then used by code behind of the iframe file upload page or the javascript of that page. So, in another way we achieve both file upload and parameter passing in this type of scenario.
multiple file uploads
Code Example1: Page = Main.aspx
<asp:Repeater runat="server" ID="rptAdData" OnItemDataBound="rptAdData_ItemDataBound">
<asp:Label CssClass="flHeight" ID="flHeight" runat="server"></asp:Label>
<asp:Label CssClass="flWidth" ID="flWidth" runat="server"></asp:Label>
<asp:Label CssClass="flCrTypeName" ID="flCrTypeName" runat="server"></asp:Label>
<asp:Label CssClass="lblAds" ID="lblAdIDs" runat="server"></asp:Label>
<asp:Label CssClass="lblSkus" ID="lblSkuIDs" runat="server"></asp:Label>
<asp:Label CssClass="lblCrSize" ID="lblCrSizeID" runat="server"></asp:Label>
<asp:Label CssClass="lblCrType" ID="lblCrTypeID" runat="server"></asp:Label>
<div id="divFrameOuter" style="margin-top: 5px;">
<iframe scrolling="no" frameborder="0" hidefocus="true" style="text-align: center;
vertical-align: top; border-style: none; margin: 0px; width: 100%; height: 90px;"
src="PhotoUpload.aspx"></iframe>
</div>
</asp:Repeater>
Code Example 2: Page = Main.aspx, Code = jQuery
<script type="text/javascript">
$(document).ready(function() {
$('iframe').load(function() {
var parent = $(this).parent();
var lblHeightIframe = $(this).contents().find("body .lblHeightInner"); //Finding the height element in iframe page -- the value will be set with this pages label element
var lblWidthIframe = $(this).contents().find("body .lblWidthInner");
var lblTypeNameIframe = $(this).contents().find("body .lblTypeNameInner");
var lblCampaignIdIframe = $(this).contents().find("body .lblCampaignIdInner");
lblWidthIframe.attr('value', parent.children('.flWidth').text().trim());
lblHeightIframe.attr('value', parent.children('.flHeight').text().trim());
lblTypeNameIframe.attr('value', parent.children('.flCrTypeName').text().trim());
lblCampaignIdIframe.attr('value', campaignId);
});
});
</script>
Code Example 3: Page = Photoupload.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PhotoUpload.aspx.cs" Inherits="PhotoUpload" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
</head>
<body style="margin:0px" onload="initPhotoUpload()">
<form id="photoUpload" enctype="multipart/form-data" encoding="multipart/form-data" runat="server">
<div id="uploadBlock" style="float: left; width: 30%;">
<div id="divFrame">
<div>
<input id="filPhoto" type="file" runat="server"/>
</div>
<div id="divUpload" style="padding-top:4px">
<input type="hidden" id="lblHeight" class="lblHeightInner" value="" runat="server" />
<input type="hidden" id="lblWidth" class="lblWidthInner" value="" runat="server" />
<input type="hidden" id="lblTypeName" class="lblTypeNameInner" value="" runat="server" />
<input type="hidden" id="lblCampaignId" class="lblCampaignIdInner" value="" runat="server" />
<input id="btnUpload" type="button" class="btnSimple" value="Upload Creative" />
</div>
</div>
</form>
</body>
</html>
There is some javascript too in the photoupload.aspx and it depends on how you want your particular file uplaod to work or else you can write me for that. In the code behind I have done thumbnailing and also taken care of reuploading new file using the same fileupload button.
So, once we are done with file upload in the Main.aspx I can write an event for ‘btnUpload’ button of photoupload.aspx page so that the event is catched at the parent page and some sort of validations like atleast on file is upload or so etc can be done and appropriate error message can be shown.
I hope this will be helpful to you. You can write to me at sushant.pandey@gmail.com in case of any queries or source code.
bye for now.
-Thanks
1 Comment | 
Technology | Tagged: iframe, iframe file upload, iframe jquery, iframe multiple file upload, jquery multiple file upload | 
Permalink
Posted by sushantp
February 26, 2009
In this post we will look into how can we enable get latest when doing check-outs while using TFS 2008. In case of a general development team where multiple devs are working on a project and modifying different portion of it we cant have exclusive locks most of the time as it restricts the capabilities of parallel or fast sequential development. So, in this type of general scenario we see the requirement of automatic get latest when somebody checks out a file as it would help in later merging of the file with server version.
TFS 2008 provides us with this option in team project settings -> souce control -> to select the option of get latest on check out. To find this option go to Team Explorer, if Team Explorer is not visible along with solution explorer then go to visual studio menu and under view you can find team explorer. Click it to open team explorer which will show all the team projects assigned to you. You can find source control link under team project too but this is not what we have to use here instead we have to find the source control by right clicking team project name as shown below:
Now when we click on source control the below window gets opened where we have to click get latest on check out option as outlined in the image too:
Hope this helps in case you are looking for it too.
bye for now.
-Sushant
Leave a Comment » | 
Technology | Tagged: automatic get latest, get latest, get latest option, Source Control, TFS 2008, TFS 2008 tips and tricks, Visual Studio Tips | 
Permalink
Posted by sushantp
February 25, 2009
Recently I was working on using client side template to show a tabular data and one of the columns was a date field. The return data was an enumerable type i.e. List of objects containing the System.DateTime (date) field for representing date. When I looked into the date column in my client side grid on browser I was surprised to see the resulted date in form of “/Date(998667000000)/” (the date data might not be exact as I have put how it looks like) which of kind of unexpected and then led to find how to get javascript Date object from the JSON returned date.
So, In the returned data we get JSON serialized date which is in ticks and hence causes problems at the client end as we can’t treat it as javascript date. Eval() fails in coverting it and returns error saying that the format of date is not correct. Now, to resolve this I liked this approach. Use the reviver function which can be used while doing JSON data parsing with JSON.parse function. You can look at http://www.json.org/js.html to know more about reviver funciton.
[from json.ord]
var myObject = JSON.parse(myJSONtext, reviver);
The optional reviver parameter is a function that will be called for every key and value at every level of the final result. Each value will be replaced by the result of the reviver function. This can be used to reform generic objects into instances of pseudoclasses, or to transform date strings into Date objects.
[/from json.ord]
So, here is a sample jQuery ajax call implementation which can be used as part of any event in your javascript file and would work for you. The pre-requisite here is to have JSON.js file included so that JSON object is understood by the interpreter and it doesnt break client side code.
//methodName -> The WebMethod name you want to call from ajax
//paramArray -> Array of parameters which will be converted as JSON params in this function
//successFunction -> name of successfunction to be called if ajax call succeeds
//errorFunction-> name of error Function to be called if ajax call fails
function ClientProxyDateFormatted(methodName, paramArray, successFunction, errorFunction) {
var pagePath = window.location.pathname;
var paramList = '';
if (paramArray.length > 0) {
for (var i = 0; i < paramArray.length; i += 2) {
if (paramList.length > 0) paramList += ',';
paramList += '"' + paramArray[i] + '"' + ':' + '"' + paramArray[i + 1] + '"';
}
}
paramList = '{' + paramList + '}';
$.ajax({
type: "POST",
url: pagePath + "/" + methodName,
contentType: "application/json; charset=utf-8",
data: paramList,
dataType: "text",
processData: false,
success: function(msgg) {
var msg = JSON.parse(msgg, function(key, value) {
var a;
if (value != null) {
if (value.toString().indexOf('Date') >= 0) {
//here we will try to extract the ticks from the Date string in the "value" fields of JSON returned data
a = /^\/Date\((-?[0-9]+)\)\/$/.exec(value);
if (a) {
var dt = new Date(parseInt(a[1], 10));
//getMonth return months with index 0 so you need to add 1 to get the correct month value.
return dt.getMonth() + 1 + "/" + dt.getDate() + "/" + dt.getFullYear();
}
}
return value;
}
});
successFunction(msg);
},
error: function() {
errorFunction();
}
});
return false;
}
This seemed to me as a good problem and hence I think it would be useful to you in case you are facing similar issue. Let me know if it helps or doesnt help 
bye for now.
-Sushant
Leave a Comment » | 
Technology | Tagged: ajax date, ajax date format, date, date formatting, incorrect date jquery, jquery date, jquery date formatting, json date, json date format, returned date | 
Permalink
Posted by sushantp
February 23, 2009
In this post we will see the use of jQuery in finding the count of checked and unchecked items from a list of checkboxes along with their count. This is also one of the common problems I faced and looked into how to use not selector and also found that count comes as not expected many a times so whats the reason behind that.
Let’s take a look at a generic example page where we have a list of checkboxes inside a table enclosed in a div (you can use any other scenario like a div having a list of checkbox elements only or a combination of checkboxes and other elements in it).
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<% if (false)
{ %>
<script src="jquery-1.2.6-vsdoc.js" type="text/javascript"></script>
<% }%>
<script type="text/javascript">
//Write your code when Document is loaded
$(document).ready(function() {
$("#testChk").click(function() {
alert($("#testCheck :checked").size());
//function to print the value of each checked checkboxes
$("#testCheck :checked").each(function() {
alert("value = " + $(this).val());
});
$("#tblSub").click(function() {
//show count of all not checked checkboxes only
alert($("#testTB :input:not(:checked)").size());
//show count of all not checked elements
alert($("#testTB :not(:checked)").size());
//function to print the value of each not checked checkboxes
$("#testTB :input:not(:checked)").each(function() {
alert("value = " + $(this).val());
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="testCheck">
<input type="checkbox" checked="checked" value="1" />
<input type="checkbox" checked="checked" value="2" />
<input type="checkbox" checked="checked" value="3" />
<input type="checkbox" checked="checked" value="4" />
<input type="checkbox" checked="checked" value="5" />
<input type="checkbox" checked="checked" value="6" />
<input type="checkbox" checked="checked" value="7" />
<input type="checkbox" checked="checked" value="8" />
</div>
<input id="testChk" type="button" value="Submit" />
<table id="testTB">
<thead>
<tr>
<th>test</th>
<th>chk boxes</th>
</tr>
</thead>
<tbody>
<tr><td>test</td><td><input type="checkbox" checked="checked" value="1" /></td></tr>
<tr><td>test</td><td><input type="checkbox" checked="checked" value="2" /></td></tr>
<tr><td>test</td><td><input type="checkbox" checked="checked" value="3" /></td></tr>
<tr><td>test</td><td><input type="checkbox" checked="checked" value="4" /></td></tr>
<tr><td>test</td><td><input type="checkbox" checked="checked" value="5" /></td></tr>
<tr><td>test</td><td><input type="checkbox" checked="checked" value="6" /></td></tr>
</tbody>
</table>
<input id="tblSub" type="button" value="Submit" />
</div>
</form>
</body>
</html>
Since everything is present in UI so I am not giving the code behind as it would be default without any changes to verify how the above is working.
Here are few lines to take a look upon:
//show count of all not checked checkboxes only
1) alert($(”#testTB :input:not(:checked)”).size());
//show count of all not checked elements
2) alert($(”#testTB :not(:checked)”).size());
In the first one we get the count of all non checked checkboxes only because it uses an addition filter of ‘input’ tag type which is how checkboxes get rendered in html. In case we dont use it as in 2) example then we get all the elements inside div testTB which dont have checked attribute so it return all the tr, td etc elements along with input elements thereby increasing the count of return set.
This is a simple example but would help you in case you are trying to find the non cheched elements and getting unexpected count. The reason there would be that all the checkboxes are not inside one container and hence you would have to use the input tag type. Also you might have to consider addition filtering in case the same container contains other input elements as then not will filter those also in result set causing unexpected count. Som the gist is that either you do the wrapping in such a way that these checkboxes are clubbed together or else you need to use additional filter to find the right result set.
Hope this helps!
bye for now.
-Sushant
2 Comments | Technology | Tagged: checbox jquery, checked count, count non checked, jquery selector, not selector | Permalink
Posted by sushantp
February 22, 2009
In this post we will look into filling dependent drop down list(s) on client side without using server side asp:dropdownlist control and autopostback, which is the common way we see around. We will be using jQuery at the front end to do the drop down list marp-up generation and adding data to it. We will be using WebMethod to retrieve JSON data from the server where we can return simple data types or any Enumerable data types like List etc so it fills the regular or common way of server side implementation where we use a service method or so to retrieve object collection from DB or from application code itself.
Please find the code snippet below which represents aspx page code behind file and app code file where collection is returned which can be replaced with a service layer call querying DB to get the collection back to presentation layer:
1) ASPX Page with jQuery Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<% if (false)
{ %>
<script src="jquery-1.2.6-vsdoc.js" type="text/javascript"></script>
<% }%>
<link href="DefaultStyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//Write your code when Document is loaded
$(document).ready(function() {
$("#ddl2").hide(0, function() { });
//Code to append a drop down list at client end
//$("#ddl1").append("<option value=\"new\">new</option>");
//event to be fired when an option\index gets changed for first drop down list
$("#ddl1").change(function() {
$("#ddl2").fadeOut(1500, function() { });
var value = $(this).val();
//alert(value);
$("#waitingBlock").css({ "margin-left": "10px" });
$("#waitingBlock").html("<img src='spinner.gif' alt='loading....' />")
.fadeIn(1500)
.insertAfter($("#ddl1"));
//Client side function call which will make ajax request for page method named FillDD to get json data
FillDDProxy("FillDD", ["selectedDDItem", value]);
});
});
function FillDDProxy(methodName, paramArray, errorFunction) {
var pagePath = window.location.pathname;
var paramList = '';
if (paramArray.length > 0) {
for (var i = 0; i < paramArray.length; i += 2) {
if (paramList.length > 0) paramList += ',';
paramList += '"' + paramArray[i] + '"' + ':' + '"' + paramArray[i + 1] + '"';
}
}
paramList = '{' + paramList + '}';
//Call the page method
$.ajax({
type: "POST",
url: pagePath + "/" + methodName,
contentType: "application/json; charset=utf-8",
data: paramList,
dataType: "json",
success: function(msg) {
successFunction(msg.d);
}
});
return false;
}
function successFunction(msg) {
$("#waitingBlock").fadeOut(1500, function() { });
var list = msg.toString();
var strArray = list.split(",");
//clear previously filled second drop down.
$("#ddl2").children().remove();
if (strArray.length > 0) {
for (var i = 0; i < strArray.length; i++) {
//Filling the second drop down on client side with returned json data
$("#ddl2").append('<option value=\"' + strArray[i] + '">' + strArray[i] + '</option>');
}
}
$("#ddl2").show(1500, function() { });
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList runat="server" ID="ddl1">
<asp:ListItem Value="d1v1" Text="d1v1"></asp:ListItem>
<asp:ListItem Value="d1v2" Text="d1v2"></asp:ListItem>
<asp:ListItem Value="d1v3" Text="d1v3"></asp:ListItem>
<asp:ListItem Value="d1v4" Text="d1v4"></asp:ListItem>
</asp:DropDownList>
<%--<asp:DropDownList runat="server" ID="ddl2"></asp:DropDownList>--%>
<select id="ddl2" ></select>
<span id="waitingBlock"></span>
</div>
<div>
</div>
</form>
</body>
</html>
2) Code behind C# file
using System;
using System.Web.Services;
using System.Collections;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static IEnumerable FillDD(string selectedDDItem)
{
//Instantiate your service class or call your service layer method directly in case it is also static
lib serviceLib = new lib();
return serviceLib.getDDValues(selectedDDItem);
}
}
I have used App_Code to represent service layer method:
3) App_Code\lib.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
/// <summary>
/// Summary description for lib
/// </summary>
public class lib
{
public lib()
{
//
// TODO: Add constructor logic here
//
}
public List<string> getDDValues(string currentValue)
{
//use the currentValue to get dependent DD values from DB
//I am putting them here hardcoded to reprenst the same.
List<string> listString = new List<string>();
listString.Add(currentValue);
listString.Add("Sushant");
listString.Add("RampGroup");
return listString;
}
}
Overall this code results into a beutiful animated dependent drop down showing and fading from ui depending upon the selection of first drop down. This overall is more performant that the postback as round trip is save with partial trip and also the mode of data transfer is thin JSON. On the client side rendering of this JSON data, it can be achieved either by using jQuery as shown in my example or else using jTemplates and then setting as data for the template. I will share the code in another post with use of jTemplates which can be of great help in scenarios where server side data controls like repeater or data grids are used and which can be replaced by the usage of jTemplates and doing a client side binding of the same with thin JSON data.
So, If you are looking into doing a AJAX and JSON call this example can help you along with an implementation of filling a dependent drop down.
Hope this helps!
bye for now
-Sushant
2 Comments | Technology | Tagged: ajax with jquery, dependent drop down, drop down without post back, jQuery drop down, json, page methods, second drop down, web methods | Permalink
Posted by sushantp
January 15, 2009
HD View is essentially an image viewer which helps in viewing high resolution images\very large images. Microsoft ICE is a software which can be used to stich multiple images to generate a very large panorama of the degree of gigapixels. Since you can have panorama of this degree hence you can achieve a full 360 degree view of subject.
This is a Microsoft Research project which uses capabilities of your graphics hardware to provide image smoothing and high level zooming to get a 3D illusion. HD View is available as activeX browser plugin for Firefox and IE. Having good graphics card helps in getting the full power of HD view. I tried installing it on my system where I didn’t had very good graphics card still I was able to get a real good view of panoramas. You need to have Direct3D installed (which gets installed as part of DirectX). You can get more details about HD View from http://research.microsoft.com/en-us/um/redmond/groups/ivm/hdview/hdgigapixel.htm and http://hdview.spaces.live.com/.
Here is a view of zoom details from http://www.yosemite-17-gigapixels.com
hd view
HD for Silverlight is also available on codeplex which is a Silverlight application to show HD View. You can download it from http://www.codeplex.com/HDViewSL. I tried the cool commandline tool hdmake to generate a high quality image. I downloaded Photoshop plugin of HD View and currently trying my hands on it. I will update about it in another post once I get something subtantial out of it.
But overall it looked very pomising and encouraging to me to see my panoramas with HD view with great details.
- Bye for now.
2 Comments | Technology | Tagged: gigapixel, HD, HD Silverligt, HD SL, HD View, HD Viewer SL, ICE, Panorama | Permalink
Posted by sushantp
December 15, 2008
Let’s take a look into on of the utilities\feature of Microsoft Word 2007 where you can write, edit and publish new or old posts to variety of blog service providers including wordpress and blogspot. In this post we will go step by step setting an wordpress account in my word document blog publish utility. This is actually called offline blogging or desktop blogging where you write a blog on some application offline and then publish them to web\blog service provider or providers at once whenever you want.
When you open a Word document click on File menu to find more options present there and then you can see a publish option present as shown in the image below:
You can then see another document getting opened with new menu items as publish, home etc and a pop-up window for creating a new account would come. You can setup word publish to work with wordpress, blogger, community server, sharepoint blog, typepad etc. This can be seen in the image below:
Once you select the blog service provider for setting an account you will proceed to the new window. I selected wordpress and then entered the blog url along with the credentials to use my wordpress account\data here in the offline mode. It works by the medium of webservices to get the data for you or load your data to your blog server provider. You can also provide your photo or imager server url to use the post images from.
Now, we are ready to write a new post in our word document and publish from the same page menu. We can get our older posts, review it, edit it and then republish the same. Click on Home page in the menu shows your blog home page, you can manage different accounts and then using it can publish the same post to multiple providers.
Hope this will help to some of you!!
Happy Blogging…
1 Comment | Technology | Tagged: offline blog posting, offline blog publishing, offline blogging, publish post word, word 2007, word 2007 publish, word blog post | Permalink
Posted by sushantp
December 8, 2008
There is a problem I came across some time back where I was having a table with names (including duplicates) in it and had to get name, count(name) as an output with a where clause to eliminate some of the entries. Major output requirement was to include the eliminated name entries too in the output and show name, 0 for those entries. Please find below the problem and solutions in detail:
Problem: There is a table having ID and Names like below and I need to return Name and Count of each Name.
Table: The table named Names looks like one provided below:
| ID |
Name |
| 1 |
Sushant |
| 2 |
Pandey |
| 3 |
Sushant |
| 4 |
Sushant |
| 5 |
Scott |
| 6 |
Scott |
| 7 |
Pandey |
We can get the required output by using this query: Select Name, Count(Name) from Names group by Name
The output will look like:
| Name |
Count |
| Sushant |
3 |
| Pandey |
2 |
| Scott |
2 |
Now the real problem comes when we have to use a where clause which filters some entries. Clause is ‘where Name like ‘%S%’‘so if we use this clause in above query we would get the below result.
| Name |
Count |
| Sushant |
3 |
| Scott |
2 |
(Query: Select Name, Count(Name) from Names where Name like ‘%S%’ group by Name).
So, going by the original requirement of including entry ‘Pandey’ also into the result showing count = 0 like
| Name |
Count |
| Sushant |
3 |
| Scott |
2 |
| Pandey |
0 |
We can get this by two ways mentioned below:
-
Solution 1: We can use union to get the above result. Though it seems to have more computation involved in it.
select Name,count(Name) as [count] from Names where Name in (select Name from Names where Name like ‘%S%’)group by Name union select Name, 0 as [count] from Names where Name not in (select Name from Names where Name like ‘%S%’)group by Name
- Solution2: There is a keyword for ‘Group By’ clause where we can use ‘All’ which make groups for all the entries even if they are filter out by a where clause. So the below query results in same output: Select Name, Count(Name) from Names where Name like ‘%S%’ group by all Name
So, after messing a lot I found that the solution lied in just one line query so thought of posting. Might be helpful to you.
Bye for now…
1 Comment | Technology | Tagged: count as 0, count as zero, get count 0, group by, group by all, sql query, SQL server, t-sql | Permalink
Posted by sushantp
November 29, 2008
We all have seen usage of CAPTCHA(Completely Automated Public Turing test to tell Computers and Humans Apart) or HIP (Human Interactive Proof) in several website preventing spams for comments or email, protecting web services from bot attacks where programs\bots tries to imitate humans and fool the server systems. CAPTCHA is very well known way of using Alphanumeric character images in a distorted way and random orientation like below:
You can take a look at my previous post on CAPTCHA at http://sushantp.wordpress.com/2008/08/25/captcha-image-code-verification/
There are some issue which people are finding these days that the distortion is sometime such that its not human friendly but computers are able to read that.
There is an alternate HIP solution developing at MSR which is still in BETA phase and has been prototype by other universities too with the usage of images instead of text where a human can do the identification of images.
Here is how Asirra looks like on a page:
Visit http://research.microsoft.com/asirra/ for complete details on Asirra and usage instructions.
To brief about Assira, this is a two way verification where javascript code gets the challenge and if user solves that correctly, gets a ticket from MSR’s server (also a success message\alert could be shown to user). This message is then passed along with form data as hidden field which is expected to be used by code behind and call a MSR Web Service to validate the Ticket. Repeated trials with the same ticket makes it fail.
In all this seems to be a encouraging way and should improve even more with the quality of images which come. Also there might be orientation changes for images for increased difficulty levels when it would come to machines. Also change in image size (random sized images in challenge) could be one of the improvements which we may find in the final versions.
Here is how the code looks like:
ASP.NET Page
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="asirra.aspx.cs"
Inherits="asirra" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
var passThroughFormSubmit = false;
function MySubmitForm() {
if (passThroughFormSubmit) {
return true;
}
// Do site-specific form validation here, then...
Asirra_CheckIfHuman(HumanCheckComplete);
return false;
}
function HumanCheckComplete(isHuman) {
if (!isHuman) {
alert("Please correctly identify the cats.");
}
else {
passThroughFormSubmit = true;
formElt = document.getElementById("mainForm");
formElt.submit();
}
}
</script>
</head>
<body>
<form runat="server"
method="get"
id="mainForm"
onsubmit="return MySubmitForm();">
<div style="margin:200px 0 0 20px;">
<script type="text/javascript"
src="http://challenge.asirra.com/js/AsirraClientSide.js"></script>
<script type="text/javascript">
// You can control where the big version of the photos appear by
// changing this to top, bottom, left, or right
asirraState.SetEnlargedPosition("top");
asirraState.SetEnlargedPosition("top");
// You can control the aspect ratio of the box by changing this constant
asirraState.SetCellsPerRow(4);
</script>
<br />
User Name: <input type="text"
name="UserName" />
Favorite Color: <input type="text"
name="FavoriteColor" />
<input type="submit"
value="Submit" />
</div>
</form>
</body>
</html>
C# Code Behind
using System;
using System.Net;
public partial class asirra : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
string asr_tkr = Request.QueryString["Asirra_Ticket"];
if (string.IsNullOrEmpty(asr_tkr))
{
Response.Write("Asirra Ticket Value is not present");
}
else
{
string queryString = "action=ValidateTicket&ticket=" + asr_tkr;
WebClient wc = new WebClient();
string resp = wc.DownloadString("http://challenge.asirra.com/cgi/Asirra?" + queryString);
if (resp.IndexOf("Pass", StringComparison.InvariantCultureIgnoreCase) > -1)
{
Response.Write("Got Asirra Ticket Verified");
}
else
{
Response.Write("Asirra Ticket Not Verified");
}
}
}
}
}
Take a look at it and try. You may like it too like me!!
bye for now.
Leave a Comment » | Technology | Tagged: alternate to captcha, Asirra, CAPTCHA, CAPTCHA examples, HIP, Image Code Verificaiton, MSR Asirra | Permalink
Posted by sushantp
