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

31 May 2012

Download Visual Studio 2012 RC

Visual Studio 2012 RC is made available along with .NET framework 4.5 RC and are available for download now. Microsoft released both products in parallel to Windows 8 Release Preview and Windows Server 2012 RC. Visual Studio 2012 is fully Metro now and so after the Visual Studio 11 beta release this is major release.
Changes so far made after the beta release can be seen from its UI easily and Microsoft also changed the naming of so called Visual Studio 11 to Visual Studio 2012. Even logo of Visual Studio 2012 is changed and made as per Metro design principles. Have a look of the logo:
Visual Studio 2012

Using JavaScript to Control the Playback of Audio Tag in HTML5


In this post you will learn how to control the audio playback of <audio> tag in HTML5 by using JavaScript logics.

HTML5 defines a new element which specifies a standard way to embed an audio file on a web page using the <audio> element.

To play an audio file in HTML5, this is all you need:

        <audio controls="controls">
            <source src="http://domain.com/inanhq.mp3" type="audio/mp3" />
            <source src=" http://domain.com/inanhq.mp3" type="audio/mpeg" />
          Your browser does not support the audio tag.
        </audio>

Above <audio> element adds audio controls like play, pause and volume automatically on the web page. Here is the output.


We can use text content between the <audio> and </audio> tags for browsers that do not support the <audio> element.

The <audio> element allows multiple <source> elements. <source> elements can link to different audio files. The browser will use the first recognized format.

Now to customize the audio controls like play, pause and volume and even add new rewind, forward, restart buttons we just need to add some JavaScript logics.

Look at the HTML Markup and its output in browser.

HTML Markup:

    <h1>JavaScript Controlled Audio Playback</h1>
    <div>
        <p>
            Type sample audio url having .mp3 exetension and click on play button.
            <br />
            <input type="text" id="audiofile" size="80" value="" />
        </p>
        <audio id="myaudio">
          Audio Tag not Supported.
        </audio>
        <button id="play" onclick="playAudio();">
          Play
        </button>
   
        <button onclick="rewindAudio();">
          Rewind
        </button>
        <button onclick="forwardAudio();">
          Fast forward
        </button>
        <button onclick="restartAudio();">
          Restart
        </button>
    </div>

Output in Browser:





Now to apply the action in above HTML Markup we need to write JavaScript logics. Find the JavaScript Methods below:

    <script type="text/javascript">
        // Global variable to track current file name.
        var currentFile = "";
        function playAudio() {
            // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    var btn = document.getElementById('play');
                    var audioURL = document.getElementById('audiofile');

                    //Skip loading if current file hasn't changed.
                    if (audioURL.value !== currentFile) {
                        oAudio.src = audioURL.value;
                        currentFile = audioURL.value;
                    }

                    // Tests the paused attribute and set state.
                    if (oAudio.paused) {
                        oAudio.play();
                        btn.textContent = "Pause";
                    }
                    else {
                        oAudio.pause();
                        btn.textContent = "Play";
                    }
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                    if (window.console && console.error("Error:" + e));
                }
            }
        }
        // Rewinds the audio file by 30 seconds.

        function rewindAudio() {
            // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime -= 30.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                    if (window.console && console.error("Error:" + e));
                }
            }
        }

        // Fast forwards the audio file by 30 seconds.

        function forwardAudio() {

            // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime += 30.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                    if (window.console && console.error("Error:" + e));
                }
            }
        }

        // Restart the audio file to the beginning.

        function restartAudio() {
            // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime = 0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                    if (window.console && console.error("Error:" + e));
                }
            }
        }
    </script>

If you know the JavaScript, then you will not find any difficulties to understand above methods.

Now, let’s see the <audio> tag in action.




Note: Download the attached project to test and you need internet connection because I am using remote server to get audio file.


I hope you like it. Thanks.

Credit: http://msdn.microsoft.com/en-us/library/ie/gg589529(v=vs.85).aspx

29 May 2012

Attribute Starts with Selector in jQuery

In this quick post you will learn how to find elements in the DOM that have the specified attribute with a value beginning exactly with a given string.


Actually, this problem was asked by my one of the friend Md Ibrahim Rashid, who is from Kolkata at Kolkata Geeks Developer Conference 2012.

Let’s look at the HTML Markup and a problem:-

    <div>
        <a id="abc" href="#">Link 1</a><br />
        <a id="bdc" href="#">Link 2</a><br />
        <a id="acd" href="#">Link 3</a><br />
        <a id="cca" href="#">Link 4</a><br />
        <a id="adc" href="#">Link 5</a><br />
    </div>

In the above markups, I have 5 links with id attribute. If you look at id attribute’s value, you will find 3 id’s value starts with char ‘a’.


Now the question is how to apply the style to the links which has id attribute starts with character ‘a’?


image from zazzle.co.uk


Look at the jQuery code that will solve our problem.

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <style type="text/css">
        .Class1 {
            font: italic 20px Verdana;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $('a[id^="a"]').addClass("Class1");
        });
    </script>

In the above jQuery code, $('a[id^="a"]') code snippets will select all <a> elements having ‘id’ attribute starts with ‘a’ character.

Keep in mind, jQuery uses some special characters to find the matching elements, for example:

jQuery Code
Meaning
id="a"
Selects all ids which has value equal to ‘a’ char.
id^="a"
Selects all ids which has value that starts with ‘a’ character.
id*="a"
Selects all ids which has value substring equal to ‘a’.
id~="a"
Selects all ids which has value equal to ‘a’ delimited by space.
id$="a"
Selects all ids which has value ending with exactly ‘a’.

Look at the output of my above code.


I hope you like it. Thanks.

28 May 2012

AssociatedControlID Property in ASP.NET

I can see many websites today having no such feature like when user clicks on label control textbox gets focus. As you can see in animated image given below, in first login set when I clicked on label control text box not getting focus and the same in another login set textbox gets focus and we can start typing.



Reason: Such websites not using AssociatedControlID property.

Use of AssociatedControlID property

We use AssociatedControlID property to associate a Label control with another server control on a Web form. When a Label control is associated with another server control, its attributes can be used to extend the functionality of the associated control. You can use the Label control as a caption for another control, or you can set the tab index or hot key for an associated control.
When the AssociatedControlID property is set, the Label control renders as an HTML label element, with the for attribute set to the ID property of the associated control. You can set other attributes of the label element using the Label properties. For example, you can use the Text and AccessKey properties to provide the caption and hot key for an associated control.

If you are an ASP.NET guy, you can use:

<asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">Username:</asp:Label>
<asp:TextBox ID="UserName" runat="server"></asp:TextBox>

If you are an HTML guy, you can use:

<label for="UserName" id="UserNameLabel">Username:</label>
<input name="UserName" type="text" id="UserName" />

Means, in ASP.NET we use AssociatedControlID property and in HTML we use 'for' attribute for the same result.

Introduction to Visual Basics 6

Visual Basic (VB) is the third-generation event-driven programming language and integrated development environment (IDE) from Microsoft for its COM programming model. Visual Basic is relatively easy to learn and use.
Visual Basic was derived from BASIC and enables the rapid application development (RAD) of graphical user interface (GUI) applications, access to databases using Data Access Objects, Remote Data Objects, or ActiveX Data Objects, and creation of ActiveX controls and objects. Scripting languages such as VBA and VBScript are syntactically similar to Visual Basic, but perform differently.
A programmer can put together an application using the components provided with Visual Basic itself. Programs written in Visual Basic can also use the Windows API, but doing so requires external function declarations.
The final release was version 6 in 1998. Microsoft's extended support ended in March 2008 and the designated successor was Visual Basic .NET (now known simply as Visual Basic).
Like the BASIC programming language, Visual Basic was designed to be easily learned and used by beginner programmers. The language not only allows programmers to create simple GUI applications, but can also develop complex applications. Programming in VB is a combination of visually arranging components or controls on a form, specifying attributes and actions of those components, and writing additional lines of code for more functionality. Since default attributes and actions are defined for the components, a simple program can be created without the programmer having to write many lines of code. Performance problems were experienced by earlier versions, but with faster computers and native code compilation this has become less of an issue.
Although programs can be compiled into native code executables from version 5 onwards, they still require the presence of runtime libraries of approximately 1 MB in size. This runtime is included by default in Windows 2000 and later, but for earlier versions of Windows like 95/98/NT it must be distributed together with the executable.
Forms are created using drag-and-drop techniques. A tool is used to place controls (e.g., text boxes, buttons, etc.) on the form (window). Controls have attributes and event handlers associated with them. Default values are provided when the control is created, but may be changed by the programmer. Many attribute values can be modified during run time based on user actions or changes in the environment, providing a dynamic application. For example, code can be inserted into the form resize event handler to reposition a control so that it remains centered on the form, expands to fill up the form, etc. By inserting code into the event handler for a keypress in a text box, the program can automatically translate the case of the text being entered, or even prevent certain characters from being inserted.
Visual Basic can create executables (EXE files), ActiveX controls, or DLL files, but is primarily used to develop Windows applications and to interface database systems. Dialog boxes with less functionality can be used to provide pop-up capabilities. Controls provide the basic functionality of the application, while programmers can insert additional logic within the appropriate event handlers. For example, a drop-down combination box will automatically display its list and allow the user to select any element. An event handler is called when an item is selected, which can then execute additional code created by the programmer to perform some action based on which element was selected, such as populating a related list.
Alternatively, a Visual Basic component can have no user interface, and instead provide ActiveX objects to other programs via Component Object Model (COM). This allows for server-side processing or an add-in module.
The language is garbage collected using reference counting, has a large library of utility objects, and has basic object oriented support. Since the more common components are included in the default project template, the programmer seldom needs to specify additional libraries. Unlike many other programming languages, Visual Basic is generally not case sensitive, although it will transform keywords into a standard case configuration and force the case of variable names to conform to the case of the entry within the symbol table. String comparisons are case sensitive by default, but can be made case insensitive if so desired.
The Visual Basic compiler is shared with other Visual Studio languages (C, C++), but restrictions in the IDE do not allow the creation of some targets (Windows model DLLs) and threading models.
All versions of the Visual Basic development environment from 1.0 to 6.0 have been retired and are now unsupported by Microsoft. The associated runtime environments are unsupported too, with the exception of the Visual Basic 6 core runtime environment, which will be officially supported by Microsoft for the lifetime of Windows 7. Third party components that shipped with Visual Studio 6.0 are not included in this support statement. Some legacy Visual Basic components may still work on newer platforms, despite being unsupported by Microsoft and other vendors.
Development and maintenance development for Visual Basic 6 is possible on legacy Windows XP, Windows Vista and Windows 2003 using Visual Studio 6.0 platforms, but is unsupported. Documentation for Visual Basic 6.0, its application programming interface and tools is best covered in the last MSDN release before Visual Studio.NET 2002. Later releases of MSDN focused on .NET development and had significant parts of the Visual Basic 6.0 programming documentation removed. The Visual Basic IDE can be installed and used on Windows Vista, where it exhibits some minor incompatibilities which do not hinder normal software development and maintenance. As of August 2008, both Visual Studio 6.0 and the MSDN documentation mentioned above are available for download by MSDN subscribers.