First we will need to create a class for the Html Helper, I usually prefer to add a folder to my solution called Helpers. Both the class and the method will need to be static. In addition you will need to add a HtmlHelper parameter to the method that is preceded by the keyword this. This first parameter of the extension method indicates the class that the extension method extends, which in our case would be a input control.


using System;
using System.Web.Mvc;

}
}


Next within our DatePicker Method we will want to add the input control and the Jquery, and I found this easiest way to do this was to use TagBuilders. The TagBuilder Class is a utility that easily allows you to build html tags. We will be using two TagBuilders, one for generating our input box, and a second TagBuilder for the script tag. An overview of the TagBuilder class can be found here. Any script tag will need to be written with the TagBuilders InnerHtml property, or it will be interpreted as text on the page. The resulting code is below:


using System;
using System.Web.Mvc;

var scriptBuilder = new TagBuilder("script");
scriptBuilder.InnerHtml = "$(function() { $('#" + id + "').datepicker();});";
return builder.ToString(TagRenderMode.Normal) + scriptBuilder.ToString(TagRenderMode.Normal);
}
}
}


Next to be able add the control easily on any page we will need to add the Namespace for our Helpers to the web.config file as shown below.


<pages>
<namespaces>
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Routing" />
<add namespace="MvcApplication1.Helpers"/>
</namespaces>
</pages>


Finally we can easily add our DatePicker control anywhere to our site with our new Extension.

Date: <%= Html.DatePicker("myDatePicker") %>


This short tutorial assumes that your site is already set up for using JQuery, and the UI controls. Details for using Jquery can be found here.

There are many approaches here, but we have discovered one that works regardless of which AJAX mechanism you are building upon (MS AJAX, jQuery, XMLHttpRequest, etc.).

The approach we took is to add a tag block to the Login.aspx page. This marker will be used to tell us when we’ve been redirected to the Login.aspx page from an AJAX request sent to IIS. Here is a sample snippet that you could use.

After you’ve added this token to your login page, you can begin checking for the existence of this tag when you receive AJAX responses back from the application server. Here is how we implemented it.

// tell MS AJAX request manager that we have to check for valid login session (Ajax.ActionLink)
Sys.Net.WebRequestManager.add_completedRequest(function (result) {
    IsValidSession(result.get_responseData()); // capture returned ajax response data
});

// attach all ajax completion requests for session review
$('*').ajaxComplete(function (e, xhr, settings) {
    IsValidSession(xhr.responseText);
});

/// Checks for invalid session [JQUERY/MSAJAX]
function IsValidSession(response_data) {
    if (response_data.match(/id="ajaxexpiry"/gi) != null)  // pattern to locate
        window.location.href = "/"; ; // redirect matching to login page
}

The code above is made up of three separate blocks. The first block handles MS AJAX integration. We leverage the WebRequestManager’s completed request handler in the MicrosoftAjax.js library. In the next section we integrate the jQuery AJAX framework by using the ajaxComplete() method handler.

Once we’ve collected the response data from the AJAX requests (MS AJAX or jQuery), we can process the text by matching on the tag pattern (id=”ajaxexpiry”) we created earlier. This is done in the IsValidSession routine called by each AJAX interface above. If we discover a match on our token, we will redirect the user to the login page. In our example, the login page is at the root of the domain, but in your instance, you may need to customize accordingly.

Another possible solution to this issue is to use a periodic polling routine to request content from the server. However, this approach puts additional load on your application server unnecessarily. We chose to do the session checking locally, and check for session expire only when necessary on the client (thus no impact to server resources).

Although I wasn’t using Sharepoint for this website, I was using jQuery, so I leveraged this idea to print specific portions of a website instead of only Sharepoint specific content. This site was also using jQuery UI for creating rich internet content, specifically the tabs, accordion, and dialog widgets. The incredible thing about widgets is that they allow for highly interactive sites, yet the trouble with widgets is that they are not conducive to easily printing their content.

If you tried printing the default tabs example using jQuery UI, you end up with something that looks like this…

At first glance, you may not realize the problem with this. The content of the inactive tabs is hidden from the print view. In our requirements, we needed to print all the content for each tab, whether it was active or not. Now you begin to see the clash between interactive content and printer friendly widgets.

There is a solution to this problem, but it varies depending on how you setup your widgets. Here are some tips to setup the print view. For printed tabs to work, you need to create some hidden panel headers and utilize some CSS to display the hidden tabs contents. The solution I came up with contains a “Printer Friendly” link which triggers the dynamic CSS changes for printing all the tabs contents.

Add the following HTML to your page where you want the locate the “Printer Friendly” link for the tab widgets.

Printer Friendly Here

Here is the printer friendly window that is created after clicking on the “Printer Friendly” link.

Here is the jQuery script that enables the printer-friendly jQuery UI tabs to happen.

$(function() {
	        $("#tabs").tabs();

	        // remove any print headers that we may have added
	        $("div.printHeader").remove();

	        // assign our id for print navigation removal
	        $("#tabs>ul").each(function() {
	            $(this).addClass("tab-nav");
	        });

	        // create printer friendly tab view
	        $("#tabs>ul>li>a").each(function() {
	            // what tab is this?
	            var tabNum = $(this).attr("href").replace("#", "");

	            // get our content for this tab
	            var tabContent = $("div[id=" + tabNum + "]");

	            // prepend our print header along with tab theme style
	            $(tabContent).before("
\n" +
    	                            "
\n" +
	                                    "
" + $(this).text() + "

\n" +
	                                "


\n" +
	                            "

\n");
	        });

	        drawPrinterFriendly(); // creates printer friendly links
	    });

	    // Prints contents of a dialog
	    // source: http://www.endusersharepoint.com/2008/12/09/jquery-for-everyone-print-any-web-part/
	    // remarks: added removal of printer friendly link
	    function printDialog(tagid, title) {
	        if (tagid) {
	            var CSSContent = ".printInfo,.tab-nav { display:none;}\n.ui-tabs .ui-tabs-hide,.printHeader { display: block !important; }\n";
	            var printCss = "


";
	            // build html for print page
	            // remarks: we use parent here since the dialog is in a wrapped container
	            var html = "\n\n" + $("head").html() + "\n" + printCss + "\n\n\n" + $("#" + tagid).parent().html() +
                    "\n\n";
	            var printWP = window.open("", "printWebPart"); //open new window
	            printWP.document.open();
	            //insert content
	            printWP.document.write(html);
	            printWP.document.close();
	            //open print dialog
	            printWP.print();
	        }
	    }

	    // creates printer friendly link for matching dialog H3 tags
	    function drawPrinterFriendly() {
	        // find all dialogs by their TD
	        var tags = $("*[id^='dialog-']");
	        // loop through dialogs
	        tags.each(function() {
	            //get id for print function
	            var tagid = $(this).attr("id");
	            //append an image with onClick event
	            $(this).find("h3").html("").append(
                        "
" +
                        "  Printer Friendly" +
                        "  " +
                        "

"
                    );
	        });
	    }

You can find the entire solution here. This solution can easily be adapted to work with other widgets (dialogs, accordions, etc.) with the inclusion of the H3 tag inside a div with id prefix “dialog-”. Possibly in the future I will create a jQuery plugin that encapsulates this functionality for simple integration into your site. Have you found a better approach for printing select portions of a page containing jQuery widgets?

• jQuerify is a simple way to inject the jQuery framework into any website and enable immediate DOM manipulation. To try it out, just drag this link to your bookmark list. Depending on the browser you’re using, you can then enter any javascript commands via the console window in Firebug, IE 8 Developer Tools, or Chrome Developer Tools.

  

  If the website you are visiting already has jQuery installed, the bookmarklet will not inject the framework again.

  

  Here is some sample jQuery code which would highlight a post in red, the blog entry in blue, and perform some simple animation to the sidebar on this website. Click here to see it in action.

  $("div[class=post]:first").css("border", "2px solid red");
  $("div[class=entry]:first").css("border", "2px solid blue");
  $("div[class=sidebg]").slideToggle(4000).fadeIn("fast");

• Firebug Lite is another useful bookmarklet if you’re currently using a browser that doesn’t support plugins or have its own set of developer tools. It has support for both online and offline integration. Click here to see an example or simply drag and drop this link into your bookmarks.

  

  You can now enter commands into the console and manipulate the DOM just like you were using an assisted native browser extension. Enjoy!

Do you have any great developer bookmarklets that you’d like to share? Please comment!

First, you need to download the jGrowl extension from here. After including the JavaScript reference to your source, you can begin creating messages by adding the following JavaScript to your page.

$.jGrowl("Customer order successfully submitted!");

jGrowl notifications can be sticky (i.e. you must close them) and they can also accumulate if you want to post several notifications at once. Here’s a quick glimpse of how these notifications can appear with some enhanced styling applied.

jGrowl Sample Notification