Jan 312010
 

It’s hard to believe that JavaScript is already well over a decade old.  Often relegated to marginal tasks in its early years, JavaScript has grown to become a pillar of modern web development.  With the current popularity of DHTML and AJAX, it can be difficult to find a site that doesn’t use JavaScript anymore.  One of the driving forces behind JavaScript’s newfound popularity is a proliferation of JavaScript frameworks, such as jQuery.
Why?
Though JavaScript itself is a great programming language, the document object model (DOM) can be a web developer’s worst nightmare.  The DOM is a method through which browsers expose an interface allowing JavaScript code to manipulate elements, handle events, and perform other tasks related to a document within the browser.  While almost every browser implements an ECMA standard version of JavaScript, their DOM implementations are inconsistent and quirky at best.  In fact, if you’ve had bad experiences with client-side programming in the past, it’s likely that the DOM was the true source of your frustrations, not JavaScript itself.  This is exactly the pain point which jQuery addresses.
jQuery abstracts the DOM away, allowing you to focus on behavior instead of implementation.  It provides a simplified, reliable interface to the DOM that works consistently across all major browsers.  Instead of wasting time and effort supporting the idiosyncrasies of these browsers, you can write jQuery code that works the same across them all.

Why jQuery?  What’s in it for me?

  • CSS3 selectors – In jQuery, nearly everything begins with a selector that defines a set of one or more DOM elements.  By implementing a CSS3 compliant selector engine, jQuery provides tremendous flexibility in this area.  Selectors may contain any combination of ID, CSS class, and/or an expanded set of pseudo selectors (e.g. :first, :selected, :input).
  • DOM manipulation – One of the most common client-side tasks is making changes or additions to a rendered HTML document.  Whether updating a snippet of text or adding entire HTML structures, jQuery provides a robust set of utility functions that are up to the challenge.  Combined with the versatile selector engine, complex manipulations are possible with only a few lines of jQuery code.
  • Animation – The core jQuery library contains a few commonly used animations, such as fades and slides, and it also provides for specifying custom animations.  Beyond that, jQuery UI offers animated transitions between CSS classes and a wide variety of easings.
  • AJAX communication – No JavaScript framework would be complete without a way to make asynchronous requests, and jQuery is no exception.  jQuery provides AJAX communication through several methods which allow you to choose an appropriate balance between control and simplicity.
  • Plugins – jQuery’s straightforward extensibility model has led to a thriving plugin ecosystem.  As of this writing, there are almost 2,500 third-party plugins in the repository.  Everything from simple utility functions to entire client-side templating solutions are available as jQuery plugins.  If you can imagine a feature, it’s likely that a plugin already exists to assist you in implementing it.
  • Cross-browser compatibility – As previously mentioned, one of jQuery’s key strengths is that all of its features work consistently across every major browser.  Any jQuery code that you write will produce the same results in Internet Explorer 6.0+, Firefox 2.0+, Safari 3.0+, Opera 9+, and Chrome.
  • Officially supported by Microsoft – For many Microsoft developers, this official blessing is the clincher.  Not only will Microsoft begin including jQuery with Visual Studio, but it is part of the default ASP.NET MVC project template.  What’s more, Microsoft Product Support Services has already begun offering support for jQuery.

Coming from ASP.NET, what should I know?

If you’re coming from an ASP.NET development background, some of jQuery’s idioms may seem foreign at first.  As with any framework, it’s important to learn the conventions and use them to your advantage.  Going against the grain only wastes your time and effort.
In that spirit, these are a few specific tips that I hope will help you flatten the learning curve a bit.

  • Use selectors.  Think in sets. In the ASP.NET world, it’s rare to select sets of controls through queries. Instead, we’re accustomed to referencing a single control by its unique ID.  Of course this is possible in jQuery too, but its selector engine is far more sophisticated.

    Using selectors to identify a set of one or more elements is cleaner and more expressive than the iterative machinations you may be used to in ASP.NET server-side code.  Before parsing out an ID or iterating over a group of elements in search of certain ones, be sure that the task isn’t more easily accomplished through a jQuery selector.

  • Use CSS classes for more than just styling. Another technique that is counterintuitive at first is the use of CSS classes as flags.  Coupled with jQuery’s selector engine, “flag” classes are surprisingly powerful.

    A good object lesson comes from one of my recent contracts, where I was hired to add client-side interactivity to an online card game.  One of the requirements was that the card images should have OnClick handlers applied at particular times, but only to those cards which were face down.

    The .NET developer in me immediately considered maintaining the state of all the cards in some sort of client-side collection.  Then, I could have iterated over that array to set up the appropriate OnClick handlers when necessary.  That would have worked, but it would have been messy, prone to breakage, and generally difficult to maintain.

    Instead, I realized that CSS classes as flags would allow me to implement a more elegant solution.  Within the code that “flipped” the cards face up, I used addClass to add a “flipped” class to the card images.  Then, a simple $(“.card:not(.flipped)”) selected the set of cards which were face down.  Using jQuery’s click(fn) on that set of elements allowed me to implement the entire feature in just a few lines of code.  Perhaps more importantly, that code was far easier to read and understand than the alternative would have been.

  • Understand unobtrusive JavaScript.
    In the ASP.NET world, we use a lot of what’s sometimes termed obtrusive JavaScript.  This means that client-side event handlers are defined as attributes on elements.  For example, several ASP.NET WebControls render an OnClick=”javascript:__doPostBack()”attribute as part of their markup.  This is considered obtrusive JavaScript.

    When ASP.NET was initially being developed, this inline JavaScript was the norm.  However, as browsers began providing more sophisticated faculties for imperatively adding event handlers, this declarative technique quickly lost favor with client-side developers. As a consequence, the preferred approach has shifted toward what’s called unobtrusive JavaScript.

    Unobtrusive JavaScript is now considered a best practice when wiring up client-side event handlers.  This is primarily because it facilitates separation of concerns between behavioral JavaScript and structural HTML markup.  Unobtrusive JavaScript also helps you to write cleaner, more semantic markup, which improves accessibility and often has SEO benefits.

  • Use the console to learn interactively.
    Coming from the save-compile-reload paradigm of statically typed server-si
    de development, it’s natural to approach client-side development in a similar fashion.  While you certainly can write client-side code that way, it’s akin to working blindfolded when you consider the alternatives.

    Since JavaScript is usually interpreted by a browser, the browser is one of the best debugging environments available.  In particular, a JavaScript “console” is terrific for interactively interrogating the DOM, testing jQuery selectors against actual markup, and refining JavaScript code in real-time.

    My preferred browser-based tool is the Firebug addon to Firefox.  I cannot praise this Firebug highly enough.  It has revolutionized how I approach client-side development, both of JavaScript and of CSS.  If you prefer Internet Explorer, IE8’s updated developer tools are also very capable in this department.
    Whatever your browser of choice, I urge you to give these utilities a try when debugging client-side functionality.  Once you become proficient with one of these tools, you’ll be amazed that you ever developed client-side code without it.

  • Get the VSDOC.
    Even though browser-based tools are great for debugging, an ASP.NET developer’s primary editor is still going to be Visual Studio.  When writing jQuery code in Visual Studio, having proper Intellisense can make a tremendous difference in productivity.  The discoverability that Intellisense provides is especially beneficial when you’re unfamiliar with jQuery’s API.

    As part of the official support for jQuery, Microsoft provides a documentation file to provide jQuery Intellisense inside Visual Studio 2008.  This is provided through what’s called a vsdoc file, and is available on the jQuery download page (via the “Documentation: Visual Studio” links).
    Jeff King has assembled an excellent FAQ to help you get Visual Studio 2008’s JavaScript Intellisense working:  http://blogs.msdn.com/webdevtools/archive/2008/11/18/jscript-intellisense-faq.aspx 

From Dave Ward’s nice explanations..

Jan 292010
 

Well, here is a simple captcha you can use in your .net web applications.

1- Create an aspx page named “Captcha” and remove everything in the page source but the line starts with

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Captcha.aspx.cs" .... %>

2- Simply go to the code behind of your page and modify your Page_Load event as below

protected void Page_Load(object sender, EventArgs e)
{

Random ran = new Random(DateTime.Now.Millisecond);

int no = ran.Next(100000);

HttpContext.Current.Session["Captcha"] = no.ToString();

Bitmap bmpOut = new Bitmap(100, 50);

Graphics g = Graphics.FromImage(bmpOut);

g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.Bilinear;

g.FillRectangle(Brushes.PaleGoldenrod, 0, 0, 100, 50);

g.DrawString(no.ToString(), new Font("Verdana", 20), new SolidBrush(Color.RosyBrown), 0, 0);

MemoryStream ms = new MemoryStream();

bmpOut.Save(ms, System.Drawing.Imaging.ImageFormat.Png);

byte[] bmpBytes = ms.GetBuffer();

bmpOut.Dispose();

ms.Close();

Response.BinaryWrite(bmpBytes);

Response.End();
}

This code will create the captha value and add it into the Session variable named “Captcha” as string.
End finally it will create the image as image to be called from another page.

3- Simply create another page with an image control and assign ImageUrl as shown below


4- Just browse your last created page and you will see your captcha is working ..

5- So you can validate your captcha value in Session and user entered value on your last page while submiting some data

Hope this helps.

Jan 272010
 

For one of my applications , I needed to get the all the records,found in AdvancedFind and manage these records.
If the record count is less than max display number of grid view ,there is no problem.
Here is the solution in one of my old posts.
What if the the records are more than this number ?
My solutios is to get the Advanced Find FetchXml Query and evaluate it on my custom aspx page through a grid button by using JavaScript.

Here is the JavaScript code which need be placed as JavaScript attribute in custom grid button.In Crm Sdk,you can find how to add a custom button on a grid.

function getAdvFindFetchXml()
{
if(document.getElementById('FetchXml'))
{
return document.getElementById('FetchXml').value;
}
else
{
return '';
}
}
var sUrl = '/ISV/YourPage.aspx';
var sWin = window.open(sUrl,'','height=650,width=750,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,modal=yes');

And now , you need to create a custom aspx page to handle the events and FetchXml Query.

1-Create an aspx page.
2-Add an asp:textbox or asp:hiddenfield named “crmAdvFindFetchXml” to your page.
3-Copy and paste the javascript code below before the tag of your page.This code will assign the Advanced Find FetchXml Query to your control.



4-Add an asp:button to your page and create a post back button click event for the button.

5- Copy and paste the code below in the asp:button click event.

string fetchXml=crmAdvFindFetchXml.Text.Trim();
CrmService crmService=new CrmService();
/*
....
init your CrmService regarding your crm instance
....
*/

crmService.Fetch(fetchXml);
XmlDocument xmlDoc = new XmlDocument();
xmlDoc.LoadXml(result);
XmlNodeList xmlNodes=xmlDoc.GetElementsByTagName("result");
foreach (XmlNode item in xmlNodes)
{
if (item["accountid"] != null)
/* accountid is just for example ,it can be any fieldid which is retrieved in fetchxml for your needs */
{
Response.Write(item["accountid"].InnerText);
}
}

Cheers,
-