Wednesday, November 2, 2011

Drag and Drop List Items (with multi selection)

    Here you will find information about selecting items by drag-n-drop on webpage and how i created drag-n-droppable items in listBoxes using JQuery-UI Sortable.

    On JQuery-UI Sortable Demo page, List items been represented by <li>, I tried with <li> and <td> as items, both of them not satisfied my requirement. Instead of using <li> as items, I used <div> tags. One of the required feature is, multi-select drag drop using ctrl + mouse drag.

     The sample demo page contains 2 Listboxes (source, destination). Source box is filled with items from JSON data(static or coming from Asp.Net). On button click, the selected/dropped items in destination box
are stored in a hidden-field as JSON string and you can retreive them at serverside. (or in JS version, just filling in a textarea).

Below Screenshots shows the Drag-n-Drop in action
Step 1

Step 2

Step 3
The downloadable Zip file contains both javascript and Asp.Net versions, along with documentation, JS and  CSS files. JQuery files are not included.

Requirements: 
      JQuery, JQuery-UI (& optionally Asp.Net, C#, DotNet 3.5+ at serverside).

Tested in IE8 & FF7.

Downloads:
     You can check the demo here!
     Download the Zip file here!

References:
  • http://jqueryui.com/demos/sortable/#connect-lists
  • http://blogs.msdn.com/b/rakkimk/archive/2009/01/30/asp-net-json-serialization-and-deserialization.aspx
Edit: Code updated, to de-select items from multi-selection. (on 12 Nov 2011).

Tuesday, August 2, 2011

Asp.Net Interview Questions

    For Freshers or Experienced, check these interview questions. Seasoned - 2011 ( Experience Level: 0 to 3+ ).
  • Questions mainly related to OOPS, DotNet, ASp.Net, SQL-Server, javascript (and bits of CSS, WCF).
  • also covered slip-test, system tests, some frequently asked basic questions.
  • Note: only important questions are covered and not all the basic questions included (assuming you already aware of basics).
  • No detailed description is provided as answers to questions, you need to refer other sources (books,internet) for complete details.
  • These are the questions which i have experienced and encountered.

Download or View the document from: doc.google.

Asp.Net: Passing Gridview control from one page to another page

Hi,
    In this post, i will explain how to get gridview control defined in one page into another page. This is accomplished with "Page.PreviousPage" property.
    Let Page1.aspx contains a gridview control and we want this gridview (or any object) be passed to another page called page2.aspx.
We try this goal in two alternatives ways:

  • Button with PostBackUrl="Page2.aspx" attribute.

  • Server.Transfer("Page2.aspx", true); by coding.


In page1.aspx define:

  • Gridview control named - grid

  • Button with postbackUrl="page2.aspx" - btn1

  • and another Button with click-event - btn2


Markup:

<asp:GridView ID="grid" runat="server" AutoGenerateColumns="false" />
<hr/>
<asp:Label runat="server" Text="Testing Gridview access to next-Page, try below buttons"></asp:Label>
<br />
<asp:Button ID="btn1" runat="server" PostBackUrl="Page2.aspx" Text="NextPageDirect" />
(or) serverTransfer:
<asp:Button ID="btn2" runat="server" Text="NextPageAtServer" OnClick="btn2_Click" />

Code:

//Testing Gridview data access from one page to next page.
public partial class Page1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
FillGrid(); //Your logic to fill gridview
}
}

public GridView Getgrid
{
get { return this.grid; } //ViewState should be enabled for gridview.
}

protected void btn2_Click(object sender, EventArgs e)
{
Server.Transfer("Page2.aspx", true);
}
}



In Page2.aspx define:
Form control (default markup added by VS)
Code:

public partial class Page2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Page1 pg = Page.PreviousPage as Page1;
if (pg != null)
{
GridView grid = pg.Getgrid;
form1.Controls.Add(grid);
}
}
}

Now Open the Page1.aspx from browser (or, run from VisualStudio).



Above is the screenshot of Page1.aspx




Page2 screenshot after button click in Page1



Using the above technique and custom public properties, we can access any object from page1 to page2.

Asp.Net: Page with 2 Form controls

Hi,

    As we know, Asp.Net not allows more than one <form runat="server"> tag in webForm (page). What if we need 2 <form> tags on the same page?
In this post, i will explain how to maintain 2 <form> tags in a single webForm.

Let Default.aspx is the main page, write the usual Asp.Net form tag:
<form id="form1" runat="server">
and then write another HTML form tag (without runat="server" attribute):
<form id="form2" action="UILessPage.aspx" method="post">
in the same page.
    The trick is form2 posts its data to "UILessPage.aspx" instead of "Default.aspx", because, we want data from form2 be handled separately instead of mingling with Default.aspx code.
This makes easy to understand and maintain the Form data. The UILessPage.aspx page contains no UI (markup) for itself, its job is only handling the form2 data, we can even make this page not accessible if accessed directly from browser.



Above is the screenshot of Default.aspx with 2 forms

Note:
  • The Form2 should contain only HTML controls .
  • Form1 can contain WebServer controls.


Please download and check the code to understand how to retrieve the submitted data from form2. I used the "Request.Form[CtrlName]" to get the HTML control values from form2.

Download:
download the code files as zip from here.

Asp.Net: Ajax accesses compressed DataURI Image

Hi,

    Here i will explain, how to get image data using Ajax technique. This sample post shows an example of what can be possible with
DataURI, base64 compression and Ajax.

Covering the topics:
  • how to convert image to base64,
  • compress this data and access it via ajax from browser and
  • assign it to <img> tag as DataURI.

    By placing the images in a file called Resource.resx, we can easily generate base64 encoding. For further information on Resource file, check my previous post and check this tip on my other blog for full details: Image to base64 conversion.

Compression support depends on the browser. If it supports, we can use either GZip or Deflate to compress the data. Using AJAX, request this base64 data and assign it to <img> tag as source, with appropriate headings added (datauri, imagetype etc).

These are the files which I have used for this sample:
  • webForm (aspx) which contains Ajax code and <img> tags.
  • Handler file (ashx) which handles the ajax requests, compresses the base64 data from Resource.resx file.
  • Resource.resx file is a xml file, contains the embedded images in base64 format.
Note:

  • If the image size is small, around <5kb, don't use the compression, as it takes extra space instead of lowering.
  • IE8 accepts data URIs with a maximum length of 32 KB.
  • After the image is compressed, we gain around 2KB of space.

Reference:
http://en.wikipedia.org/wiki/Data_URI_scheme
Download:
download the code files as zip from here.

Saturday, May 28, 2011

Asp.net: Fetch Images in Resx(Resource) file

Hi,

What ever need or scenario, here i am explaining, how to access image-files
stored in Resource file (Resx) from Asp.net page.

i used Asp.Net 3.5
since Html-Image elements can't be assigned with (image in Resx) streams directly, i use Handler file (ashx), which handles the image serving to Html-Image controls.

The Resource file has (embedded) 3 images, the 3 Html-Image elements in webpage access these 3 images via Handler.

Below is the image showing request-reply process.



Below is the image showing output of the webpage.



The Handler file is UI-less, which is useful for serving the serverside resources.
Instead of directly flushing the image stream to browser, (in which case, only image will be displayed without content) i used Html-image controls to point to the handler file, because, we don't want just only the flushed image get displayed.

Download the files and check the code. From Here!

Monday, February 21, 2011

Tweets and Feed Reader

Hi, recently i developed a tweet & feed reader using only html, javascript and CSS. It's a mash-up, gets the json objects, from service providers like Twitter and Yahoo! and displays them. I used jquery v1.5 and its plug-ins for this purpose.

Presently it gets items from 3 authors: Scott Guthre, Deccan News and Yahoo! News India. You can easily add your preffered author to get his feeds with few modifications in code. Below are the screenshots from each of these authors.



Scott Guthre Tweets



Deccan News Tweets



Yahoo News! India International feeds


Features:
  • For Yahoo! News, additional detailed news are shown in popup.
  • For Scott Guthre and Deccan News, you can page through the tweets.
Code Features:
  1. Converts text URL in each tweet into a clickable link.
  2. You may get any RSS feed converted to JSON, optionally returning selected objects using YQL.
  3. News details in popup using Fancybox (jquery plug-in)
  4. Each tweet/feed displayed using jquery templates (jquery plug-in)
  5. Paging tweets.

References:
  • http://net.tutsplus.com/tutorials/javascript-ajax/how-to-display-justin-bieber-tweets-with-asynchronous-recursion/
  • http://blog.rebeccamurphey.com/pubsub-screencast
  • YQL ->http://developer.yahoo.com/yql/
  • Fancybox ->http://jquery.com/demo/thickbox/
  • jquery-tmpl ->http://api.jquery.com/category/plugins/templates/


Download code:
Tweet/Feed Reader files.

Thursday, January 6, 2011

XUL controls on Web Page

XUL (XML user interface markup language)

XUL contains XML markup which is intrepreted by the XULRunner and renders User Interface controls. It's similar to what HTML is to Browsers and WPF in DotNet.
If you have Firefox or Thunderbird, then XUL will run directly without any special installs. It's mainly used for creating Mozilla applications and extensions.

XUL has some extra controls like: calender, color-picker, Progressbar, Trackbar etc. which are not present in HTML. We can use these special control in our webpages using the trick i explained here.
To achieve using HTML for these type of controls, we have to add/write extra javascript or html in our page, with XUL we get, less code and clean separation. But one disadvantage is, it runs only on firefox browser (and its related products).

Here i will explain, how to use these controls in our webpage, using the iframe as popup(XUL holder):
  • Point iframe source to the XUL file.
  • Based on the actions on webpage, iframe shows either Calender or Color-Picker.
  • whenever we select Date/Color, values are passed from iFrame to container page to set elements.

Below XUL calendar control in action:

Below XUL color-picker control in action:


Files:
XUL page has its own CSS & javascript files separately.
For (parent)webpage, I embedded CSS & javascript within page.

Download the files from this location and have a try.

Reference:
>https://developer.mozilla.org/En/XUL_Tutorial
>http://en.wikipedia.org/wiki/XUL

HTML5: Cross-Document Messaging

What cross-document messaging?

It's a communication mechanism between iFrame and it's contianer page.
We use iframes to sustain features offered by different domains, to be usable in our webpage.
Developers had been using different hard solutions like: server-side proxy, url-hashing (which are complex and are workaround solutions) to communicate between iframe and it's parent container page.
HTML5 now offers a direct solution to this scenario, using the postMessage().

Below is the sample example:

Below is the code for container page:

<html>
<head>
<title>Parent-window</title>
<script type="text/javascript">
(window.attachEvent)? window.attachEvent('onmessage',gotMessage) : window.addEventListener('onmessage',gotMessage,true);

function gotMessage(e)
{
document.getElementById("childData").value="Domain:"+ e.domain+"\nData: "+e.data;
}
function UpdateData()
{
var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage(document.getElementById("childData").value, "*");
}
</script>
<style type="text/css">
#childData{
border:1px solid blue;
width:250px;
height:80px;
}
IFRAME{
width:300px;
height:200px;
}
BODY{
margin:20px;
}
</style>
</head>
<body>
<b>PostMessage Testing: This is a Parent window</b><br/>
<iframe id="ifrm" src="IFrame_Child4PostMessage.html"></iframe>
<br/>
Fill the data below and click send.
<br/>
<textarea id="childData"></textarea>
<button onclick="UpdateData()">send</button>
<br/>
<br/>
<i>ref: http://msdn.microsoft.com/en-us/library/cc197015(v=vs.85).aspx</i>
</body>
</html>


Below is the code for iFrame page:

<html>
<head>
<title>Child-IFrame</title>
<script type="text/javascript">
(window.attachEvent)? window.attachEvent('onmessage',gotMessage) : window.addEventListener('onmessage',gotMessage,true);

function gotMessage(e)
{
if (e.data == 'Hello World')
{ document.getElementById("parentData").value="Domain:"+ e.domain+"\nData: "+e.data;
e.source.postMessage('Ping: Received Hello!',"*");
//Here e.source=parent.window; so u can try like this: alert(e.source.location);
} else
{
document.getElementById("parentData").value="Domain:"+ e.domain+"\nData: "+e.data;
}
}
</script>
<style type="text/css">
#parentData{
border:1px solid blue;
width:250px;
height:80px;
}
BODY{
background-color:#ccaa99;
}
</style>
</head>
<body>
<b>PostMessage Testing: This is (IFrame) child window.</b><br/>
Below u will see the data from (cross-domain) parent.<i>HTML5, IE8</i>.
<br/>
<textarea id="parentData"></textarea>
<br/>
<br/>
<i>ref: http://msdn.microsoft.com/en-us/library/cc197015(v=vs.85).aspx</i>
</body>
</html>

we can even pass JSON as parameter.
EX:
parent -> o.contentWindow.postMessage(['one','two'],"*");
child(iframe) -> document.getElementById("parentData").value=e.data[1];

In the above sample codes, in place of "*" we should use, "http://<<remoteDomainName>>" for security purpose.

This feature supported in HTML5 offering browsers: ie8+, opera11 etc.

Download sample code files from this location.
Reference:
http://msdn.microsoft.com/en-us/library/cc197015(v=vs.85).aspx