Sorted By: Month (5) and Year (2011)

jQuery.simpleJSlide-1.1 / Simple jQuery Slide Show Plugin With Unobtrusive JavaScript Support

An awesome and super simple jQuery slide show plugin. This plugin also takes advantage of unobtrusive JavaScript method as well.
2011-05-24 12:44
Tugberk Ugurlu


Well, the time actually came for me for both my first Nuget package and jQuery plugin : jQuery.simpleJSlide-1.1

In this blog post I am not going to go through how I created the Nuget package. Instead, I am going to explain how this small and simple slide show plugin works.

If you are interested in Nuget, there are many great learning stuff on Nuget Docs and you can also watch some basic and extreme videos on Nuget;

 http://docs.nuget.org/docs/start-here/videos

jQuery.simpleJSlide is an awesome and super simple jQuery slide show plugin. This plugin also takes advantage of unobtrusive JavaScript method as well. As I explained above, you can reach this plugin easily via Nuget;

image

Also, there is a sample package which has a basic sample example inside it. If you would like to install this package and also would like to have an example, I recommend you to install jQuery.simpleJSlide.Sample;

image

jQuery.simpleJSlide.Sample package has a dependency on jQuery.simpleJSlide package and jQuery.simpleJSlide has a dependency on jQuery and jQuery.ui.unobtrusively package. jQuery UI Unobtrusively package is a simple package which contains only one .js file that enables you to wire-up jQuery UI unobtrusively. This code iterates the page elements, finds elements with the custom attribute data-ui-fn and then apply the desired JavaScript / jQuery attribute. (Quoted from MSJoe) For Example;

<asp:TextBox runat="server" ID="startDate" data-ui-fn="datepicker" />

When you reference the proper JavaScript files (jQeury, jQuery UI and jQuery.UI.Unobtrusively) to a page, you are enabling jQeury UI Datepicker by writing above code. Yes, you are not writing one line of JavaScript code here. Very simple and clean. But what if we want to override or set some options. We’ll get to that latter but I am not going to dive into this package more in this blog post though.

image

I pushed this package into Nuget live feed but this code actually written by Damian Edwards who is a web guy at Microsoft. After I pushed the package to Nuget live feed, I told him about the package and he is now the admin of the package.

image

As I motioned, this jQuery plugin and the others can be used by this way.

Let’s look at what this plugin can give us. For the sake of simplicity I’m going to create a new ASP.NET Web Site with Visual Studio 2010;

imageimage

I’m going to fire up PMC (Package Manager Console) and install jQuery.simpleJSlide.Sample package;

image

image

As you can see, it gets bunch of things and set it up a sample for us. Your solution should look like as it is on left hand side. I made a little change on the folder structure so it doen't have look like as it is on left side. Let’s open up the index.htm file and see how the sample code looks like;

image

Don’t try to read the code. It is not the case here. Just looked at it and see if there is any JavaScript code inside the DOM. There is not. Then, let’s see what this page is doing;

 

 

As you can see it is fully functional, simple image slider with play and stop buttons. Let’s look at the code a little closer;

<div class="simpleJSlide" data-ui-fn="simpleJSlide" data-ui-simpleJSlide-actionactive="true" 
    data-ui-simpleJSlide-playbuttonid="play" data-ui-simpleJSlide-stopbuttonid="stop" data-ui-simpleJSlide-notificationactive="true">

    <h2>simpleJSlide Example Page</h2>

    <div id="mainImageContainer">
        <img alt="image" id="containerImage" src="" />
    </div>

    <div id="thumbContainer">
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/1.jpg" data-ui-simpleJSlide-imgSrc="img/1.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/2.jpg" data-ui-simpleJSlide-imgSrc="img/2.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/3.jpg" data-ui-simpleJSlide-imgSrc="img/3.jpg" /><br />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/4.jpg" data-ui-simpleJSlide-imgSrc="img/4.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/5.jpg" data-ui-simpleJSlide-imgSrc="img/5.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/6.jpg" data-ui-simpleJSlide-imgSrc="img/6.jpg" /><br />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/7.jpg" data-ui-simpleJSlide-imgSrc="img/7.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/8.jpg" data-ui-simpleJSlide-imgSrc="img/8.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/9.jpg" data-ui-simpleJSlide-imgSrc="img/9.jpg" /><br /><br />

        <span class="funcBtn" id="play">Play</span> <span class="funcBtn" id="stop">Stop</span> <span id="notificationContainer"></span>
    </div>

    <div class="clearFix"></div>

</div>

There is some conventions here;

  1. You need to specify a div element and declare data-ui-fn attribute and give it simpleJSlide as value.
  2. Inside this div element, there must be two div elements whose ids are mainImageContainer and thumbContainer.
  3. mainImageContainer div element must contain an img element whose id is containerImage and this image will be the container for your bigger sized images.
  4. Every img element inside thumbContainer div element will be recognized as a thumbnail image. There is no way to excape that for now but maybe this can be done in the future or you can do it by yourself.
  5. Every single image inside thumbContainer div element must contain data-ui-simpleJSlide-imgSrc attribute. The value of this attribute should contain bigger sized image src attribute for the particular thumbnail image as you can see above.

Also, there are some options that you can override. You can specify them by simply declaring the option name after data- ui-simpleJSlide- attribute on the div element whose data-ui-fn value is simpleJSlide. Here are the options that you can override;

  • actionactive (data- ui-simpleJSlide-actionactive) as Boolean : Specifies if the images can be iterated or not. It is set to false by default.
  • notificationactive (data- ui-simpleJSlide-notificationactive) as Boolean : Specifies if you want to display a massage after clicking play and stop buttons. It is set to false by default.
  • playbuttonid (data- ui-simpleJSlide-playbuttonid) as String : Id of the element which will start play function by clicking for iterating images. It is set to simpleJSlidePlayButton by default.
  • stopbuttonid (data- ui-simpleJSlide-stopbuttonid) as String : Id of the element which will start stop function by clicking for stopping iterating images. It is set to simpleJSlideStopButton by default.
  • notificationcontainerid (data- ui-simpleJSlide-notificationcontainerid) as String : Id of the element which will hold the notification massage for play and stop notification. It is set to notificationContainer by default.
  • playingtext (data- ui-simpleJSlide-playingtext) as String : Value of the notification massage which will be displayed for play function start. It is set to Now Playing… by default.
  • stopedtext (data- ui-simpleJSlide-stopedtext) as String : Value of the notification massage which will be displayed for stop function start. It is set to Stopped… by default.

As you see on the example, I’ve overridden some options inside the DOM.

Obtrusive and Total Lame Way

Well, if you would like to use this with JavaScript instead of this unobtrusive way, you totally can. The following code shows how the above example can be done that way;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title></title>
    <link href="Content/site.css" rel="stylesheet" type="text/css" />

    <script src="../Scripts/jquery-1.6.1.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.simplejslide-1.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#simpleJSliderDiv").simpleJSlide({
                actionactive: true,
                playbuttonid: "play",
                stopbuttonid: "stop",
                notificationactive: true
            });

        });

    </script>

</head>

<body>

<div class="simpleJSlide" id="simpleJSliderDiv">

    <h2>simpleJSlide Example Page</h2>

    <div id="mainImageContainer">
        <img alt="image" id="containerImage" src="" />
    </div>

    <div id="thumbContainer">
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/1.jpg" data-ui-simpleJSlide-imgSrc="img/1.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/2.jpg" data-ui-simpleJSlide-imgSrc="img/2.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/3.jpg" data-ui-simpleJSlide-imgSrc="img/3.jpg" /><br />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/4.jpg" data-ui-simpleJSlide-imgSrc="img/4.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/5.jpg" data-ui-simpleJSlide-imgSrc="img/5.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/6.jpg" data-ui-simpleJSlide-imgSrc="img/6.jpg" /><br />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/7.jpg" data-ui-simpleJSlide-imgSrc="img/7.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/8.jpg" data-ui-simpleJSlide-imgSrc="img/8.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/9.jpg" data-ui-simpleJSlide-imgSrc="img/9.jpg" /><br /><br />

        <span class="funcBtn" id="play">Play</span> <span class="funcBtn" id="stop">Stop</span> <span id="notificationContainer"></span>
    </div>

    <div class="clearFix"></div>

</div>

</body>
</html>

I am not using Nuget !

Don’t worry. I have pushed the plugin to GitHub as well. Here is the project link : https://github.com/tugberkugurlu/jQuery-simpleJSlide

Enjoy Smile

ASP.NET Web Forms : Calling Web Service Page Methods Using JQuery

In this blog post we will see how to consume a web page methods using JQuery on ASP.NET Web Forms and use ASP.NET page methods as services. You will find some cool stuff about other things as well :)
2011-05-15 20:58
Tugberk Ugurlu


As it was officially announced last year, Microsoft has been contributing code to JQuery project for over a year. Lots of developers are now using JQuery in their Web Forms project as well.

In web forms, there is a narrowly known feature that you can put your tiny Web Services on your code behind file and call them via client side code easily. Let’s look at how easy that.

We have following code inside our Default.aspx page’s code behind file;

        [WebMethod]
        public static string CallMe() {

            return "You called me on " + DateTime.Now.ToString();

        }

Compile your code and run your application with CTRL + F5. After that, open up the fiddler. We will make a HTTP POST request to our method with following code;

image

Did you notice the URL? It gets the method name after the '/'. Amazing! After we execute this request, here is what we got;

image

Pretty straight forward and simple. Now let’s see how JQuery fits in here and as Scott Hanselman always says let’s see 'how Lego pieces fit in together'

Getting a Little Work Done by Default

Most of the heavy lifting is done by the following code here. I put this code inside a separate .js file named JQuery.PageMethod.Call.Helper.js but feel free to use it inside the your html markup.

//-----------------------------------------------------------------------------+
// jQuery call AJAX Page Method                                                |
//-----------------------------------------------------------------------------+
function PageMethod(fn, paramArray, successFn, errorFn) {
    var pagePath = window.location.pathname;
    //-------------------------------------------------------------------------+
    // Create list of parameters in the form:                                  |
    // {"paramName1":"paramValue1","paramName2":"paramValue2"}                 |
    //-------------------------------------------------------------------------+
    var paramList = '';
    if (paramArray.length > 0) {
        for (var i = 0; i < paramArray.length; i += 2) {
            if (paramList.length > 0) paramList += ',';
            paramList += '"' + paramArray[i] + '":"' + paramArray[i + 1] + '"';
        }
    }
    paramList = '{' + paramList + '}';
    //Call the page method
    $.ajax({
        type: "POST",
        url: pagePath + "/" + fn,
        contentType: "application/json; charset=utf-8",
        data: paramList,
        dataType: "json",
        success: successFn,
        error: errorFn
    });
}

As I mentioned above, I have put this helper code inside a separate .js file. Although this is not a big file, I still would like to minify it so that I can get the minimum size file. I would rather minify that file with Ajax Minifier via command line but there are a lot of good compression tools. My file was 1.364 bayt before the minify action and it became 291 bayt after that. I have 77 % saving here. Not bad!

image

When we look at this JQuery code here, we will see that nothing fancy going on. At the line 5, we are grabbing the current page path (which will be Default.aspx in our case). Between line 10 and 17, we are getting the paramArray parameter that we have declared and creating a JSON our of that. We are doing that to pass parameters to our method if our page method has parameters defined. Between line 19 and 26, we are making an HTTP Post request to the service which is a Page Method in our case.

Let’s talk less and look at the code. Here is our entire code behind file;

using System;
using System.Web.Services;

namespace JQueryPageMethodCall1 {

    public partial class _Default : System.Web.UI.Page {

        protected void Page_Load(object sender, EventArgs e) {

        }

        [WebMethod]
        public static string CallMe() {

            return "You called me on " + DateTime.Now.ToString();
        }

        [WebMethod]
        public static string GetMeAGUID(string name, string surname, string age) {

            var poo = int.Parse(age);

            return string.Format(
                "Hey, {0} {1}. How is it goin over there? u are {2} years old and here is a Guid for you : {3}", 
                name, surname, poo.ToString(), Guid.NewGuid()
                );
        }

    }
}

We have two web methods here. One is with parameters defined and the other is parameterless. We will consume those with the help of JQuery. Here is how our web form page looks like;

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" ClientIDMode="Static"
    CodeBehind="Default.aspx.cs" Inherits="JQueryPageMethodCall1._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>

<asp:Content ID="ScriptContent" runat="server" ContentPlaceHolderID="ScriptPlaceHolder">
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="Scripts/Helpers/JQuery.PageMethod.Call.Helper.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            var succeededAjaxFn = function (result) {

                $('#result').hide();
                $('<p>' + result.d + '</p>').css({ background: 'green', padding: '10px', color: 'white' }).appendTo('#result');
                $('#result').fadeIn('slow');
            }

            var failedAjaxFn = function (result) {

                $('#result').hide();
                $('<p>Failed : ' + result.d + '</p>').css({ background: 'red', padding: '10px', color: 'white' }).appendTo('#result');
                $('#result').fadeIn('slow');

            }

            $('#btnGetDateTime').click(function () {
                PageMethod("CallMe", [], succeededAjaxFn, failedAjaxFn);
            });

            $('#btnGetGUID').click(function () {
                var parameters = ["name", $('#txtName').val(), "surname", $('#txtSurname').val(), "age", $('#txtAge').val()];
                PageMethod("GetMeAGUID", parameters, succeededAjaxFn, failedAjaxFn);
            });
        });

    </script>
</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        Get me a guid !
    </h2>

    <div>
        Name : <asp:TextBox runat="server" ID="txtName" />
    </div>
    
    <div>
        Surname : <asp:TextBox runat="server" ID="txtSurname" />
    </div>

    <div>
        Age : <asp:TextBox runat="server" ID="txtAge" />
    </div>

    <a href="#" id="btnGetGUID">Get Me A GUID</a>
    <a href="#" id="btnGetDateTime">GetCurrentDateTime</a>

    <div id="result" style="margin:20px 0 20px 0;" />

</asp:Content>

What we have done here is to define succeededAjaxFn function for success event and failedAjaxFn function for error event. Also we are calling the PageMethod function, that we have already defined and wrap it up in a separate file, in every a element click.

This is how our page looks like;

image

Let’s go through some scenarios. We’ll click the GetCurrentDateTime link and see what happens;

image

Boom! Worked. It gets what server gave to it. Now, we will fill in the fields and click the Get Me A GUID link;

image

Rock on! This one also worked and we are not making any postbacks here. It is all JQuery. Let’s send the request with empty Age value;

image

It failed which means our JQuery code is working just fine. (It failed because I try to parse the age value into an integer. I supplied an empty age parameter so the method throws an exception)

Now, I will put a breakpoint on my GetMeAGUID method and debug my application. When I run the app, fill in the fields and click the Get Me A GUID link, it gets me to my server side code with JQuery code;

image

You see, all the values we have provided are sitting right there. It is that easy. Of course, the main purpose of this demo is not so much fitting in the real world needs but you get the idea about what you could accomplish. Feel free to download the code from below and play around with it.

Be well and write good code Smile

MCTS 70-515, Failed but I'm Gonna Beat It Next Time - Throughout MCTS Exam Overview and Experience

Couple of days ago I took the Exam 70-515, TS: Web Applications Development with Microsoft .NET Framework 4 and I am gonna walk you through it in this post
2011-05-14 17:44
Tugberk Ugurlu


mcts-logo

Couple of days ago (actually a week ago on the 7th of May), I took the Exam 70-515, TS: Web Applications Development with Microsoft .NET Framework 4 to be qualified as MCTS guy but it didn’t go smoothly as I assumed and I failed Confused smile It was ok though. The experience it has given me was enough to encourage me to go and discover all the other goodness of ASP.NET and it’s children (AJAX and all that stuff). 700 points should be taken to pass the exam but mine was 546.

Actually, my exam number was 72-515. If you have taken the 072 exams before, you’d know that they are Microsoft Academic exams for students and a small discount is applicable with those exams. In terms of questions and qualification which will you get, there is no difference between 070 and 072 exams.

For those who don’t know what MCTS is, here is a quick overview;

MCTS Overview

The Microsoft Certified Technology Specialist (MCTS) certifications provide the foundation for Microsoft Certification. These certifications are designed to validate your skills on the features and functionality of key technologies. You can show your depth of knowledge in one specific technology, earn multiple MCTS certifications to show breadth across different products, or build on the MCTS to earn a Microsoft Certified IT Professional (MCITP) certification.

MCTS candidate profile

MCTS candidates are capable of implementing, building, troubleshooting, and debugging a particular Microsoft technology.

More information about MCTS can be found here : http://www.microsoft.com/learning/en/us/certification/mcts.aspx

When I found about these exams, I haven’t had a single hard time to figure out which direction should I go or what is the best suitable exam for me. Microsoft exams are well documented on their website and also there is a ‘Training and Learning’ section up on social Microsoft.

When you pass an MCTS exam, you will be qualified to get a certificate on the topic that you have taken the exam of. But also, MCTS exams for .Net developers are also the steps which will lead us to MCPD.

Quick Overview of MCPD

The Microsoft Certified Professional Developer (MCPD) certification validates a comprehensive set of skills that are necessary to deploy, build, optimize, and operate applications successfully by using Microsoft Visual Studio and the Microsoft .NET Framework. The MCPD certification is designed to provide hiring managers with a strong indicator of your potential job success. It requires two to three years of relevant experience and a commitment to remaining current in best practices and technologies.

More information can be found on http://www.microsoft.com/learning/en/us/certification/mcpd.aspx

In order to be qualified as an MCPD on Microsoft Visual Studio 2010, three MCTS exams for Windows Developer 4 and Web Developer 4; two MCTS exams for windows azure developer are needed to be passed. In addition to those, there is going to be a MCPD requirement exam in order to complete to road which will lead you to MCPD.

image

Registration for those exams are not made on Microsoft websites, it can be done on Prometric Testing Services.

If you are a student and have an e-mail address through your high school or university, I encourage you to go and take a look at DreamSpark program. There is a campaign running now for Certification Exams which will give you a promotion code for one free exam.

I hope that this blog post helped you to have a better idea on Microsoft exams. Please share your thoughts or experiences by writing a comment to this post so that others can take advantage of them Smile

Useful Links

Looking for Chuck Norris Facts For Scott Hanselman - Give Your Comments

Scott Hanselman is one of the coolest tech guys in Microsoft and in this post I am trying to find the facts about him. Ready? Then let's rumble !
2011-05-10 18:03
Tugberk Ugurlu


imageJust a few minutes ago, the meanest thing happened. I opened a question called I'm looking for other's opinion on Scott Hanselman Facts on meta.stackoverflow.com and it took seconds to be closed and minutes to be deleted Sad smile what a mean thing! So thank you guys.

Well, I figured nobody could close this topic here so let’s ask the question again here Smile

Everybody knows that Jon Skeet Facts has been discused long time ago and there were Chuck Norris Facts style answers.

I'm looking for the same thing for Scott Hanselman

Here are some of them that I can think of;

  1. He hates Northwind.
  2. He dies for a diet soda.
  3. He is a diabetic.
  4. He watches Undercovers regularlly (as far as I know from his twitter posts)
  5. He got lost in Munich ones when he was headed to a keynote.
  6. He created most of the parts of Nerddinner.Com
  7. He likes to tweet.
  8. He has a podtcsat called hanselminutes
  9. He has another podcast with Rob Conory called thisdeveloperslife.com
  10. He pops up before ScottGu on Google by googling 'scott'.
  11. He likes to google with bing.
  12. CRUD is one of his favourite words.
  13. He used to work for an online bankking company.
  14. He is working for Microsoft in the meantime.
  15. He talks to himself while writing class properties (the freaking part here is that he enjoys it a lot)
  16. If he ever gets the yellow screen of death, he gets it because he means it.
  17. Once, he gets his wife's ring out of the pipeline like a plumber.
  18. His family has a thing called 'Mummy & Daddy Day' which I will certainly imitate the idea in the future.
  19. He could make an entire e-commerce web application for Tacos.
  20. He is the only guy who could make Ninja moves with Windows 7
  21. He can speak German better than Germans.

That’s what I can think of for now Smile I’ll add them as comments if new things pops up in my head. So fire your thoughts guys. Let’s have fun.

Tags