So I found the needed video workshops at Channel 9. I think they have the order quite mixed-up. So here are the video workshops in the correct order:

1. Rx Workshop: Introduction
2. Rx Workshop: Observables versus Events
3. Rx Workshop: Unified Programming Model
4. Rx Workshop: Writing Queries
5. Rx Workshop: Schedulers
6. Rx Workshop: Event Processing
7. Rx Workshop: Reactive Coincidence
8. Rx Workshop: Programming the Cloud

I’ll write more post about Reactive.NET once I become familiar with it

Share and Enjoy

Related posts:

1. Free E-Books for .NET Programmers and Architects
2. Get Your Free eBook: Illustrated C# 2008
3. So You Like MS Paint? Here is the Free and Much much better Replacement

While scrolling ups and downs trying to digest the content, I noticed that there are left and right navigational buttons which are statically positioned. So even when I scrolled all the way up or down, the buttons will remain at the same position.

I totally bought this very good idea. I realized that this help the readers alot. They did not need to comb through the page to find the previous/next buttons.

Then I looked back at this very own blog’s navigational links. To my dismay, they are now looks totally unacceptable

So, I want to make this blog navigational buttons statically positioned too. But then I remember, visitors to this blog are not all using 24″ wide flat screen. To validate my suspicion, I logged in to Google Analytics and look at the visitors’ browser information.

Aha! Many of this blog’s visitors are still using resolution with 1024 pixels of width. Considering that this blog requires at least 960 pixels, I need to ensure that this changes only affect those visitors that have enough free pixels on the left and right side for the links. For that very reason, I can’t do the modification on the WordPress’ template. Hence, jQuery is the only way to go.

In summary, the jQuery script will do the following steps:

1. get the width of browser’s window.
2. if have enough space for the links, then set the links into fixed position and then hide the links’ original container.
3. if not, check whether the links’ container is hidden. If hidden, make it visible and move the links inside
4. repeat step 1,2,3 when the window is resized

To implement this, I need to firstly modify the navigational links in my template’s index.php and single.php.

index.php

<div class="navigation"  id="divPostNav">
	<div id="divPrev" class="left">
		<h3><?php next_posts_link(__('&laquo; Previous Entries', 'pyrmont_v2')); ?></h3>
	</div>
	<div id="divNext" class="right">
		<h3><?php previous_posts_link(__('Next Entries &raquo;', 'pyrmont_v2')); ?></h3>
	</div>
	<div class="clear"></div>
</div>

single.php

<div class="post" id="divPostNav">
	<div class="navigation">
	<div id="divPrev" style="width:50%" class="left">
		<h3><?php previous_post_link('%link','&lt;&lt; %title'); ?></h3>
	</div>
	<div id="divNext" style="width:50%; text-align:right;" class="right">
		<h3><?php next_post_link('%link','%title &gt;&gt;'); ?></h3>
	</div>
	<div class="clear"></div>
 </div>

Next, I need to add the following script to footer.php

if (jQuery)
{
	/* obtain jQuery instance */
	$sdv = jQuery.noConflict();

	/* ensure the links look & feel consistent */
	var formatLink = function(strEl){
		var pEl = $sdv(strEl);
		if (pEl.length>0) {
			pEl.children().children().css('color','#ccc');
			pEl.children().children().hover(
				function(){$sdv(this).css('color','#E1771E');},
				function(){$sdv(this).css('color','#ccc');}
			);
		}
	}
	formatLink("#divPrev");
	formatLink("#divNext");

	var fnModifyNavigation = function(){
		/* obtain window's width */
		var w = $sdv(window).width();
		var hw = (w-970)/2;
		if (hw>200)
		{
			/* we have enough space for the fixed postion links */
			jQFPL($sdv("#divPrev"),'left',0, hw);
			jQFPL($sdv("#divNext"),'right', 0, hw);
			$sdv("#divPostNav").hide();
		}
		else
		{
			/* not enough space for the fixed postion links */
			var divNav = $sdv("#divPostNav");
			if (divNav.length > 0) {
				if (divNav.css('display') == 'none')
				{
					divNav.show();
					divNav.prepend(jQSPL("#divNext", "right"));
					divNav.prepend(jQSPL("#divPrev", "left"));
				}
			}
		}
	}	

	/* jQuery Fixed Position Link */
	var jQFPL = function(el, remClass, absPosPX, width)
	{
		var pEl = el.detach();
		if (pEl) {
			pEl.removeClass(remClass);
			eval("var objStyle = { 'position':'fixed', 'top':'300px', 'width': '"
				+ width + "px', '" + remClass + "':'" + absPosPX+ "px', 'text-align':'"
				+remClass+"'};");
			pEl.css(objStyle);
			pEl.appendTo("body");
		}
	}

	/* jQuery Static Position Link*/
	var jQSPL = function(strEl, strFloat){
		var el = $sdv(strEl).detach();
		el.css('position','static');
		el.css('width','50%');
		el.css('float',strFloat);
		return el;
	}

	/* run position modification routine
		after the document is loaded */
	$sdv(fnModifyNavigation);	

	/* handle the window's resize event
		and run position modification routine again */
	$sdv(window).resize(fnModifyNavigation);
}

That’s all needed to make the prev/next navigational links statically positioned on the screen.

I hope it helps, cheers!

References

1. jQuery Selectors
2. jQuery CSS
3. jQuery DOM Manipulation
4. jQuery Events

Share and Enjoy

Related posts:

1. How to use jQuery in Your WordPress Post
2. How to Prevent WordPress Loads jQuery Twice
3. Using jQuery to Enhance Google Syntax Highligher WordPress Plugin

I was happy Dynamic Widgets user interface is really easy. You just need to declare your sidebar widgets as a dynamic instead of static. Then continued by define the rules that regulate when that particular widget is shown or hidden by clicking list of check-boxes describing the conditional logic.

Sadly, today I found out that the Dynamic Widget is broken. It didn’t recognize that the current page is a Tags archive page. The result is obvious, it disregard any logical conditions that I previously set and messed up my sidebar.

It is very likely that my recent upgrade to WordPress 3.3.1 is the primary cause. Since I don’t want to revert to previous WordPress version, I look out for replacement. Then I found out Widget Logic. If you are familiar with Boolean logic, Widget Logic is super effective. Instead of clicking check-boxes for configuration, you write your own logical condition. Widget Logic only evaluate those widgets that have something in their ‘Widget logic’ field. If their ‘Widget logic’ field is empty, the widget is simply treated as static widget.

As you can see, the logical condition is composed using WordPress’s functions. Here are the list of WP’s commonly-used functions that could help you:

• is_front_page()
• is_page()
• is_single()
• is_tag()
• is_category()
• is_archive()

For complete list of functions, you could refer to WordPress documentation.

And if you’re not familiar with Boolean logic, you could learn how to do it HERE.

Quick Example

!is_tag() && !is_page() && !is_single() && !is_category()
This widget will be shown if the current page:

1. is not a Tags page, and
2. is not a Page (not a Post), and
3. is not a Single post, and
4. is not a Category page

I hope it helps, cheers!

Share and Enjoy

Related posts:

1. How To Show Authorship In Google Search Result For WordPress Blog
2. MS-SQL Stored Procedure for Absolute Beginner, Part 1

Due to the time constraint and my lack of familiarity with the overall Java EE environment, I decided to move it into my comfort zone

To create the overall layout, we can always derive from Ext.NET MVC project. So I made a few changes and I have something like this:

When the user clicked the Search button, we need to submit to backend processing and show the output in the Result panel.

<ext:Button Width="100" Height="20" runat="server" ID="btnSearch" Text="Search">
	<Listeners>
		<Click Fn="fnSearch" />
	</Listeners>
</ext:Button>

The click event handler is in JavaScript:

var fnSearch = function(sender, ev) {
   pnlResult.load({
	url:'/Job/Search',
	params:{shipref: txtShipRef.getValue()},
	callback:function(el){
		el.applyStyles("overflow:scroll");
	},
	text:'loading...',
	timeout:30
   });
}

Meanwhile at the backend, JobController.cs will have the following the action handler:

public ContentResult Search(String shipref)
{
	var res = new ContentResult();
	res.ContentType = "text/html";
	var sb = new StringBuilder();
	try
	{
	    //Convert the Java code in JSP page into C# code
	    //Highly recommended to use sb.Append()
	    //instead of + operator for String concatenating
	    res.Content = sb.ToString();
	}
	catch (Exception ex) {
		res.Content = ex.ToString();
	}
	return res;
}

There you go, at least now we can move this application to a newer and better server. Which should translates as a better experience to the user

I hope it helps. Cheers!

Share and Enjoy

Related posts:

1. Printing The Content of GridView
2. EnableEventValidation Error
3. How To Quickly Format Excel Document for Your Database Query Result

This two code blocks apparently killed my RSS Feed! I didn’t know about this, until I visited my LinkedIn page. LinkedIn page was prompting me to enter my WordPress blog URL address. Hmm.. that’s weird. I remember I have done that immediately when I created my LinkedIn account. I squinted my eyes to find any error messages. Below the WordPress form, I saw broken red lines with varying degree of thickness. Apparently the error message was outside the DIV’s visible area. The error message reads “Error in parsing http://sodeve.net?feed=rss2″.

Here’s the offending inline codes:

<script type="text/javascript">
		var swfVersionStr = "10.2.0"; var xiSwfUrlStr = "/swf/playerProductInstall.swf";
		var flashvars = {}; var params = {};
		params.quality = "high"; params.bgcolor = "#3a3737";
		params.allowscriptaccess = "always"; params.allowfullscreen = "true";
		var attributes = {}; attributes.id = "SertifikasiDownloader";
		attributes.name = "SertifikasiDownloader"; attributes.align = "left";
		swfobject.embedSWF("/swf/Downloader.swf", "flashSertifikasiDownloader", "493", "332", swfVersionStr, xiSwfUrlStr, flashvars, params, attributes);
		swfobject.createCSS("#flashSertifikasiDownloader", "display:block;text-align:left;");
</script>

And

<script type="text/javascript">
		var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://");
		document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
			+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
</script>

Btw, please note that I made the JavaScript codes in multiple lines to make it readable. In its original form, each code block will be merged into a single line.

When I opened up this blog’s RSS Feed URL using Google Chrome, it spitted back red rectangle error message back at me. I opened the same URL with Safari, and it simply give up without even telling what’s the source of the error. Still not satisfied, I launched both IE9 and Firefox to the same URL.

Surprise surprise, these two browsers didn’t report any error. IE9 incompletely renderred the XML as a full-page of words without any arrangement. But it actually stopped rendering the content half-way. Perhaps it saw the error, got depressed, then perhaps go hiding somewhere trying to get high. Great, IE9, your act is just like Towelie.

If IE9 is like Towelie, I think Firefox is like Eddie Mora from Limitless. Although there’s error in the feed, it is still showing everything perfectly. And by perfectly, I mean everything. The FeedBurner’s favicon, the layout, the form to subscribe to the feed.

Last but not least, Opera. I think Opera is the most informative among all. It prompted the error, described what kind of error is it, which location the error was triggered from, and it even shown the part of the XML code where the error is originated.

Based on this razor-sharp information from Opera, I look into the XML file. I found out that the second JavaScript code block was auto-encapsulated inside CDATA section. But why only the second code block was auto-encapsulated? What makes the first code block so special (or not so special, depending on your today’s mood) that it wasn’t auto-encapsulated?

Anyway, I solved this issue by taking out both code blocks, and put them into two separate external .js file. Yes, this is actually the recommended practice should you ever need to include JavaScript code in your WordPress blog post. Why didn’t I do it in the first place? In my defense, the inline JavaScript code did work. As long as you make them in one single line.

What I did’t realize was that I accidentally depended on a ‘hack’, deprecated-method, or whatever it is that now WordPress (or W3 Total Cache) doesn’t support. I am not sure whether I should call this a bug. What do you think?

Moral of the story, use the recommended best practice when doing something, but don’t stop yourself from hacking Show me your hand if your’re agree!

Cheers!

The screenshots from the browsers:

Share and Enjoy

Related posts:

1. How to Use Javascript in Your WordPress Blog Post
2. Singapore NRIC Generator
3. How to Check Whether JavaScript is Enabled From Server

Just a short background story. We have ASP.NET MVC application already deployed in the production server. Unfortunately, the launch date of the application is still days ahead. So instead of showing the application, a countdown page is more appropriate.

So somebody come up with the countdown page. Sadly, it was in PHP. It was a quite challenge to make IIS serve the index.php. I tried set the IIS’ default document priority, but it didn’t work.

Then I realized that Global.asax is overriding IIS behavior. Since the index.php needs a few .js files, .css and few .png images, I amended the Global.asax.cs into something like this:

protected void Application_AuthenticateRequest(object sender, System.EventArgs e)
{
	string url = HttpContext.Current.Request.RawUrl.ToLower();
	if (!(url.EndsWith("index.php")
		|| url.EndsWith(".js")
		|| url.EndsWith(".css")
		|| url.EndsWith(".png")))
	{
		Response.Redirect("http://www.project.com/index.php", true);
	}
	//.....
	//Your exisiting code
	//....
}

To deploy this solution, first I recompile the project. Then I backup my original dll by renaming it into .bak file. Lastly, I copied the newly compiled dll into the Server’s bin folder.

This way, it would be a minor change on the launch date D-Day. I could simply delete the application’s main dll file, and rename the existing .bak file into .dll.

I hope it helps. Cheers!

Image courtesy of: Human Angel

Share and Enjoy

No related posts.

After consulting with Google, it pointed out a great website that teaches tips & tricks on Javascript. I modified his project to suit what I need. Below is the code, and after it, you could find the Live Demo.

Original Code

<html>
	<head>
		<title>Test JQuery</title>
		<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
		<script type="text/javascript">
			$(function() {
			$('div.sdvExp')
				.css("cursor","pointer")
				.attr("title","Click to expand/collapse")
				.click(function(){
					$(this).siblings('.child-'+this.id).toggle();
				});
			$('div[class^=child-]').hide();
		});
		</script>
	</head>
	<body>
		<div class="sdvExp" id="div1">
			<p>Lorem Ipsum</p>
		</div>
		<div class="child-div1">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at commodo tortor. Donec condimentum rutrum dui,
			vitae rutrum dolor malesuada a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
			turpis egestas. Donec facilisis ligula eu risus cursus cursus. Curabitur nec bibendum nulla.
			Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
			Vivamus eu dolor et enim egestas pellentesque ac a sapien. Maecenas aliquam adipiscing fermentum.
			Quisque egestas dui sed lacus congue id sagittis urna mattis. Duis ut cursus libero.
			Pellentesque lorem neque, fermentum sed fermentum at, auctor et nisl. Nulla lobortis elit odio.
			Suspendisse laoreet volutpat adipiscing.
		</div>
	</body>
</html>

Live Demo

Making it Work in WordPress

To make the box working in WordPress, please observe the following source code and follow the three steps:

<!-- STEP 1: Create the control DIV. Its class name should be sdvExp. It also must have an ID (e.g. sdvExp1958) -->
<div class="sdvExp" style="background:#333;border:1px" id="sdvExp1958"><p>Expandable/Collapsible Box Demo</p></div>

<!-- STEP 2: Create the content DIV. Its class name should be child-{control-div-ID} (e.g. child-sdvExp1958) -->
<div class="child-sdvExp1958">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at commodo tortor. Donec condimentum rutrum dui, vitae rutrum dolor malesuada a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec facilisis ligula eu risus cursus cursus. Curabitur nec bibendum nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu dolor et enim egestas pellentesque ac a sapien. Maecenas aliquam adipiscing fermentum. Quisque egestas dui sed lacus congue id sagittis urna mattis. Duis ut cursus libero. Pellentesque lorem neque, fermentum sed fermentum at, auctor et nisl. Nulla lobortis elit odio. Suspendisse laoreet volutpat adipiscing.
</div>

<!-- STEP 3: Add the following code -->
<script type="text/javascript" src="https://s3-us-west-1.amazonaws.com/sodevejs/sodeve.expander.js"></script>

If you follow three steps above, you should get your expandable/collapsible box working.

Good luck!

Share and Enjoy

Related posts:

1. How to Prevent WordPress Loads jQuery Twice
2. Using jQuery to Enhance Google Syntax Highligher WordPress Plugin
3. Adding an expandable snippet box to your WordPress blog

When its content changed, textbox’s event handler will submit the value to backend process for validation. If valid, the textbox content will be cleared and a single beep sound will be played. If not, a triple beep sound will be played.

Apparently we had a quite challenge in implementing these single beep and triple beep sounds . So today I want to share what I have learned. When I googled for this topic, I found that there are at least three ways to do this. So I did made a simple HTML project, which you can download at the bottom of this article. I then tested each method using all major browsers (Firefox, Google Chrome, Internet Explorer 9, Opera and Safari).

The first two methods are utilizing plugins. IE will use Windows Media Player plugin, while the rest requires QuickTime plugin. Without these plugins, the first two methods won’t work.

1. Using EMBED tag.

<html>
   <head>
      <script type="text/javascript">
         function PlaySound(soundObj) {
           var sound = document.getElementById(soundObj);
           if (sound)
              sound.Play();
         }
      </script>
   </head>
   <body>
      <embed src="sounds/beep.wav" autostart="false" width="0" height="0" id="beep"
      enablejavascript="true">
      <embed src="sounds/beep3.wav" autostart="false" width="0" height="0" id="beep3"
      enablejavascript="true">
      <form>
         <input type="button" Value="Beep" onclick="PlaySound('beep')" />
         <input type="button" Value="3 Beeps" onclick="PlaySound('beep3')" />
      </form>
   </body>
</html>

Tested working on:

Surprisingly, it doesn’t work in current version Firefox (7.0.1). Once the page is loaded, Firefox simply barfed error message saying that the QuickTime plugin is crashed.

2. Using OBJECT tag.

<html>
   <head>
      <script type="text/javascript">
         function PlaySound(soundObj) {
           var sound = document.getElementById(soundObj);
           if (sound) {
               if (sound.object)
                  //IE needs this
                  sound.object.Play();
               else
                  sound.Play();
              }
         }
      </script>
   </head>
   <body>
      <object id="beep3" type="audio/wav" style="visibility:hidden;" data="sounds/beep3.wav">
         <param name="autostart" value="false" />
      </object>
      <object id="beep" type="audio/wav" style="visibility:hidden;" data="sounds/beep.wav">
         <param name="autostart" value="false" />
      </object>
      <form>
         <input type="button" Value="Beep" onclick="PlaySound('beep')" />
         <input type="button" Value="3 Beeps" onclick="PlaySound('beep3')" />
      </form>
   </body>
</html>

Tested working on:

This method doesn’t work on IE9. Surprisingly, I get random results when testing in IE9. Sometimes it hanged when it enters getElementById method. Some other times it gets “Access denied” error when accessing sound.object.Play().

3. Using AUDIO tag.

<html>
	<head>
		<script type="text/javascript">
         function PlaySound(soundObj) {
            var sound = document.getElementById(soundObj);
            if (sound)
               sound.play();
         }
      </script>
   </head>
   <body>
      <form>
         <button type="button" onclick="PlaySound('beep')">Beep</button>
         <button type="button" onclick="PlaySound('beep3')">Beep 3</button>
      </form>
      <audio src="sounds/beep3.wav"  id="beep3" />
      <audio src="sounds/beep.wav"  id="beep" />
   </body>
</html>

Audio tag seems to behave abnormally. When I put the audio tag above the form, nothing rendered in the page. Weird, right?
This method tested working on:

IE9 still not working. When I debug it, it able to return getElementById correctly. It’s just that the play() method does nothing.

Conclusion

Sadly, we are still unable to have one single solution that works in all major browsers. If we target various browsers, I suggest to use both AUDIO and EMBED tags. Then we select which element to play based on the browser type.

Btw, you can download the project files (html and wav files) HERE. Please test it yourself. I hope you get the same result as mine But if you don’t, please report your finding and let’s discuss it.

Alright, I hope it helps Cheers!

Reference:

1. http://stackoverflow.com/questions/879152/how-do-i-make-javascript-beep
2. http://html5doctor.com/native-audio-in-the-browser/

Share and Enjoy

Related posts:

1. How to Check Whether JavaScript is Enabled From Server
2. CSS Font-Size Illustrated
3. How to Use Javascript in Your WordPress Blog Post

But this translation method will not run “on-the-fly”. You need to refresh your page to get the new language rendered in the screen. To make it “on-the-fly”, you need to do these steps:

1. Add an Ext.NET Store in your View page. The Store will hold all the translation data. It will have two fields. The first field is the Key, which is your Ext.NET control’s ID. The second field is the Value, which is the translation result
2. When user changed its language preference, set the selected language in a cookie and reload the Store.
3. The Store will make a HttpRequest to the server. The server read the cookie, and returned a JSON Store object.
4. Handle the Ext.NET Store’s Load event by iterating the Store’s records, and then use Ext.getCmp to get the affected Ext.NET controls and set their Text/Label property
5. …..
6. Profit!!!

You might ask, “Why we need to set the language preference to a Cookie?” It’s required because it will make the Server know and remember about the changes.

Alright, now that I’ve told you the general concept, time to get dirty (with Code, not bacteria).

So in your Controller, we’ll add a method that returns AjaxStoreResult. Its function is to retrieve the resource set based on the language code specified in the cookie:

using Ext.Net;
using Ext.Net.MVC;
using System.Globalization;
using System.Threading;

// ... Code Snip ...
	public AjaxStoreResult Translate()
	{
		var lang = Request.Cookies["language"].Value;
		CultureInfo cult = Thread.CurrentThread.CurrentCulture;

		try {
			cult = new CultureInfo(lang);
		}
		catch(Exception ex) {}

		var res = Resources.LocalizedText.ResourceManager.GetResourceSet(cult, true, false);
		var trav = res.GetEnumerator();
		var dict = new Dictionary();

		while (trav.MoveNext())
		{
			if (trav.Key.ToString().Length > 2)
				dict.Add(trav.Key.ToString(), trav.Value.ToString());
		}

		var q = from c in dict
				select new { key = c.Key, value = c.Value };

		return new AjaxStoreResult(q, dict.Count);
	}
// ... Code Snip ...

And here is the Ext.NET Store in your views:

And finally, the event handler to the Store’s Load event:

var TranslateLoaded = function (objGrid, gridRecords, objOptions) {
	for (var i = 0; i < gridRecords.length; i++) {
		var cmp = Ext.getCmp(gridRecords[i].data.key);
		if (cmp) {
			//Different Ext.NET control might need
			//different treatment.
			if (cmp instanceof Ext.form.ComboBox) {
				cmp.setFieldLabel(gridRecords[i].data.value);
			}
			else if (cmp instanceof Ext.form.TriggerField) {
				if (cmp.emptyText != '') {
					Ext.apply(cmp, {
							emptyText : gridRecords[i].data.value
						});
					cmp.reset();
				}
				if (cmp.fieldLabel != '')
					cmp.setFieldLabel(gridRecords[i].data.value);
			}
			else if (cmp instanceof Ext.menu.Item) {
				var pnl = tpMain.find('title', cmp.text);
				if (pnl.length > 0) {
					pnl[0].setTitle(gridRecords[i].data.value);
					pnl[0].reload();
				}
				cmp.setText(gridRecords[i].data.value);
			}
			else if (cmp instanceof Ext.form.Label
				 || cmp instanceof Ext.tree.TreeNode
				 || cmp instanceof Ext.data.Node) {
					cmp.setText(gridRecords[i].data.value);
			}
			else if (cmp instanceof Ext.Panel
				|| cmp instanceof Ext.Window)
					cmp.setTitle(gridRecords[i].data.value);
			else if (cmp instanceof Ext.form.TextField
				|| cmp instanceof Ext.form.CompositeField)
					cmp.setFieldLabel(gridRecords[i].data.value);
			else if (cmp instanceof Ext.Button) {
				if (cmp.getText() != '' && cmp.getText() != undefined)
					cmp.setText(gridRecords[i].data.value);
			} else if (cmp instanceof Ext.form.DisplayField) {
				cmp.setValue(gridRecords[i].data.value);
			}
		}
	}
}

I hope it helps Cheers!

Share and Enjoy

Related posts:

1. How To Enable Multi Language Translations in Ext.NET MVC
2. MS-SQL Stored Procedure for Absolute Beginner, Part 1
3. How to Check Whether JavaScript is Enabled From Server

PACKAGE PKG_TEST_PACKAGE AS
	TYPE REF_CURSOR IS REF CURSOR;
	PROCEDURE SP_TEST_PROCEDURE(strInput1 IN VARCHAR2,
            intInput2 IN INTEGER, intOutput1 OUT INTEGER,
            recordSet1 OUT REF_CURSOR,
            recordSet2 OUT REF_CURSOR);
END;

After much tinkering and searching Internet, I found out that there are at least three ways to do it.

1. Using ADO.NET

Since Microsoft has deprecated System.Data.OracleClient, this option might not be good for production release.

using System;
using System.Data;
using System.Data.OracleClient;

namespace TestOracle
{
    class Program
    {
        static void Main(string[] args)
        {
            var con = new OracleConnection();
            con.ConnectionString = @"Server=(
                    DESCRIPTION=(
                        ADDRESS_LIST=(
                            ADDRESS=(PROTOCOL=TCP)
                            (HOST=YOUR_ORACLE_HOST_NAME)
                            (PORT=1521)
                        )
                    )
                    (CONNECT_DATA = (SID = YOUR_ORACLE_SID)));
                    Uid=YOUR_USERNAME;
                    pwd=YOUR_PASSWORD;";
            con.Open();
            var cmd = con.CreateCommand();
            cmd.CommandText = "PKG_TEST_PACKAGE.SP_TEST_PROCEDURE";
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.Add(new OracleParameter
            {
                ParameterName = "strInput1",
                Direction = ParameterDirection.Input,
                Value = "SOME_VALUE"
            });
            cmd.Parameters.Add(new OracleParameter
            {
                ParameterName = "intInput2",
                Direction = ParameterDirection.Input,
                Value = 1903
            });
            cmd.Parameters.Add(new OracleParameter
            {
                ParameterName = "intOutput1",
                Direction = ParameterDirection.Output,
                OracleType = OracleType.Int32
            });
            cmd.Parameters.Add(new OracleParameter
            {
                ParameterName = "recordSet1",
                Direction = ParameterDirection.Output,
                OracleType = OracleType.Cursor
            });
            cmd.Parameters.Add(new OracleParameter
            {
                ParameterName = "recordSet2",
                Direction = ParameterDirection.Output,
                OracleType = OracleType.Cursor
            });
            cmd.ExecuteNonQuery();

            int intOutput1 = (int)cmd.Parameters["intOutput1"].Value;
            var recordSet1 = new DataTable();
            recordSet1.Load((OracleDataReader)cmd.Parameters["recordSet1"].Value);

            var recordSet2 = new DataTable();
            recordSet2.Load((OracleDataReader)cmd.Parameters["recordSet2"].Value);

            con.Close();
        }
    }
}

2. Using ODP.NET

If you’re developing in 64-bit environment, you might need to specifically set the running environment to x86 to prevent issues. For the time being, I think developing in x64 doesn’t worth the hassle needed just to get your environment working correctly.
Oh and BEWARE of the difference of Connection String between ADO.NET and ODP.NET

using System;
using System.Data;
using Oracle.DataAccess.Client;
using Oracle.DataAccess.Types;

namespace TestOracle
{
    class Program
    {
        static void Main(string[] args)
        {
            try
            {
                var con = new OracleConnection();
                con.ConnectionString = @"Data Source=(
                    DESCRIPTION=(
                        ADDRESS_LIST=(
                            ADDRESS=(PROTOCOL=TCP)
                            (HOST=YOUR_ORACLE_HOST_NAME)
                            (PORT=1521)
                        )
                    )
                    (CONNECT_DATA = (SID = YOUR_ORACLE_SID)));
                    User Id=YOUR_USERNAME;
                    Password=YOUR_PASSWORD;";
                con.Open();
                var cmd = con.CreateCommand();
                cmd.CommandText = "PKG_TEST_PACKAGE.SP_TEST_PROCEDURE";
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.Add(new OracleParameter
                {
                   ParameterName = "strInput1",
                   Direction = ParameterDirection.Input,
                   Value = "SOME_VALUE"
                });
                cmd.Parameters.Add(new OracleParameter
                {
                   ParameterName = "intInput2",
                   Direction = ParameterDirection.Input,
                   Value = 1903
                });
                cmd.Parameters.Add(new OracleParameter
                {
                   ParameterName = "intOutput1",
                   Direction = ParameterDirection.Output,
                   OracleDbType = OracleDbType.Int32
                });
                cmd.Parameters.Add(new OracleParameter
                {
                   ParameterName = "recordSet1",
                   Direction = ParameterDirection.Output,
                   OracleDbType = OracleDbType.RefCursor
                });
                cmd.Parameters.Add(new OracleParameter
                {
                   ParameterName = "recordSet2",
                   Direction = ParameterDirection.Output,
                   OracleDbType = OracleDbType.RefCursor
                });   

                cmd.ExecuteNonQuery();

                var recordSet1 = new DataTable();
                OracleRefCursor ref1 = (OracleRefCursor)cmd.Parameters["recordSet1"].Value;
                recordSet1.Load(ref1.GetDataReader());

                var recordSet2 = new DataTable();
                OracleRefCursor ref2 = (OracleRefCursor)cmd.Parameters["recordSet2"].Value;
                recordSet2.Load(ref2.GetDataReader());

                con.Close();
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex);
            }
        }
    }
}

3. Using Enterprise Library

I found out about this when I was working with a project that utilizes Subsonic to connect Oracle. When you are using ORM, you will likely to interact with classes from System.Data.Common. This is a problem because you can’t specify the data-type of the SP parameter. Luckily, this article saved me from confusion by giving me the needed pointer.

using System;
using Microsoft.Practices.EnterpriseLibrary.Data;
using System.Data;
using System.Data.Common;

//..... Code Snipped
                //ORACLE_DB is connection string name found
                //in your App.config/web.config
                Database db = DatabaseFactory.CreateDatabase("ORACLE_DB");

                //Specify the number of SP's parameters
                object[] myParams = new object[5];

                //Database object will construct the reqired parameters
                DbCommand dbCmd = db.GetStoredProcCommand("PKG_TEST_PACKAGE.SP_TEST_PROCEDURE", myParams);
                db.SetParameterValue(dbCmd, "strInput1", "SOME_VALUE");
                db.SetParameterValue(dbCmd, "intInput2", 1903);

                //Tran is a transaction object, you can use this if
                //you want to be part of a transaction, otherwise
                //you can remove this parameter
                db.ExecuteNonQuery(dbCmd, Tran);

                int intOutput1 = (int)dbCmd.Parameters["intOutput1"].Value;
                var recordSet1 = new DataTable();
                recordSet1.Load((DbDataReader)dbCmd.Parameters["recordSet1"].Value);

                var recordSet2 = new DataTable();
                recordSet2.Load((DbDataReader)dbCmd.Parameters["recordSet2"].Value);
//..... Code Snipped

I hope it helps

Share and Enjoy

Related posts:

1. How To Retrieve User’s Name and Email Address From Active Directory
2. Prevent Error Caused By Null-Value in Your Stored Procedure
3. MS-SQL Stored Procedure for Absolute Beginner, Part 1