Ask your technical questions on forums or here :
ASP.NET or MVC | C# | Windows Phone
Microsoft Technology Journals by Abhimanyu K Vatsa
HOME ABOUT RAZOR BOOK SPEAKING MVC ASP.NET JQUERY VIDEOS EBOOK ARCHIVE

30 Jun 2012

Monthly Blogging Report: June 2012

Consolidating all blog posts monthly are very refreshing as it gives me chance to go back and see what I did in last month and for readers gives the chance to see what he not followed up.

24 Jun 2012

Creating PDF Files in ASP.NET using iTextSharp

iText is a library that allows you to create and manipulate PDF documents. It enables developers looking to enhance web and other applications with dynamic PDF document generation and/or manipulation.

19 Jun 2012

Image Map; Mouse Hover Effect on Area using jQuery

Another easy but interesting stuff I found today on http://in.jagran.yahoo.com/epaper/ (Hindi Language e-News Paper) and decided to develop it on my PC. If you open Google and search by typing “Image Map in HTML” you will get huge response and you can start learning this from there but here I got something different for you. I will take the advantage of jQuery Library for this. I’ll start discussion from very basic. Wanna see how? Let’s begin.

18 Jun 2012

How to format the arrangement of codes in Visual Studio IDE

I know it is very easy for all, think of me as blogging addicted guy. Ehehe.

Shortcut Keys:-

Format Entire Document : Ctrl + K, Ctrl + D

Format Selection : Ctrl + K, Ctrl + F

Data Binding to DropDownList and ListBox in ASP.NET

Introduction

In this quick post you are going to learn how to bind the data to DropDownList and ListBox controls in ASP.NET. I know this is very easy but today a novice ASP.NET guy who is my friend on Facebook asked this to me and I created this solution for him.

17 Jun 2012

Merge the content of DataSets in ASP.NET

Introduction

You can merge two or more DataSet objects that have largely similar schemas to present in the same Data Container. In my case, I have two different database tables and I am wishing to display all records from both tables in a single Data Container. For this we can take the advantage of Merge() method in C#.

16 Jun 2012

System.Data.SqlClient.SqlException: Cannot open database "Northwind" requested by the login. The login failed. Login failed for user 'IIS APPPOOL\DefaultAppPool'.

System.Data.SqlClient.SqlException: Cannot open database "Northwind" requested by the login. The login failed. Login failed for user 'IIS APPPOOL\DefaultAppPool'.

In this quick post you will learn how to fix this issue.

Today in the morning when I was executing one of my web applications I fall in titled error and the same I’m sharing, that how I fixed this.

14 Jun 2012

Advanced Web Debugging with Fiddler Videos

Today I watched a very nice set of videos “Advanced Web Debugging with Fiddler Videos” captured at Microsoft MIX10 and the session by Eric Lawrence (Program Manager, Internet Explorer). I would like to share these videos with you.

12 Jun 2012

Slow Keyboard Typing Response on Windows 8

Today when I uninstalled the Windows 8 Consumer Preview OS to install newly released Windows 8 Release Preview version OS and when I started using this OS I realized keyboard my responding very-very slow. I checked my keyboard connections and even replaced the keyboard by USB version but no use. After huge googling I found the solution that worked for me and the same I'm sharing this here.

10 Jun 2012

jQuery Accordion Widget

In this post you are going to learn all about jQuery Accordion Widget.

jQuery Accordion Widget is a jQuery based expandable and collapsable content holder that is broken into sections and probably looks like tabs. Look at the animated screen given below:

9 Jun 2012

Using META Tags to Refresh Pages

If you think of current web application development trend then this solution will not fit for you, because this scenario post-backs complete web page. Today, we have many controls that update any defined section of website (web page) instead of whole web page gets post-back.

Facebook Groups for Technical Discussions by Abhimanyu Kumar Vatsa

Friends, I am running 3 Facebook Groups for all our technical discussions. You can share the blog links or ask your technical difficulties or even share your views about technology etc. Please join the group and start exploring technologies.




Thanks.

8 Jun 2012

Archive

Top 500 Only, use search box (top-right corner) or post list or technology cloud to find more.

Site is under maintenance App_offline.htm : by Shivprasad Koirala (questpond.com)

Today I watched a very nice video “How to put website is under maintenance by using App_offline.htm” by Shivprasad Koirala and the same I am sharing this with you.

 

How to open IIS Manager in Windows 8

To open “IIS Manager” on Windows 7 or earlier OS, we were typed “inetmgr” in run window. But for a while I got confused that how I open “IIS Manager” in my Windows 8 PC? Here is the step.



How to implement windows authentication in ASP.NET MVC 3 : by Shivprasad Koirala

Yesterday I watched a very nice video on title “How to implement windows authentication in ASP.NET MVC 3” by Shivprasad Koirala and the same I am sharing this with you. I hope you will learn many things in this video like Deploying MVP App, Setting-up MVC App in IIS etc.

jQuery UI: Interaction Plugins

In this post you will learn all about jQuery UI’s Interaction Plugins. You can find all the available plugins on the official website here http://jqueryui.com/. For now, there is only 5 Plugins available in Interaction section that is Draggable, Droppable, Resizable, Selectable and Sortable. Interaction Plugins handles complex behaviors like drag and drop, resizing, selection and sorting.

Graphical representation of jQuery UI subordinates:


In the above image, I have highlighted the jQuery UI Interaction Plugins in rectangular region and in this post we will cover all of them.

You need to setup a demo project to learn Interaction Plugins, please read this post as this post will guide you how to setup the demo project for jQuery UI.

Draggable

It enables draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.

Let’s create a demonstration page:


In above code, I have a <div> by id ‘draggableDIV’ and it has a button. Remember we can’t drag button control directly because it holds click event by default; we need to do some extra work for this. But if you place button inside <div> tag then you can drag it easily. And the same, I have a label control by id ‘draggableLabel’.

In above jQuery methods, $(“draggableDIV”).draggable() will enable the drag feature in <div> tag. And the same $(“draggableLabel”).draggable() will enable the drag feature in Label control.

If you look at the output screen in browser given below, think we have not applied any <div> background color instead of width, height and padding but still you can see the color. Why? This is because; remember in last post here, we were selected theme option to download jQuery UI Library. So, in <div> tag you can see class attribute that is ‘ui-widget-content’ and this style rule is defined in file ‘jquery-ui-1.8.21.custom.css’.

Open the code in browser to see draggable in action.


Read more about draggable options, events and methods here.

Droppable

It enables any DOM element to be droppable, a target for draggable elements.

Let’s create a demonstration page:


Frist of all let’s look at the applied styles and then we’ll talk on jQuery methods:

#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }

Just applying the styles width, height, padding, float and margin to both <div>’s.

              $(function () {
                  $("#draggable").draggable();
                  $("#droppable").droppable({
                      drop: function (event, ui) {
                          $(this)
                             .addClass("ui-state-highlight")
                             .find("p")
                             .html("Dropped!");
                      }
                  });
              });

The very first line of the method is simple; it will add draggable feature to <div> which has id = ‘draggable’. The second method is bit fancy, adding the droppable feature to <div> which has id = ‘droppable’.

All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):

ui.draggable - current draggable element, a jQuery object.
ui.helper - current draggable helper, a jQuery object
ui.position - current position of the draggable helper { top: , left: }
ui.offset - current absolute position of the draggable helper { top: , left: }

See the page in action.


Let’s assume if you want multiple draggable elements on the page, then you can use following coding.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Multiple Draggable</title>
    <link type="text/css" href="Scripts/css/ui-lightness/jquery-ui-1.8.20.custom.css" rel="Stylesheet" />   
    <script type="text/javascript" src="Scripts/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="Scripts/js/jquery-ui-1.8.20.custom.min.js"></script>
    <style type="text/css">
              #draggable-1 {
            background-color:#CCC;
            width: 100px;
            height: 100px;
            padding: 0.5em;
            float: left;
            margin: 10px 10px 10px 0;
        }
        #draggable-2 {
            background-color:#E34E47;
            width: 100px;
            height: 100px;
            padding: 0.5em;
            float: left;
            margin: 10px 10px 10px 0;
        }
        #droppable {
            background-color:#0F0;
            width: 150px;
            height: 150px;
            padding: 0.5em;
            float: left;
            margin: 10px;
        }
          </style>
          <script type="text/javascript">
              $(function () {
                  $("#draggable-1").draggable();
                  $("#draggable-2").draggable();

                  $("#droppable").droppable({
                      drop: function (event, ui) {
                          var currentId = $(ui.draggable).attr('id');

                          if (currentId == "draggable-1") {
                              $(this)

                              window.location = "http://www.itorian.com/search/label/jQuery"
                              alert("You are going to learn jQuery.")

                          } else {
                              $(this)

                              window.location = "http://www.itorian.com/search/label/ASP.NET"
                              alert("You are going to learn ASP.NET.")
                          }
                      }
                  });
              });
          </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="draggable-1">
            <p>Let's go to learn jQuery.</p>
        </div>

        <div id="draggable-2">
            <p>Let's go to learn ASP.NET.</p>
        </div>

        <div id="droppable">
            <p>Please come, i'll teach you.</p> 
        </div>
    </form>
</body>
</html>

See the page in action.


Read more about droppable options, events and methods here.


Resizable

It enables any DOM element to be resizable. With the cursor grab the right or bottom border and drag to the desired width or height.

Let’s create a demonstration page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>One Draggable</title>
    <link type="text/css" href="Scripts/css/ui-lightness/jquery-ui-1.8.20.custom.css" rel="Stylesheet" />   
    <script type="text/javascript" src="Scripts/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="Scripts/js/jquery-ui-1.8.20.custom.min.js"></script>
    <style type="text/css">
              #resizable { width: 150px; height: 150px; padding: 0.5em; }
              #resizable h3 { text-align: center; margin: 0; }
          </style>
          <script type="text/javascript">
              $(function () {
                  $("#resizable").resizable();
              });
          </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="resizable" class="ui-widget-content">
                  <h3 class="ui-widget-header">Resizable</h3>
        </div>
    </form>
</body>
</html>

Nothing new here, let’s look it in bowser.


Selectable

It enables a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections.

Let’s create a demonstration page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>One Draggable</title>
    <link type="text/css" href="Scripts/css/ui-lightness/jquery-ui-1.8.20.custom.css" rel="Stylesheet" />      
    <script type="text/javascript" src="Scripts/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="Scripts/js/jquery-ui-1.8.20.custom.min.js"></script>
    <style type="text/css">
           #feedback { font-size: 1.4em; }
           #selectable .ui-selecting { background: #FECA40; }
           #selectable .ui-selected { background: #F39814; color: white; }
           #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
           #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
       </style>
       <script type="text/javascript">
           $(function () {
               $("#selectable").selectable();
           });
       </script>
</head>
<body>
    <form id="form1" runat="server">
        <ol id="selectable">
               <li class="ui-widget-content">Item 1</li>
               <li class="ui-widget-content">Item 2</li>
               <li class="ui-widget-content">Item 3</li>
               <li class="ui-widget-content">Item 4</li>
               <li class="ui-widget-content">Item 5</li>
               <li class="ui-widget-content">Item 6</li>
               <li class="ui-widget-content">Item 7</li>
        </ol>
    </form>
</body>
</html>

The jQuery UI Selectable plugin allows for elements to be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. Also, elements can be selected by click or drag while holding the Ctrl/Meta key, allowing for multiple (non-contiguous) selections. Let’s look it in bowser.


Sortable

It enables a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable properties.

Let’s create a demonstration page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>One Draggable</title>
    <link type="text/css" href="Scripts/css/ui-lightness/jquery-ui-1.8.20.custom.css" rel="Stylesheet" />      
    <script type="text/javascript" src="Scripts/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="Scripts/js/jquery-ui-1.8.20.custom.min.js"></script>
    <style type="text/css">
           #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
           #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
           #sortable li span { position: absolute; margin-left: -1.3em; }
       </style>
       <script type="text/javascript">
           $(function () {
               $("#sortable").sortable();
               $("#sortable").disableSelection();
           });
       </script>
</head>
<body>
    <form id="form1" runat="server">
        <ul id="sortable">
               <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
               <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
               <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
               <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
               <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
               <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
               <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
        </ul>
    </form>
</body>
</html>

The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse. All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):-

ui.helper - the current helper element (most often a clone of the item)
ui.position - current position of the helper
ui.offset - current absolute position of the helper
ui.item - the current dragged element
ui.placeholder - the placeholder (if you defined one)
ui.sender - the sortable where the item comes from (only exists if you move from one connected list to another)

Let’s look it in bowser.


I hope you like it. Thanks.